19.3 Color Contrast

What is Color Contrast?

How one color stands out from another color. It's especially important to consider the color difference between text and the background.

Basically: how readable your text is against its background. 

Color Contrast Ratio Examples

 Color Contrast Ratios 

Color contrast ratio usually means the ratio between the color of text (or additional important visual information) and the color of the background, which must meet minimum ratio levels to ensure legibility for visually-impaired and/or color blind users.

Whenever using color in images, ensure that the colors have a contrast ratio of at least 4.5:1. This ensures that the text is still readable to those who may have color blindness.

The Color Contrast Ratio Examples infographic provides some examples of the ratio between the background and text color and whether it passes or fails web accessibility standards:

  • Ratio 2.01:1 (light green background with red text) - Fails web accessibility standards 
  • Ratio 3.94:1 (black background with gray text) - Fails web accessibility standards 
  • Ratio 4.03:1 (gray background with yellow text)  - Fails web accessibility standards 
  • Ratio 4.49:1 (light blue blackground with blue text) - Fails web accessibility standards
  • Ratio 4.57:1 (light yellow background with red text)  - Passes web accessibility standards 

 

 Can You Read Me Now?

Can you read me now?

Can you read me now?

Can you read me now?

Can you read me now?

Can you read me now? 

 

Color contrast greatly impacts readability. 

As content authors, we have the great power and responsibility to ensure our content is readable. 

Here is another example of a color comparison chart of text color versus the background color - you'll notice that even some of the "Good" choices are still a bit difficult to read. 

Text VS background color readabilty

 

 

 Which Can You Easily Read?

Option 1 or Option 2? 

 

  1.  


  2.   

Option #2 is readable because there is an opaque block behind the text to help users read "Welcome Marine Aquarium Science A120" against the varied colored wave background. 

References

Alscher, D. (n.d.). Color Contrast: For the Sake of Aesthetic and Accessibility. G2. https://www.g2.com/articles/color-contrast Links to an external site.

Girard, J. (2021, January 12). How to choose contrasting colors for more readable websites. ThoughtCo. https://www.thoughtco.com/contrasting-foreground-background-colors-4061363 Links to an external site.

WEBAIM Contrast Checker. WebAim. (n.d.). https://webaim.org/resources/contrastchecker Links to an external site.