Color Contrast Guidelines
From documents and webpages to graphs and closed-captions, color contrast is an important facet of creating any accessible content. These guidelines will help you create colorful content that is still accessible to all.
General Knowledge
- Avoid color combinations that can create accessibility issues for people with color blindness.
- Red and green; blue and yellow; purple and orange.
- The color contrast ratio of the text to background needs to be 4.5:1 to met Web Content Accessibility Guidelines.
- A ratio of 1:1 would be white on white while a ratio of 21:1 would be white on black.
Choosing Appropriate Colors
- The best contrasts exist between dark colors on light backgrounds. Using bright colors against a bright background however, creates a contrast problem.
- is does not mean colors are chosen based solely on contrast. Aesthetics are important too. While aesthetics can add flair and personality, avoid these choices:
- Using black as a background. A black background makes it easy to select contrasting text, but it also creates issues when switching from a black background to a lighter one in the same presentation.
- Using Yellow or Red for text color:
- Yellow text can contrast well with darker backgrounds, but it is no fun to read and cannot be paired with blue as is causes issues with color blindness.
- Bright red text is hard to contrast as red on white has a ratio of 3.99:1
Checking Contrast
- WebAIM, Web Accessibility in Mind, has a very robust contrast checker.
- ColorZilla has a downloadable eyedropper tool that allows you to select colors from anywhere in your browser and copy the value to your clipboard.
