Create a Strong Contrast Between Text and Background Color

For help, contact: Karen Sorensen

Why this is Importantgood color contrast and bad color contrast examples

For everyone, but especially users with color deficiencies, there needs to be a strong visual contrast between the text and the background color in order for the text to be readable.

If information on a page is conveyed using color, users with color deficiencies and blind users will not understand it. This does not mean you cannot use color, but make sure to provide the information conveyed with color through another method so those who cannot see color will still perceive the information.

How to Achieve this Accessibility Guideline

Text color should have a contrast of 4.5:1 to its background color. If the text is greater than 18 pt, the contrast between the text and the background should be at least 3:1. (This requirement does not apply to logos or text in an image that is purely decorative.)

If you aren't sure whether you meet this standard, test your color contrast with one of these free tools:

Use of Color

Color should not be the only means to understand information.

Correct: Linked text on this page is blue and underlined. (A student who can't see color, will be able to see the underline.)

Incorrect: Click the yellow button to move on to the next topic.

Additional Resources