checking color contrast

[pkra]

As per yesterday's discussion some notes.

Simplified overview from https://developer.mozilla.org/en-US/docs/Web/Accessibility/Understanding_WCAG/Perceivable/Color_contrast

Type of content	Minimum ratio (AA rating)	Enhanced ratio (AAA rating)
Body text	4.5 : 1	7 : 1
Large-scale text (120-150% larger than body text)	3 : 1	4.5 : 1
Active user interface components and graphical objects such as icons and graphs	3 : 1	Not defined

From https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio

contrast ratio

(L1 + 0.05) / (L2 + 0.05), where

L1 is the relative luminance of the lighter of the colors, and L2 is the relative luminance of the darker of the colors.

and from https://www.w3.org/TR/WCAG21/#dfn-relative-luminance

relative luminance

the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white For the sRGB colorspace, the relative luminance of a color is defined as L = 0.2126 R + 0.7152 G + 0.0722 * B where R, G and B > are defined as:

if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4 if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4 if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4

and RsRGB, GsRGB, and BsRGB are defined as:

RsRGB = R8bit/255 GsRGB = G8bit/255 BsRGB = B8bit/255

The "^" character is the exponentiation operator.

[pkra]

A somewhat more extensive introduction to the topic in general with examples: https://webaim.org/articles/contrast/

[pkra]

Here's a more advanced algorithm that's proposed for WCAG 3

https://github.com/Myndex/SAPC-APCA#implementations

It is supposed to eliminate some false results under WCAG 2. See also https://www.myndex.com/APCA/simple

[Myndex]

A brief overview of APCA and perceptually uniform contrast: Why APCA

[pkra]

Thanks for the additional resource, @Myndex!

[pkra]

Downstream is starting to do some of this which may well move upstream again later (though I'm less certain right now whether or not to ever move it all the way up here).

[Myndex]

Hi Peter @pkra

There is a public working draft of visual accessibility guidelines at readtech.org/ARC/

The "meat" of the spec is: Visual Readability Contrast, and we are developing Design Guides as well

And finally, the open discussion forum here on GitHub.

[pkra]

@Myndex thanks, I'm aware of that.