What the ratio means
Contrast ratio compares the relative luminance of two colors. It runs from 1:1 (identical, invisible) to 21:1 (pure black on pure white). The higher the number, the easier text is to read — especially for people with low vision or on a phone in bright sunlight.
WCAG thresholds
| Level | Normal text | Large text |
|---|---|---|
| AA (minimum) | 4.5 : 1 | 3 : 1 |
| AAA (enhanced) | 7 : 1 | 4.5 : 1 |
"Large text" means roughly 18pt and up, or 14pt and up if bold. AA is the common target for shipping UI; AAA is stricter and worth aiming for on body text where you can.
Why it matters in an app
Low-contrast labels look elegant in a mockup and become unreadable on a real device outdoors. Checking the ratio between your text and its surface — buttons, cards, disabled states — catches that before users do. If a color fails, nudge the text lighter/darker or deepen the background until it clears the bar you're targeting.
FAQ
Is anything sent to a server?
No. The ratio is computed locally in your browser with the standard WCAG luminance formula. No colors leave the page and there's no sign-up.
Does this account for opacity or gradients?
It compares two solid colors. If your text sits on a translucent layer or a gradient, test against the actual effective background color at the least favorable spot.
What about disabled or placeholder text?
WCAG exempts truly disabled controls, but users still try to read them. Aiming for at least AA large on placeholder and secondary text keeps your UI usable.