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
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: