Color and Contrast in Web Content

• What: Contrast is the brightness difference between text and its background. Color refers to the hues we use to convey meaning.
• Why: Millions of users have low vision or color blindness. Additionally, high contrast is essential for everyone when viewing screens in bright sunlight, using “Night Shift” filters, or viewing content on lower-quality mobile screens.

Accessible Writing Tip: Reduce Visual Cues

Accessible Writing Tip: Reduce Visual Cues

In the following video, learn more about why reducing visual cues in your content is helpful for your content, whether on a webpage or in a digital document.

Contrast: Meeting the Math

For text to be readable, it must stand out sharply against its background. We measure this with a “Contrast Ratio.”

The Standards

• Standard Text: Requires a 4.5:1 ratio.
• Large Text (18pt+ or 14pt bold): Requires a 3:1 ratio.
• Icons & Infographics: Meaningful graphics must also hit 3:1.

Color Contrast Analyzers

One of the best ways to ensure your contrast ratios are accessible is with a color contrast analyzer. These tools quickly provide feedback on the ratio of a particular foreground and background color combination.

Many automated accessibility checkers will evaluate the color contrast ratio in your text and interactive elements. For tips on getting started review Evaluating Third Party Web Content.

These tools can’t provide feedback on the contrast ratio in your images. For this, we recommend using a stand alone contrast analyzer like the one available from TPGi.

View in Grayscale

A quick way to check your contrast ratios and color dependency is to view your webpages in grayscale. If you cannot easily distinguish between different sections of content in this view, your content is likely not accessible.

• The “Print Test”: If you were to print this page on a black-and-white printer, would the information still make sense?
• Windows: Press Windows Key + Ctrl + C to toggle grayscale (if enabled in Accessibility settings).
• Mac: Go to System Settings > Accessibility > Display > Color Filters and select Grayscale.

Resolving Color and Contrast Issues

When you find a contrast error on your webpage, the fix depends on who has “editorial control” over that part of the site.

• Theme: If the color or contrast error occurs in your websites theme or styles, then you may be able to adjust these with site settings, or you may need to contact a developer.
• Content: If the color or contrast error occurs in content you added to the page, you likely can adjust this with your content editor.

If you are unsure, check your platforms help documentation for details or reach out for assistance.