Fixing One of the Biggest Accessibility Issues: Color Contrast

Part of making content accessible includes ensuring that the contrast ratio is set to be fully accessible to anyone. Inaccessible color contrast is the top issue for digital content, but fixing it, or having it right from the start, is easy. In this article you'll learn why this is important, what the standard is for color contrast, and how to make content with accessible color contrast.

Why this is important

• 6% of population is color blind 
• 2.3% of population has low vision (BCVA of less than 20/70, visual field loss, or legal blindness)
• Everyone using a device in bright sunlight struggles with poor color contrast

The Web Content Accessibility Guideline Standard for color contrast:

• 4.5:1 or higher for most text 
• 3:1 or higher for large text (18 font) or large bold text (14 point, bold)

This is what it looks like when you visit WebAim’s Color Contrast Checker

How to find out if you're meeting the standard

• Use ColorZilla to find the color codes of text and background
• Paste the color codes into WebAim’s Color Contrast Checker

What if you don't meet the standard?

• Use the lightness slider to adjust the color so it has a contrast ratio that passes.
• When you have a passing ratio, replace your colors with the new colors.

Back In the classroom

When educators use color contrast that meets accessibility standards, they help to make content that all students and their families can access. They should also teach their students to create accessible content as well.