What does a contrast checker measure?
A contrast checker compares the relative luminance of a foreground color and a background color. The result is shown as a ratio from 1:1, where the colors are visually identical, up to 21:1, where black and white have maximum contrast.
This tool reports WCAG-style pass and fail indicators for normal text and large text. It is useful for early design decisions, component states, theme tokens, and quick checks before a more complete accessibility review.
How to read the results
| Check | Minimum ratio | Meaning |
|---|---|---|
| AA normal text | 4.5:1 | Common target for regular body text. |
| AA large text | 3:1 | Applies to larger or heavier text where letter shapes are easier to read. |
| AAA normal text | 7:1 | Stricter target for regular text in high-accessibility contexts. |
| AAA large text | 4.5:1 | Stricter target for large text. |
What this tool does not prove
A ratio is a strong signal, but it is not a complete accessibility audit. Real readability also depends on typography, font weight, hover/focus states, disabled states, surrounding colors, screen quality, and whether text appears over images or gradients.
- Transparency and gradients need separate review.
- Small icons and thin strokes may need stronger contrast than nearby text.
- Brand colors can pass in one pairing and fail in another.
- QR scan contrast and text readability contrast are related but not the same check.
Ways to improve weak contrast
Darken the foreground
For light backgrounds, move the text color closer to a darker neutral or stronger brand shade.
Lighten the background
Small background shifts can make a brand color pass without changing the foreground token.
Increase text size or weight
Large or heavier text has a lower AA threshold, but it still needs enough visual separation.
Check every state
Hover, focus, disabled, selected, and error states often use different color pairs.
Frequently Asked Questions
Is this a full WCAG compliance audit?
No. It calculates WCAG-style contrast thresholds for color pairs. A full review also checks layout, keyboard behavior, semantics, focus states, text alternatives, and real rendered typography.
What counts as large text?
WCAG guidance treats large text as roughly 18 pt regular text or 14 pt bold text and above. In web work, verify the actual rendered size and weight, not only the design label.
Can I use this for transparent colors?
This compact checker uses opaque sRGB colors. If your UI uses transparency, blend the final rendered foreground and background first, then check that resulting pair.
Does passing AA mean the design is always readable?
Not always. Very thin fonts, small UI labels, busy backgrounds, and low-quality displays can still make text difficult to read. Treat the ratio as one important signal.
Is this the same as QR code contrast?
No. QR code contrast affects scanner reliability, while this tool focuses on text readability thresholds. The math is related, but the practical decision is different.