Accessibility: Color Contrast

Why is this important?
  • Improves readability for users with low vision or color blindness.
  • Ensures compliance with Web Content Accessibility Guidelines.
  • Enhances clarity in both digital and printed formats.
When to use it

Use color contrast checks when designing documents, presentations, websites or graphics that include text over backgrounds or visual elements.

How to use it

Use tools like the or built-in accessibility checkers in Microsoft Office and Adobe. Ensure text has a contrast ratio of at least 4.5:1 against its background.

Examples

It might look passable, but the selected shade may not meet the acceptable ratio of relative luminance and should be darkened. Instead of using yellow text on a white background, use navy blue text on a white background to meet contrast requirements and improve readability.

Good Color Contrast

Good color contrast makes content highly legible and reduces the effort required to read. A general rule of thumb is to always use light text against a dark background or dark text against a light background.

Examples of Good Color Contrast

Examples showing what good color contrast looks like.

Bad Color Contrast

Bad color contrast causes eyestrain and makes content difficult or impossible to read for many people, especially those with vision impairment or colorblindness. If you have to squint or lean in to read it, it is not accessible. Colors that are too similar in hue or brightness are more difficult to read.

Examples of Bad Color Contrast

Examples showing what bad color contrast looks like.

Color as Information

Color cannot be used as the only way to communicate meaning or an important change, because not everyone can see color differences. To use color correctly, make sure that important changes or differences in design are communicated with another visual element.

Example

If you are using color to indicate the differences between items, such as event status, provide an alternate way to indicate those differences.

You are listing events with their status indicated only by color:

Example demonstrating color only being used to show meaning.

If 鈥淥rientation鈥 is green (confirmed), 鈥淲orkshop鈥 is yellow (tentative), and 鈥淭raining鈥 is red (canceled), that meaning is lost without color perception. Instead, list them as:

Example demonstrating color and text being used to show meaning.
Tip for Checking Accessibility

Use the Accessibility Checker in Word or PowerPoint (Review > Check Accessibility) to flag low contrast issues. Use the for Adobe PDF.