Hacker News Reader

Comment by mfontani | Hacker News Reader

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.

View on HN

The algorithm used is defined in WCAG: 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.

> 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.

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

Yes

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.

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

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.

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.

Relevant GitHub issue: https://github.com/w3c/wcag/issues/695

Also, a related HN discussion: https://news.ycombinator.com/item?id=21357638

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.

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.

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

As somebody has already pointed color contrast is defined by a relative luminosity calculation defined by W3C.

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.

Reply on news.ycombinator.com