Design / Contrast Pair
Find a readable color combination
Check text and background colors against WCAG 2.2 contrast thresholds. Preview the pair, find stronger alternatives, and download CSS.
Choose your colors
Find a stronger pair
Suggestions move the text color toward black or white and keep the background fixed. They are useful starting points, not perceptually optimized matches.
Read the result
A little more clarity.
This is a preview of everyday body text. Check the small print as well as the headline.
ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz · 0123456789
| Text contrast check | Result |
|---|---|
| AA normal text · 4.5:1 | |
| AA large text · 3:1 | |
| AAA normal text · 7:1 | |
| AAA large text · 4.5:1 |
Solid sRGB colors. No color values are sent to us.
Make the words stand out
Check a pair before using it.
Choose a text color and its background to calculate their WCAG 2.2 contrast ratio. The preview helps you see the pair in use; the checks use the computed ratio without rounding it up.
This checks one part of text readability. Typography, layout, focus states, and other accessibility requirements still need their own checks. A passing pair does not certify an entire page.
What counts as large text?
WCAG's large-text threshold is at least 18 points (24 CSS pixels), or 14 points when bold (about 18.67 CSS pixels). Normal text needs at least 4.5:1 for AA; large text needs 3:1. W3C's minimum-contrast guidance.
What is the AAA target?
For enhanced text contrast, the target is 7:1 for normal text and 4.5:1 for large text. W3C's enhanced-contrast guidance.
Why can a rounded ratio appear to pass but fail?
The display rounds to two decimals, while decisions use the full calculation. A computed ratio slightly below 4.5 remains a failure even if the display rounds to 4.50. Try a suggested color to move across the threshold.
Can it check gradients or transparent colors?
This tool accepts opaque, 3- or 6-digit sRGB hex colors. It does not sample images, gradients, transparency, or blending. Check the actual rendered foreground/background combinations when those effects are involved. W3C's luminance definition.