undefined | Better HN

0 pointsextra884y ago0 comments

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.

0 comments

chipotle_coyote4y ago

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.

extra88OP4y ago

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

dotancohen4y ago

How do you calculate the contrast ratio?

chipotle_coyote4y ago

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.

dotancohen4y ago

I see, thank you.

extra88OP4y ago

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

j / k navigate · click thread line to collapse

0 comments

chipotle_coyote4y ago

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.

extra88OP4y ago

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

dotancohen4y ago

How do you calculate the contrast ratio?

chipotle_coyote4y ago

I use the WebAIM contrast checker:

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

(lighter_luminance + 0.05) / (darker_luminance + 0.05)

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

dotancohen4y ago

I see, thank you.

extra88OP4y ago

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.

j / k navigate · click thread line to collapse