Importance of Color Contrast

Applies to the following areas:

Documents Online Courses Websites

Presentations Spreadsheets Emails

Overview

Use foreground and background colors that create significant contrast so that people with low vision, low-contrast vision, or color blindness can read your content correctly. Contrast can help organize your design and establish a hierarchy. A good use of color contrast adds visual interest.

 

WCAG Color Contrast Requirements

The WCAG requirement for the visual presentation of text is a contrast ratio of at least 4.5:1, with the following exceptions:

• Large Text: 3:1 ratio
• Decoration or Non-Essential Text: no contrast requirement
• Logos: no contrast requirement

 

Color Should Not Be Used to Convey Meaning

Color, used alone, should not convey meaning. Over 300 million people worldwide are colorblind. Color is an essential asset in design. However, not all users can perceive color. When placing meaning on text, use color and another method such as an underline, added text (e.g., use “Stop” and not 🛑 ), or font style (e.g., italics, bold).

 

Tips

• Do not use color alone to convey meaning.
• Low-contrast colors are difficult to read when text contrasts poorly with background colors.
• High-contrast colors are easier to read when paired together.

 

Examples of High-Contrast Color Schemes

High contrast is best for low vision. The following color schemes and combinations are commonly easier to view:

• White text on a black background
• Black text on a yellow background
• Yellow text on a black background
• Green text on a black background
• Yellow text on a blue background
• Blue text on a yellow background
• Grayscale display

 

Where to Go for Color Contrast Help

WebAIM provides a free color contrast checker tool. In this tool, you can enter the hex color codes of the foreground and background colors used on a page to confirm whether the contrast is sufficient to pass compliance.

To check your documents, you can use the WebAim Color Contrast Checker, or if you are using Word, run the Accessibility Checker. The Accessibility Checker will review your color contrast and alert you if changes are needed.

Steps to run the Accessibility Checker in MS Word

WebAIM Color Contrast Checker

How to Check for Accessible Colors YouTube Video Tutorial

 

WCAG 2.0 Success Criteria

The issues described on this page map to the following success criteria in the W3C’s Web Content Accessibility Guidelines (WCAG) 2.1:

• 1.4.1 Use of Color (Level A)
• 1.4.3 Contrast (Level AA)