# Understanding Contrast

Contrast Ratio

### ###

• 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.1

#### 5. Determine contrast between colors.

Contrast Result

##### Reference

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