14
\$\begingroup\$

Just posted my first question using a tag that has a tag-warning in a while. Saw this:

screenshot of a question being posed, with very little contrast between tag-warning and background

I don't know much about accessibility, but I'll bet that's a pretty low contrast ratio by any measure. I didn't even notice it come up, and only because I ADD-style tabbed over to chat for a sec and then came back did my eye go "wait a minute, the spacing on this page looks a little strange" and I finally noticed there was text there.

I assume, though I don't know, that this may be an artifact of our particular theme and color palette: a network-wide font choice playing badly with our localized background. Can this go into a queue for whenever someone's doing design tidying?

\$\endgroup\$
4
  • \$\begingroup\$ Sidenote: When I was editing the tags for this question, I noticed that the interface for suggested tags (i.e. what appears when you start typing in the tag field) looked different. Is that a recent change? \$\endgroup\$
    – V2Blast Mod
    Commented Feb 21, 2020 at 4:33
  • 3
    \$\begingroup\$ It looked a little different to me, too, but I'm not sure that I'd ever used the bug tag before, so wasn't confident. Also, it's been a while since I've posted a question on meta.... \$\endgroup\$
    – nitsua60 Mod
    Commented Feb 21, 2020 at 4:34
  • \$\begingroup\$ "I assume, though I don't know, that this may be an artifact of our particular theme and color palette." - Note that the exact same coloration is used for the tag warning on other sites that have them. For instance, try using the [font-identification] tag on GraphicDesign.SE: graphicdesign.stackexchange.com/questions/ask \$\endgroup\$
    – V2Blast Mod
    Commented Feb 21, 2020 at 9:33
  • 2
    \$\begingroup\$ @V2Blast true, but there it's at least on a white background. (I don't know the tools that experts like greener use to calculate contrast ratios, but to my eye it looks better there.) I'll clarify in the post that by "artifact" I mean the particular interaction of network-wide font with site-specific background. \$\endgroup\$
    – nitsua60 Mod
    Commented Feb 21, 2020 at 13:38

1 Answer 1

Reset to default
13
\$\begingroup\$

You're right, there's an accessibility issue with these colors.

The colors are #9f8010 for text and #fffdf7 for background. That gives us a contrast ratio of 3.7. The WCAG 2.1 contrast ratio guideline says that text at this size needs to have a ratio of at least 4.5. A ratio of 3.7 is mostly okay for those of us with good eyesight, but people with poor vision will have a bit of trouble reading the warnings.

A slightly deeper bronze color of #7b6101 (for example) would accomplish a contrast ratio of 5.81, would still look warning-y, and would be a bit easier to read for the rest of us:

the same tag warning as in the question but with slightly darker text

\$\endgroup\$

You must log in to answer this question.

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