Design · 4 min read
Color Contrast and WCAG: Readable Text for Everyone
Color contrast is one of the most important and most overlooked parts of accessible design. If text does not stand out enough from its background, many people simply cannot read it.
This guide explains the WCAG contrast rules and how to meet them.
Try it yourself with the related tool.
Check color contrast →Advertisement
What contrast ratio means
Contrast ratio is an objective measure of the difference in brightness between two colors, ranging from 1:1 (identical) to 21:1 (black on white). It is calculated from the colors' relative luminance, not just how different they look to you on your monitor.
The AA and AAA thresholds
WCAG AA requires at least 4.5:1 for normal text and 3:1 for large text (roughly 24px, or 18.66px bold). AAA is the enhanced level at 7:1. Meaningful UI elements and icons should also reach at least 3:1.
Why the number, not a guess
What looks acceptable on your screen may fail for someone on a different display, in sunlight, or with low vision or color blindness. The measured ratio is objective, which is why designing to the WCAG numbers — often a legal requirement — is the reliable approach.
How to fix failing contrast
If a pair fails, adjust the lightness of the text or background in HSL until it passes. Small changes often move the ratio over the threshold without a noticeable change to the design.