Color
Contrast Ratio
Contrast ratio is the brightness difference between text and its background expressed as a single ratio, the core measure of readability and accessibility.
Definition
Contrast expresses the difference in brightness between text and its background as a single ratio. The smallest possible gap — the same color against itself — is 1:1, while an extreme like pure black text on pure white reaches 21:1. The higher this ratio climbs, the more crisply the letters separate from the background and the easier they are to read; the lower it drops, the more the text melts into the background. This brightness gap isn't a vague impression your eyes form — it's the result of running both colors through a fixed formula and pulling out one number. That's what makes contrast so reassuring: it isn't a matter of taste but a measurable value, so you can check your color choices with a number instead of a hunch.
Why does it matter?
Contrast matters because it decides who can actually read your screen. Someone with sharp eyesight in a well-lit room can get away with almost any color pairing, but a low-vision user, a person squinting at a phone in bright sunlight, or someone on an aging monitor will lose the text entirely the moment contrast dips too low. Sufficient contrast isn't a special favor — it's the minimum condition for everyone to reach the page's information. A screen with solid contrast also feels sharper and more trustworthy, so protecting accessibility goes hand in hand with raising the polish of your design. Checking contrast is the surest investment you can make in a screen that more people can read.
Common mistakes
- Sacrificing contrast because pale gray text looks sleek and refined. Light gray (something like #CCC) on white may look elegant, but it falls far short of the standard, and for a large share of your users the text is nearly invisible.
- Checking only the contrast of big headings while forgetting body copy, helper text, and input placeholders. The small text people read at length actually needs higher contrast, and faint gray hints are an easy blind spot to miss.
- Assuming the background is always a single flat white. On top of an image or a button's hover color, contrast can collapse in an instant, so check every state where text and background overlap.
Practical tips
- Memorize the WCAG thresholds and treat them as your floor in real work. Body text needs at least 4.5:1 against its background, and large text needs at least 3:1. Drag the slider back and forth across the 4.5 boundary yourself to feel exactly where letters start to become readable — it sharpens your instinct fast.
- Keep a contrast checker beside you and confirm the value in real time as you pick colors. A pairing often looks like a pass to the eye but falls short by the numbers, so making measurement a habit is the safe move.
- When contrast is cutting it close, darken the text or lighten the background to leave some room. A value that barely clears the bar collapses easily on a different screen or under different lighting, so setting it a little more generously is safer.