37

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

  • 1
    Maybe make them bold? – Nathan Tuggy Jun 29 '16 at 3:30
  • @NathanO'TᴇstingTuggy Maybe, but using higher-contrast colors would be better in my opinion. – user307833 Jun 29 '16 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 Reinstate Monica-hog Dec 3 '18 at 13:07
8

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);
})();
  • What would this style look like for non-colorblind users? – Stevoisiak May 3 '17 at 13:17
  • @StevenVascellaro It would look exactly the same? I don't understand your question. – user307833 May 3 '17 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 '17 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 '17 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 '17 at 5:54

You must log in to answer this question.