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)
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.
cross posted at The Innovative Educator
Lisa Nielsen (@InnovativeEdu) has worked as a public-school educator and administrator since 1997. She is a prolific writer best known for her award-winning blog, The Innovative Educator. Nielsen is the author of several booksand her writing has been featured in media outlets such as The New York Times,The Wall Street Journal, Tech&Learning, and T.H.E. Journal.
