57

A new change rolled out to replace the vote count colors from hardcoded CSS values to branded colors.

However, these new colors are not in compliance with WCAG accessibility guidelines. In particular, the upvote color is way too bright:

New upvote/downvote split count colors

(ignore the percentage above the downvote arrow; that's a user script)

In particular, the upvote number has a contrast ratio of just 2.38:1, which is below the 4.5:1 minimum for main text or even the 3:1 minimum for large text in WCAG 2 Level AA. The downvote contrast ratio is 3.81:1, which is above the minimum for large text but below that for main text. Still, though, it would be nicer if it was darker as well.

It's worth noting that accessibility is required under the U.S. Americans with Disabilities Act, so this color may be in violation of that law.

Improve this question
6
  • 13
    Related. I recommend that they hire underslept designers with old monitors and old eyes in old lighting. It's the only way the whizkidz will stop coding up annoyingly low-contrast colors that work only for fifteen-year-olds. That, or citing violations of the U.S. Americans with Disabilities Act. Why do these simple matters of common sense always seem to require demand letters from lawyers hand-delivered before anybody pays attention?
    – tchrist
    Commented Feb 7, 2020 at 3:03
  • 5
    +1 When I turned on my computer just now and noticed this, it looked really bright to me. Not unreadable for me (very nearsighted but otherwise fine), but it just looks horribly faded, and I can see how it could be inaccessible to others.
    – Stormblessed
    Commented Feb 7, 2020 at 5:52
  • 1
    FWIF, I cannot properly read vote summaries (small green rectangle with white text)...
    – Resistance Is Futile
    Commented Feb 7, 2020 at 12:45
  • We should be thankful it's not animated. Pretty sure it will be soon.
    – Shadow Wizard
    Commented Feb 7, 2020 at 15:09
  • 2
    @FranckDernoncourt The specific issue reported in that question was resolved when SE rolled out new unified themes for all sites. The new unified theme uses a contrast ratio of 10.46:1 for the title text, which is more than Level AAA compliant even for main text.
    – Sonic the Anonymous Hedgehog
    Commented Feb 7, 2020 at 20:07
  • @SonictheAnonymousHedgehog cool great to know! I've stopped using the default CSS a long time ago when have no idea how Stack Exchange is supposed to look like nowadays :)
    – Franck Dernoncourt
    Commented Feb 7, 2020 at 20:12

2 Answers 2

Reset to default
25

This instance has been improved.

With regards to all of the other instances of colors that could have improved accessibility: We are aware that huge areas of our product are not yet within the WCAG spec. Right now we are working on a refactor of the way that we handle styles on our front-end that has been a long time coming. This refactor (when complete) will allow us to address contrast issues across our sites in a much easier and maintainable way.

While our ultimate aim is to improve and standardize accessibility across the site, in some places it may get worse before it gets better (due to unintended consequences of the refactor).

We thank you for your patience and appreciate your continued push for adherence to accessibility standards.

Improve this answer
2
  • This is probably what the change was attempting (and failed?) to address. People set their monitors to differing brightness and contrast levels, or use dark mode to reduce eyestrain. We should be able to get help here: ux.stackexchange.com/questions/75149/… and graphicdesign.stackexchange.com/search?q=WCAG+ and stackoverflow.com/….
    – Rob
    Commented Feb 17, 2020 at 14:00
  • 6
    +1 and another textbook example from Yaakov on how to do communications right: answers the question (and addresses the motivation behind the question); tells us what's happening behind the scenes, why it's happening, and what negative impacts we should be prepared for; and explicitly says that staff are prepared and will act when we report issues and regressions. Great job again, I hope others are taking note.
    – user56reinstatemonica8
    Commented Feb 17, 2020 at 14:03
8

For reference, I list the colors below:

  1. The gray used in the up/down arrow, unclicked star and number, and timeline icon is #BBC0C4 with a contrast ratio of 1.83:1.

  2. The large gray number is darker, and colored #6A737C with a contrast ratio of 4.82:1.

  3. The gray loading circle icon uses #EFF0F1 with a contrast ratio of 1.14:1 and #BEC4C7 with a contrast ratio of 1.76:1. [Approximate colors.]

  4. The new green is #5EBA7D with a contrast ratio of 2.38:1.

  5. The new red is #DE5363 with a contrast ratio of 3.8:1.

  6. The yellow clicked star and number is #CEA51B with a contrast ratio of 2.32:1.

  7. Meta.SE: The blue clicked icon is #17A7DB with a contrast ratio of 2.76:1.

    This is different at different sites. E.g.:

    1. StackOverflow uses a reddish #F48024 with a contrast ratio of 2.63:1.
    2. Math.SE uses a navy blue #0F3559 with a contrast ratio of 12.54:1.

Improve this answer
4
  • 4
    I don't really care about contrast ration for shapes as they can be easily discerned since they're large blocks. On the other hand, text with a small contrast ratio is hard to read, and its contrast ratio should be high. (The first sentence is why the contrast ratio minimum for large text is more lenient than that for small text.)
    – Sonic the Anonymous Hedgehog
    Commented Feb 7, 2020 at 7:38
  • 5
    I understand you are primarily interested in text; others might additionally be interested in other design aspects, e.g., consistency, color schemes. I just include this for reference [to help people have informed opinions].
    – Rebecca J. Stones
    Commented Feb 7, 2020 at 7:46
  • 8
    @SonictheAnonymousHedgehog If they are going to approach this from the point of view of attempting to be compliant with WCAG, then they should be targeting WCAG 2.1, which does have a minimum 3:1 contrast ratio requirement for User Interface Components and Graphical Objects.
    – Makyen
    Commented Feb 7, 2020 at 7:58
  • The light greys for unclicked arrows etc are fine, the linked guidance explicitly says "except for inactive components", and turning up the contrast too high on these risks creating UX problems: confusing users about what is clicked and what isn't, which is a problem we have seen before and don't want to re-create.
    – user56reinstatemonica8
    Commented Feb 17, 2020 at 14:25

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .