Chapter 7 Accessibility

Suitable Contrast

WCAG states in guideline 1.4.3 Contrast (Minimum) – Level AA that the visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

•\ Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

•\ Incidental: Text or images of text that are part of an inactive user interface component, that are pure

decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

•\ Logotypes: Text that is part of a logo or brand name has no contrast requirement.

This all boils down to calculating the difference between the lighter and darker colors in your application when displaying text. If that contrast ratio is 4.5:1 or higher, it’s suitable. Let’s look at how this is calculated:

(L1 + 0.05) / (L2 + 0.05)

where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is defined as the relative brightness of any point in a colorspace, normalized to 0 for darkest black and 1 for lightest white. Relative luminance can be further be calculated as

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

208

Chapter 7 Accessibility

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.

These formulas are taken from www.w3.org/TR/WCAG21/#dfn- relative-luminance. Let’s turn this into some C# to make it a little easier to follow and something that you can use to test your color choices.

private static double GetContrastRatio(Color lighterColor, Color darkerColor)

{

var l1 = GetRelativeLuminance(lighterColor); var l2 = GetRelativeLuminance(darkerColor);

return (l1 + 0.05) / (l2 + 0.05);

}

private static double GetRelativeLuminance(Color color)

{

var r = GetRelativeComponent(color.Red); var g = GetRelativeComponent(color.Green); var b = GetRelativeComponent(color.Blue);

return

0.2126 * r +

0.7152 * g +

0.0722 * b;

}

209