[juped]

"and yet"? It's "and therefore".

† The only problem is that the atrocious #fafafa on #050505 is made a whole lot worse because there aren't a bunch of even worse things distracting you from it.

[chipotle_coyote]

Okay, I'll bite. Why is #050505 on #FAFAFA (not the reverse, as you stated) "atrocious"? Are we playing the "anything less than #000000 on #FFFFFF is grey text on a grey background and entirely unreadable" card?

[extra88]

I don't understand their complaint either. Some people have a hard time with absolute black on absolute white (and/or vice versa) so easing up a little can be helpful. It's a small difference, 19:52:1 vs. 21:1 contrast ratio. I've seen advice to avoid exceeding 18:1 in large areas, maybe #111 on #f9f9f9.

[chipotle_coyote]

We tend to focus only on the accessibility issues caused by low contrast, but very high contrast also makes reading more difficult, especially for people with dyslexia -- and it's also more likely to cause eye strain if it's a full-length article.

At any rate, "it's okay for text not to be pure black and backgrounds not to be pure white" has become my tiny hill to die on.

[extra88]

Maybe browsers should go back to using a gray background by default, but less gray than one Mosaic and the other used.

[dotancohen]

How do you calculate the contrast ratio?

[chipotle_coyote]

I use the WebAIM contrast checker:

https://webaim.org/resources/contrastchecker/

It's basically a measure of perceived brightness. The actual formula involves calculating the relative luminance of the background and foreground colors, where luminance is a value from 0 (darkest) to 1 (lightest), and using the formula

(lighter_luminance + 0.05) / (darker_luminance + 0.05)

So the highest possible contrast ratio in this system is 21:1.

[dotancohen]

I see, thank you.

[extra88]

The WebAIM contrast checker web page is one of many. It's nice because the colors have lightness sliders so one can quickly try alternatives then copy the hex values into your CSS.

I like checking with Lea Verou's https://contrast-ratio.com because it can check colors written in many different formats, not just hex. Also, it can do +/- contrast ranges when colors include the alpha channel.

In the Chrome and Firefox DevTools, you often can simply click the color swatch for the `color` property. The pop-up includes the contrast number vs. the background-color for that text and whether or not it meets a Web Content Accessibility Guidelines (WCAG) contrast criteria (Level AA if it's 4.5 or above for regular-sized text, Level AAA if its 7 or above for regular-sized text).