Colors & AccessibilityLesson 91Free preview
Contrast Checker
This lesson is part of Web Developer Tools · All levels
Summary
The contrast checker calculates the contrast ratio between text color and background color. This ratio is compared to WCAG guidelines, for example 4.5:1 for normal text and 3:1 for large text. This tool helps ensure that content remains readable, including by users with low vision.
Key points
- The contrast ratio ranges from 1:1 to 21:1
- WCAG AA requires 4.5:1 for normal text
- The big text on WCAG AA is pretty much a 3:1 ratio.
- WCAG AAA for normal text requires 7:1
- Don't just pass on information through color differences
Full lesson
Code examples and quizzes
Full lessons, code examples, and quizzes are available to subscribers. 5 questions.