Color Contrast

Overview

You need to ensure that your foreground and background colors have enough contrast so that users with visual disabilities can read your content. This is true for the main text of your document, menus and navigation, and any hover/focus effects you apply to elements.

Ensuring you have enough color contrast for all users is a complex subject when you try to consider all of the different types of visual disabilities. The W3C has defined a formula to determine if two colors have enough contrast to ensure that most people with visual disabilities will be able to access the content.

You will want to achieve at least AA conformance on your pages. AAA performance is ideal, but it can be difficult to use a robust color palette and achieve AAA conformance.

There are several tools available to help you determine the color contrast.

• Color Contrast Analyzer for Chrome, is useful for analyzing on a pixel-by-pixel basis the contrast between any two colors on a Web page
• Contrast Analyser for Windows and Mac, useful for selecting colors with an eyedropper for analysis.
• WebAIM Contrast Checker