How To Check Color Contrast
📖 Bu rehber ToolPazar ekibi tarafından hazırlanmıştır. Tüm araçlarımız ücretsiz ve reklamsızdır.
The WCAG thresholds
Color contrast is the single most-violated accessibility rule on the web, and it’s also one of the easiest to fix. WCAG defines numeric ratios between foreground and background luminance; fail them and people with low vision, poor displays, or sunlit screens cannot read your text. The good news is the math is fully automatable and the thresholds are well-defined. This guide explains what the ratios mean, the difference between AA and AAA, where large-text leniency applies, how luminance is actually calculated, and the subtler cases — link colors, disabled states, dark mode — that trip up teams who check the hero text once and call it a day.
AA vs AAA
Contrast is expressed as a ratio between 1:1 (no contrast) and 21:1 (pure white on pure black). The thresholds you need to memorize:
How luminance is calculated
Contrast ratio comes from relative luminance, not raw RGB. Each channel is normalized to 0–1, gamma-decoded, then weighted by how sensitive the human eye is to that color:
Large-text leniency
Green dominates. A pure green (#00ff00) has luminance 0.7152; pure red is 0.2126; pure blue is 0.0722. That’s why dark blue on black looks horrible (both have tiny luminance) while dark red on black reads at least a little.
Link colors inside paragraphs
Bigger text is easier to read, so WCAG lets you drop to 3:1 for large text. This is what lets you use medium-gray headlines that would fail on body copy. The cutoffs:
Disabled states
A common mistake: using the leniency for 18px bold subheads. 18px bold is not 14pt bold — it’s ~13.5pt. Measure in pt, not px, to stay honest.
Placeholder text
If you’re stripping underlines for aesthetics, you need the 3:1-to-text test, plus another signal (bold, hover underline) to cover non-color signaling.
Dark mode
WCAG explicitly exempts disabled controls from the contrast requirements — but that doesn’t mean “invisible is fine.” Users still need to see there’s a button, they just need to understand it’s not interactive. A common pattern: keep the text contrast at ~3:1 against the button, and lighten the background fill. Reduced opacity works visually; just don’t drop below ~2:1 or the control becomes impossible to locate.
Images with text overlays
Most browsers ship with placeholder text at ~40% opacity, which almost always fails AA. Override it:
Brand colors that fail
And remember placeholders should never replace labels. Even at passing contrast they disappear the moment the user starts typing.
Automated vs manual checks
Pure white text on pure black is 21:1 — technically perfect but actually painful on OLED screens. Soften both ends:
Common mistakes
Check your dark-mode palette separately. Teams often nail light mode and then invert colors without re-checking contrast for every component. Border colors, disabled states, and brand colors usually need bespoke dark-mode values.
Run the numbers
Hero images with headlines are where contrast fails most dramatically because the background is not a flat color. Options: