You want enabling CSS selectors, not disabling ones

Re:You want enabling CSS selectors, not disabling ones by dotancohen on Wednesday September 01, 2021 @02:02AM (#28376827)

How do you calculate the contrast ratio?

[ Parent | on HN ]

Re:You want enabling CSS selectors, not disabling ones by chipotle_coyote on Wednesday September 01, 2021 @02:39AM (#28377010)

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.

[ Parent | on HN ]

Re:You want enabling CSS selectors, not disabling ones by dotancohen on Wednesday September 01, 2021 @06:27AM (#28378140)

I see, thank you.

[ Parent | on HN ]

Re:You want enabling CSS selectors, not disabling ones by extra88 on Wednesday September 01, 2021 @07:57AM (#28378693)

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

[ Parent | on HN ]