Why is Contrast Important

In terms of accessibility, web content should be easy to read and digest. It may enhance your website to throw a bunch of colors to make it look cool. However, is it accessible for an audience that has vision disabilities?

Contrast Example:

Make sure you use colors that contrast one another.

Bad Contrast: The quick brown fox jumps over the lazy dog

Good Contrast: The quick brown fox jumps over the lazy dog

To ensure compliance with web content accessibility guidelines (WCAG), you can use WebAim's Color Contrast requirements for different sizes of text.

Foreground Color

Background Color

Regular Text:

- WCAG AA necessitates a ratio of 4.5:1 or higher

- WCAG AAA necessitates a ratio of 7:1 or higher

Larger Text:

- WCAG AA necessitates a ratio of 3:1 or higher

- WCAG AAA necessitates a ratio of 4.5:1 or higher

The quick brown fox jumps over the lazy dog

Determining Contrast Ratio

This website computes the contrast ratio using RGB values of chosen colors and the Relative Luminance Computation:

Relative Luminance Computation