WCAG Color Contrast Explained: How to Pick Text Colors People Can Actually Read
"That looks readable to me" isn't a standard — it's a guess. Here's the actual math behind WCAG contrast ratios, and how to stop guessing.
Key takeaways
- WCAG contrast ratio ranges from 1:1 (no contrast) to 21:1 (pure black on white).
- AA — the level most accessibility requirements are built around — needs 4.5:1 for normal text, 3:1 for large text.
- The ratio is based on relative luminance (perceived brightness), not how different two colors look to the eye.
- Two visually distinct colors can still fail contrast if they're similarly bright.
- Fixing a failing background is usually faster than hunting for a new text color — small lightness changes move the ratio more than hue changes.
"It looks fine to me" is exactly the problem
Every designer has picked a text color against a background, glanced at it, and moved on. It looks fine — on your monitor, in good light, to your eyes. That's the entire problem with eyeballing contrast: "looks fine" is a personal, lighting-dependent, vision-dependent judgment, and a meaningful share of readers don't share your eyes, your monitor, or your lighting.
The Web Content Accessibility Guidelines (WCAG) replace that guess with an actual number: the contrast ratio between two colors, calculated the same way every time, that either passes a defined threshold or doesn't.
How the ratio actually works
Contrast ratio is calculated from relative luminance — a measure of how bright a color appears, weighted to match how human eyes perceive different wavelengths (we're more sensitive to green than blue, for instance). The formula compares the luminance of the lighter color to the darker one, producing a ratio from 1:1 (identical, no contrast at all) up to 21:1 (pure black text on a pure white background, the maximum possible).
The important part: luminance is about brightness, not hue. Two colors can look completely different to the eye — a saturated orange and a saturated blue, say — while sitting at nearly the same brightness level, which means they can still fail contrast even though they're visually distinct.
“Contrast ratio measures brightness difference, not color difference — that's why two very different-looking colors can still fail.”
The thresholds that actually matter
WCAG defines different minimums depending on text size and compliance level:
- AA, normal text — 4.5:1 (the baseline most accessibility requirements reference)
- AA, large text (18pt+/24px+, or 14pt+/18.5px+ bold) — 3:1
- AAA, normal text — 7:1 (a stricter, optional standard)
- AAA, large text — 4.5:1
- UI components and graphical objects (icons, button borders) — 3:1, from WCAG 2.1's separate 1.4.11 requirement
Fixing a failing combination
When a pairing fails, the fastest fix is usually adjusting lightness, not hue. Darkening a light-gray background slightly, or lightening a mid-gray text color, moves the ratio faster than switching to a completely different color family — and it tends to preserve the visual feel of a design better too.
If you're not sure where to start, pure black (#000000) or pure white (#FFFFFF) text against your background is a useful sanity check — whichever one gives the higher ratio tells you which direction to lean.
Check a combination yourself
Open Tools Library's Color Contrast Checker calculates the exact ratio between any two colors and grades it against all five WCAG thresholds at once, with a live preview showing normal and large text in your actual colors — so you can see the real-world result, not just the number. Everything runs locally; no color you check is ever sent anywhere.
Mentioned in this post
Color Picker & Converter
Pick a color visually, sample one from your screen with the eyedropper, or click anywhere on an uploaded image — see it instantly as HEX, RGB, HSL, HSB, and CMYK, each with a one-click copy button.
Color Contrast Checker
Check the WCAG contrast ratio between any text and background color, see instant pass/fail results for AA and AAA at both normal and large text sizes, and preview exactly how the combination reads.
Color Palette Generator
Generate a color palette from any base color using 8 classic color-harmony schemes — monochromatic, analogous, complementary, triadic, and more — or upload a photo to automatically extract its dominant colors.
Frequently asked questions
What contrast ratio do I actually need?
For most accessibility requirements, WCAG AA: 4.5:1 for normal text, 3:1 for large text (18pt+/24px+, or bold 14pt+/18.5px+).
Why did my colors fail even though they look different?
Contrast ratio is based on brightness (relative luminance), not visual difference — two hues can look distinct while sitting at a similar brightness level.
Is AAA required by law?
Most accessibility requirements and legal standards reference AA. AAA is a stricter, optional standard some organizations choose to target.
Do button borders and icons need to pass contrast too?
Yes — WCAG 2.1 added a separate 3:1 requirement for UI components and graphical objects, not just text.