Make the words easy to see
Contrast is the light–dark difference between text and its background. Two colors can look different yet still be hard to read together. Stronger contrast helps people with low vision and makes faint text easier to distinguish.
Paste your text and background colors above. Use Color values and readability to see each color format and the individual checks.
What should I aim for?
| Where the text appears | Standard target (AA) | Stricter target (AAA) |
|---|---|---|
| Body text, labels, and small captions | 4.5:1 | 7:1 |
| Large text: 24px regular or about 18.7px bold | 3:1 | 4.5:1 |
When in doubt, use the normal-text target. A thin font can still look faint at a passing ratio. Darken the text or lighten the background, then check again. These targets come from W3C’s contrast guidance.
Try a quick squint check
Look at your finished design and squint slightly. Do the important words and headings still stand apart, or does everything blend together? This is a rough check of visual emphasis. It cannot determine a pass or fail or simulate someone else’s vision. Confirm the ratio here, then review the actual font, size, and layout.
Check the background behind the words
For text over a photo or gradient, check the weakest-contrast area behind the text, not just the endpoints. A solid backing can make the result more dependable. This tool measures two opaque, solid colors; it does not certify a whole design. The Gradient maker carries your colors over for experimenting.
How the number is calculated
The tool converts sRGB colors to relative luminance, then divides the lighter value plus 0.05 by the darker value plus 0.05. Black on white is 21:1; identical colors are 1:1. Pass/fail uses the full ratio before rounding. RGB and HSL display values are rounded.