Color Contrast

Issue/Question

Title II ADA Compliance: Color Contrast

Why is it Important?

• Improves readability for users with low vision or color blindness.
• Enhances clarity in both digital and printed formats.

Environment

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

Cause

Title II ADA Compliance

Resolution

How To Use It

Ensure text has a contrast ratio of at least 4.5:1 against its background.

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.

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 to read it, it is not accessible. Colors that are too similar in hue or brightness are more difficult to read.

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

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 white background, use navy blue text on a white background to meet contrast requirements and improve readability.

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

If "Orientation" is green (confirmed), "Workshop" is yellow (tentative), and "Training" is red (canceled), that meaning is lost without color perception.

Not Accessible: Listing events with their status indicated only by color

• Orientation
• Workshop
• Training

Accessible: Events listed with second indicator 

• Orientation (Confirmed)
• Workshop (Tentative)
• Training (Canceled)

Tips for Checking Accessibility

Use the Accessibility Checker is Word or PowerPoint (Review > Check Accessibility) to flag low contrast issues.

Use the WebAIM Contrast Checker for Adobe PDF.

Use the Coblis - Color Blindness Simulator to understand how different color blindness disabilities function.

For additional information visit the links below:

Making Color Usage Accessible

Color Contrast Accessibility