38

Currently, on meta sites (site-specific metas and MSE), the only difference between a normal tag and a moderator-only tag is the red text:

tags

I have moderate colorblindness (specifically protanopia). To me, the moderator-only tags look almost identical to regular tags - the only difference I see is that the background is slightly darker. The text looks almost identical (I only know that the moderator-only tag text is red because of inspecting the color property in Chrome's developer console).

It would be great if the different types of tags could be more visually distinct, to make the site more accessible to colorblind users.

For reference, this is closer to what the above image looks like to me (with simulated colorblindness using this tool):

tags with colorblindness

Improve this question
3
  • 1
    Maybe make them bold?
    – Nathan Tuggy
    Jun 29, 2016 at 3:30
  • @NathanO'TᴇstingTuggy Maybe, but using higher-contrast colors would be better in my opinion.
    – user307833
    Jun 29, 2016 at 4:32
  • In the past, mod-only tags would be white-on-maroon, which meant that they used to be colorblind-friendly.
    – Sonic the Anonymous Hedgehog
    Dec 3, 2018 at 13:07

1 Answer 1

Reset to default
10

Here's a possible solution:

.moderator-tag {
    color: #fafafb;
    background-color: #aaaaaa;
    border-color: #eec4c8;
}

.moderator-tag:hover {
    color: #fafafb;
    background-color: #999999;
    border-color: #eec4c8;
}

Here's the result of the change:

edited tags

Obligatory userscript:

// ==UserScript==
// @name        Stack Exchange Tag Color Edits
// @version     1.1
// @description A script to modify the tag colors on Stack Exchange to make them more high contrast
// @match       *://*.stackexchange.com/*
// @match       *://*.stackoverflow.com/*
// @match       *://*.askubuntu.com/*
// @match       *://*.superuser.com/*
// @match       *://*.serverfault.com/*
// @match       *://*.mathoverflow.net/*
// @author      Mego
// @grant       none
// @run-at      document-start
// ==/UserScript==

(function() {
    'use strict';

    var css =
        "body .moderator-tag { color: #fafafb; background-color: #aaaaaa; border-color: #eec4c8; }\n" +
        "body .moderator-tag:hover { background-color: #999999 }";

    var style = document.createElement('style');
    style.textContent = css;
    (document.head || document.documentElement).appendChild(style);
})();
Improve this answer
5
  • What would this style look like for non-colorblind users?
    – Stevoisiak
    May 3, 2017 at 13:17
  • @StevenVascellaro It would look exactly the same? I don't understand your question.
    – user307833
    May 3, 2017 at 13:18
  • You mentioned the current style looks different for colorblind users than it does for non-colorblind users. Does this also apply to the new suggested style, or would it's look be unaffected by color blindness?
    – Stevoisiak
    May 3, 2017 at 13:21
  • 2
    @StevenVascellaro The new style I proposed won't be affected by color blindness because it is all grey.
    – user307833
    May 3, 2017 at 15:42
  • To make the :hover style work, you could simply inject your CSS as an extra style sheet, like this. Note that, to make sure that your styles really override the built-in ones, you should make their selectors more specific. A useful trick is that a selector like body .moderator-tag is slightly more specific than just .moderator-tag, even though it matches the exact same elements (since all visible content on the page is inside body anyway).
    – Ilmari Karonen
    Nov 30, 2017 at 5:54

You must log in to answer this question.