3 ms·

Automated tools are all fine and dandy and I like to use them. A pet peeve of mine is that "red on white" is considered bad while being, in fact, perfectly leg

Automated tools are all fine and dandy and I like to use them. A pet peeve of mine is that "red on white" is considered bad while being, in fact, perfectly legible: > Element has insufficient color contrast of 3.99 (foreground color: #ff0000, background color: #ffffff, font size: 9.4pt (12.6px), font weight: normal). Expected contrast ratio of 4.5:1 I think whatever algorithm is used to determine contrast is deeply flawed for some colour combinations. I remember reading an article here on HN about how luminance (or luminosity?) varied in a way that wasn't easily discernible by inspecting the RGB components of a colour and how there was a different (much harder) algorithm which instead ensured luminosity could be taken into account when picking colours for a site. I'd wish accessibility tests used _that_ instead of taking the easy way out and using known-flawed RGB checks.

jimcsharp 6y ago
Red on white is almost indistinguishable to me from black on white. If you're trying to use red to indicate a state, it fails on me and I'm sure many others.
- extra88 6y ago
  The parent's complaint is while the red may look black to you, you have no trouble differentiating it from the white background. The problem of red text on a white background would be if someone couldn't see red and had another impairment categorized as "low vision"; for them, red-on-white text the size found on HN would not be readable. If the red-on-white text was larger and bold (>18px, weight 700), its 3.99:1 ratio would be sufficient for WCAG's 3:1 large text threshold.
whylo 6y ago
The algorithm used is defined in WCAG: https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#tests https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#te.... It does attempt to calculate the luminance but you might be referring to a more accurate algorithm. Personally I don't find pure red on white very readable, but I have noticed some oddities such as pure black on orange (#ff6a00) passing the check while pure white on orange fails, despite being much more readable to my eye.
fluffybucket 6y ago
Could it be because it is accounting for people who are colorblind?
- droptablemain 6y ago
  Yes
- GordonS 6y ago
  I'm colour blind, and red on white is totally fine for me as long as the red is dark enough. Actually, any colour on white is OK if it's dark enough.
  - mfontani 6y ago
    Thank you for that. Could you confirm whether "pure red on white" is okay for you, or whether it's too light? i.e. #ff0000 on #ffffff
    - GordonS 6y ago
      Just checked and I'd prefer it just a touch darker (#dd0000), but as long as the font weight isn't too light, I think it's OK. There are different forms of colour blindness - I have the red-green type (though can't correctly identify many colours), but I don't think it should make any difference for this.
rikroots 6y ago
> A pet peeve of mine is that "red on white" is considered bad while being, in fact, perfectly legible: When I get my eyes tested at the opticians, one of the tests is usually looking at a red ring and a green ring against a white background and telling the optician which ring seems clearer. I think it's something to do with long/short sightedness? I'm shortsighted so the red ring is always clearer to me without glasses, and trying to read green writing on a whiteboard can be more difficult.
undecidabot 6y ago
Relevant GitHub issue: https://github.com/w3c/wcag/issues/695 https://github.com/w3c/wcag/issues/695 Also, a related HN discussion: https://news.ycombinator.com/item?id=21357638 https://news.ycombinator.com/item?id=21357638
bluntfang 6y ago
These tools are to help people who need accommodations. If you don't need accommodations, some of these accessibility rules may not make sense to you.
jaywalk 6y ago
Just today I got flagged for a contrast of 4.49. Turned out that someone had mistakenly changed the page background from #f7f7f7 to $f4f4f4, which was enough to put the foreground color over the edge.
austincheney 6y ago
Sometimes color contrast makes more sense when you can see all colors in a scheme compared at once as color tiles with the contrast spelled out numerically. https://github.com/prettydiff/colorContrast https://github.com/prettydiff/colorContrast As somebody has already pointed color contrast is defined by a relative luminosity calculation defined by W3C.

jimcsharp 6y ago

Red on white is almost indistinguishable to me from black on white. If you're trying to use red to indicate a state, it fails on me and I'm sure many others.

extra88 6y ago
The parent's complaint is while the red may look black to you, you have no trouble differentiating it from the white background. The problem of red text on a white background would be if someone couldn't see red and had another impairment categorized as "low vision"; for them, red-on-white text the size found on HN would not be readable. If the red-on-white text was larger and bold (>18px, weight 700), its 3.99:1 ratio would be sufficient for WCAG's 3:1 large text threshold.

whylo 6y ago

The algorithm used is defined in WCAG: https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#tests https://www.w3.org/WAI/WCAG21/Techniques/general/G18.html#te.... It does attempt to calculate the luminance but you might be referring to a more accurate algorithm. Personally I don't find pure red on white very readable, but I have noticed some oddities such as pure black on orange (#ff6a00) passing the check while pure white on orange fails, despite being much more readable to my eye.

fluffybucket 6y ago

Could it be because it is accounting for people who are colorblind?

droptablemain 6y ago
Yes
GordonS 6y ago
I'm colour blind, and red on white is totally fine for me as long as the red is dark enough. Actually, any colour on white is OK if it's dark enough.
- mfontani 6y ago
  Thank you for that. Could you confirm whether "pure red on white" is okay for you, or whether it's too light? i.e. #ff0000 on #ffffff
  - GordonS 6y ago
    Just checked and I'd prefer it just a touch darker (#dd0000), but as long as the font weight isn't too light, I think it's OK. There are different forms of colour blindness - I have the red-green type (though can't correctly identify many colours), but I don't think it should make any difference for this.

rikroots 6y ago

> A pet peeve of mine is that "red on white" is considered bad while being, in fact, perfectly legible: When I get my eyes tested at the opticians, one of the tests is usually looking at a red ring and a green ring against a white background and telling the optician which ring seems clearer. I think it's something to do with long/short sightedness? I'm shortsighted so the red ring is always clearer to me without glasses, and trying to read green writing on a whiteboard can be more difficult.

undecidabot 6y ago

Relevant GitHub issue: https://github.com/w3c/wcag/issues/695 https://github.com/w3c/wcag/issues/695 Also, a related HN discussion: https://news.ycombinator.com/item?id=21357638 https://news.ycombinator.com/item?id=21357638

bluntfang 6y ago

These tools are to help people who need accommodations. If you don't need accommodations, some of these accessibility rules may not make sense to you.

jaywalk 6y ago

Just today I got flagged for a contrast of 4.49. Turned out that someone had mistakenly changed the page background from #f7f7f7 to $f4f4f4, which was enough to put the foreground color over the edge.

austincheney 6y ago

Sometimes color contrast makes more sense when you can see all colors in a scheme compared at once as color tiles with the contrast spelled out numerically. https://github.com/prettydiff/colorContrast https://github.com/prettydiff/colorContrast As somebody has already pointed color contrast is defined by a relative luminosity calculation defined by W3C.