Understanding Contrast

Color 1

Color 2

Contrast Ratio ###	WCAG Grade Fail: Less than 3.0 AA: 3.0 for text 18pt+ AA: 4.5 for smaller text AAA: 7.0 gold star

How do we calculate the contrast ratio?

First, We need to determine the
relative luminance for each color.

1. Convert the HEX color to RGB.

RGB 1	RGB 2

2. Divide each color by 255 to get a linear value between 0 and 1.

r: g: b:	r: g: b:

3. Apply Gamma Correction

If value < than .03928, divide by 12.92.

Otherwise, add .055 and divide total by 1.055 and take result to the power of 2.4

r: g: b:	r: g: b:

This translates what the computer "sees" into the human perception of brightness.

Computers record light directly. Twice the photons equals twice the brightness.

Our eyes percieve more levels of light in dim conditions, and less in bright conditions.

4. Calculate luminance

(r X .2126) + (g X .7152) + (b X 0.0722)

Luminance 1	Luminance 2

We multiply the values of each color by a number that signifies how bright that color appears to us. You'll notice green gets the highest number.¹

5. Determine contrast between colors.

(L1 + 0.05) / (L2 + 0.05)

Contrast Result

Credits:

NES.css
Lee Verou's Contrast Ratio Site(helped me understand the math)
The Princess Icon by Freepik from www.flaticon.com is licensed by CC 3.0 BY

Reference

1. Wavelength of Maximum Human Visual Sensitivity Susan Zhao 2007

'Understanding Contrast' supports the article 'Understanding Web Accessibility Color Contrast Guidelines and Ratios' at CSS-Tricks.com written by Stacie Arellano, 2020.
@dreamling

Parts of the article were initially posted as 'The Bright Stuff' at: staciearellano.com/the-bright-stuff/in 2019.