Not sure if correct ratio

[Waltari10]

Hey,

First of all I really enjoy your tool! Especially as a color blind person, it has helped me to pick colors that other people can see as well.

However sometimes majority disagrees with the results. For example: White on #28A3CE gives a ratio of 2.9. rgba(0,0,0,87) on #28A3CE gives a ratio of 6.38.

Everyone that I've asked has agreed that white is more visible than the black, and it's weird that it says white is over twice better. I know WCAG is a common guideline. Do the guideline define the algorithm, or is it something that can be tweaked and/or improved? Are our monitors just configured weirdly?

I'd love to hear your thoughts on this, and thanks again for the great tool!

PS. I tested on a few other monitors and the contrast is definitely different. The blue appears lighter on mobile screen making the black slightly less contrasted and the white more contrasted.

[LeaVerou]

Congratulations, you, like many before you, just discovered that the WCAG algorithm is flawed. Indeed, this has been a topic of discussion over the years, for example https://github.com/w3c/wcag/issues/695 which proposes some alternative methods. And yes, WCAG defines the algorithm, albeit only for opaque colors, though your test case is opaque colors (even if the foreground is translucent, the result is two opaque colors). It's not a perfect algorithm, but until something better is standardized, it's what we have and most people are interested in that over a potentially better algorithm because WCAG is part of government regulations 🤷‍♀

PS. I tested on a few other monitors and the contrast is definitely different. The blue appears lighter on mobile screen making the black slightly less contrasted and the white more contrasted.

Given that all currently supported forms of CSS colors are sRGB, this is very surprising. Are you using Firefox? AFAIK it's the only browser that doesn't follow this and just throws raw RGB coordinates on the screen.

[Myndex]

PS. I tested on a few other monitors and the contrast is definitely different. The blue appears lighter on mobile screen making the black slightly less contrasted and the white more contrasted.

Given that all currently supported forms of CSS colors are sRGB, this is very surprising. Are you using Firefox? AFAIK it's the only browser that doesn't follow this and just throws raw RGB coordinates on the screen.

Hi @LeaVerou and @Waltari10

Here is one issue that is challenging to overcome: gamma and environment. Monitor gamma is a substantial factor is contrast presentation, and users commonly adjust it differently than "spec", in part to accommodate their environmental lighting. So even though sRGB is the "standard" don't assume that a given device is following that standard.

Mobile devices rarely use color management, and only some desktop browsers use color management (at least correctly). And even with color management, if the monitor is not calibrated, then "who knows". But there's more.

Here's the thing: contrast is a perception it is more a function of neurological processing in our visual cortex than actual light values. And things such as spatial frequency are a bigger factor on perceived contrast than a given pair of colors. Also, your vision system's light adaptation, surround effects, etc. all play a major part.

In other words, a pair of colors by themselves DO NOT determine a perceived contrast. Context is everything when it comes to perception.

For reference I'm the one that opened WCAG issue 695 and am currently researching the alternatives, which you can see in part at https://www.myndex.com/WEB/Perception

You might also find interesting my CVD simulators, one is based on the Brettle model and the other is based on perception of a standard sRGB monitor. https://www.myndex.com/CVD/sRGBCVD