Hacker News Reader

Comment by guessmyname | Hacker News Reader

This article reminds me of Contraste [1], a free little app for macOS that allows you to quickly know if a combination of colors, for a text and a background, passes accessibility thresholds defined by the W3C, and thus is accessible to users with visual impairments. The app was made by Laurent Baumann, who is also the author of Couleurs, a free color picker, for macOS as well.

[1] https://contrasteapp.com/

[2] https://couleursapp.com/

View on HN

As a digital product designer, my go-to Mac status bar app for this is Contrast: https://usecontrast.com

My experience with the W3C guidelines is that they don't work well in the real world. I think their definition of contrast is not quite right.

What do you mean, do you think 4.5:1 is an insufficient contrast ratio? I think that's recognized and why level AAA requires 7:1.

No, I mean the method of calculating contrast ratio does not reflect reality. Take a background of #969696, a medium gray. According to the formulas laid out in WCAG 2.0 [1], white text has a contrast ratio of 2.96 and black text has a contrast ratio of 7.1. So clearly black is better, right? Try it for yourself and tell me if the difference is as stark as the numbers suggest.

Of course this means nothing if you're legally mandated or simply told by your boss that you must follow the standard.

[1] https://www.w3.org/TR/WCAG20/

The white and gray don’t look that bad to me but it’s not for me, it’s for people with various vision impairments. Ignore your lying eyes, trust the math.

Also, to me the superiority of using black is more apparent if the gray is the background color.

A better example is when you have a #FF0000 red background. WCAG says you should use #000000 black text on it, but #FFFFFF white text is actually more accessible to people with color deficient vision[1] and, to my eyes at least, reads more easily and has more contrast.

[1] https://accessibility.psu.edu/color/colorvisiondetails/#RK

Please don’t use a #FF0000 background under any circumstance.

It is an extremely colorful medium-lightness red which will be somewhere between unpleasant and physically uncomfortable to look at (not to mention illegible) irrespective of the foreground text color.

Yeah, #FF0000 was just an example. The problem also happens with other shades of red, like #F44336 from the old Material Design palette.

My suggested test used the gray for background, with black text or white text over it.

I can't trust the math, because I don't know how they derived it. Well the conversion from sRGB to linear RGB and from there to luminance is straightforward and standard, but the formula for contrast is a real mystery. Where'd those magic 0.05 constants come from? And does it really not make a difference if it's light on dark vs. dark on light?

The WCAG uses a pretty poor heuristic. But it’s better than a clueless person’s personal guess (which is what too many people rely on instead).

I most often use Lea Verou's Contrast Ratio site, in part because one can use colors in different formats (by name, hex, rgb(), hsla(), etc.)

https://contrast-ratio.com

Reply on news.ycombinator.com