Skip to Content

Digital Accessibility

Color Contrast

By using color contrast ratios that meet digital accessibility standards, you ensure that your text is much easier to read and understand for people who are colorblind. Using sufficient color contrast also makes digesting your content easier for everyone.

Using Sufficient Color Contrast

To meet the WCAG standard for color contrast, your text must have at least the following minimum contrast ratios. 

Regular Text: Requires a color contrast ratio of 4.5:1 or stronger for text against its background.

Larger Text: Because larger text (at least 18 point or 14 point bold) is easier to read, it requires a color contrast ratio of 3:1.


Example: Insufficient Color Contrast

  • hard-to-read garnet text underlined on a black background reading Ensuring Trust in Science: Challenges and Responses in Nutrition
     

The University's signature garnet set on a black background provides a contrast ratio of only 1.73:1, which makes even large text hard to read.


Example: Sufficient Color Contrast

  • White text on a garnet background that says Ensuring Trust in Science: Challenges and Responses in Nutrition.
     

White text on a garnet background preserves brand identity and has a high contrast ratio of 12.11:1, which passes the requirement and ease of reading with flying colors. 


Adding Text on Top of Images

It can be difficult to assess the contrast ratio of text on top of a busy image or background pattern. If possible, add a solid background behind the text. You can also darken/lighten the image that is behind the text so that it has a strong overall contrast.

OCR Video Series: Color Contrast

Video thumbnail for topic 14: Color Contrast.
Learn more about how and why to check for sufficient color contrast in this topic from the OCR video series.

 

Challenge the conventional. Create the exceptional. No Limits.

©