Color Contrast

Ensure appropriate contrast between colors on the website so users with low vision, low contrast vision, or color vision deficiency can interact with content.

All elements on the page — text, graphics, form labels, links, buttons, etc. — need to pass color contrast standards.

Contrast standards for text

Normal text (below 14pt bold or 18pt normal):

• AA: 4.5:1 (minimum contrast)
• AAA: 7:1 (goal contrast; more inclusive)

Large text (14pt bold or 18pt normal and above):

• AA: 3:1 (minimum contrast)
• AAA: 4.5:1 (goal contrast; more inclusive)

Helpful tool for checking color contrast between foreground and background

To verify color contrast between foreground and background (i.e., buttons and text on colored background), use the WebAIM Contrast Checker.

Don’t rely on color to convey meaning. 

Since many users cannot discern color differences, ensure color is not the only way to navigate your site. For example, include an error message in addition to color so that everyone understands the meaning.

A note about using text over images

Placing text over images presents not only readability issues, but accessibility issues. Most images, because they have irregular backgrounds, become inaccessible when text is overlaid. If it is absolutely necessary to include text over an image, possible solutions include adding an opacity layer, either light or dark depending on the text color. You can use this tool to help determine if your text is readable, but the best solution may to avoid text over images if your goal is to have an accessible site.

The second consideration with text over images is to never include text within the image itself as a solution. Text, when embedded in the image, is inaccessible and will not be read by screen readers. This should be avoided.