Free Color Contrast Checker ✅
Make sure your colors are easy to read and accessible! Check the contrast ratio between your primary and secondary colors to meet WCAG standards.
Example Primary text
Contrast Ratio:
3.28Normal Text:
FailLarge Text:
AAUI Components:
AA
ColorMagic's contrast checker follows the web content accesibility guidelines (WCAG) as to ensure legibility:
What AA and AAA actually require
A contrast ratio compares the brightness of two colors. It runs from 1:1, where text is invisible against its background, to 21:1 for black on white. WCAG sets the thresholds by how large the text is, because bigger letters stay readable at lower contrast.
AA is the level most teams are expected to meet, and the one written into accessibility laws in a growing number of countries. AAA is a stricter target worth reaching for body text that people read for a long time.
| Used for | AA | AAA |
|---|---|---|
| Normal text (under 18.66px bold, or 24px regular) | 4.5:1 | 7:1 |
| Large text (18.66px bold or 24px and up) | 3:1 | 4.5:1 |
| Icons, borders, form fields and other UI parts | 3:1 | no separate level |
Ratios are symmetric: swapping the text and background colors gives the same number. Only the size of the text changes which threshold applies.
Pairs that pass, and pairs that miss
Every ratio below is measured by the same function the checker above uses. Look at how little the color has to change to move a pair from failing to passing.
- Example Primary text#1f2937 / #ffffff14.68:1AAA
- Example Primary text#ffffff / #5576ff3.87:1Large text only
- Example Primary text#6b7280 / #f3f4f64.39:1Large text only
- Example Primary text#ffffff / #b91c1c6.47:1AA
- Example Primary text#111827 / #fde68a14.24:1AAA
- Example Primary text#ffffff / #facc151.53:1Fail
The second pair is ColorMagic's own button color: white on it clears the bar for large text but not for body text — a common near-miss on brand colors chosen before contrast was checked.
How to fix a pair that fails
- Darken the text rather than lightening the background; it usually changes the design less and moves the ratio further.
- Grey text on a light grey background is the most common near-miss. Take a step or two down the grey scale and it passes.
- Yellow, lime and cyan are bright enough that white text can almost never sit on them. Use near-black text instead.
- Keep brand colors for large headings, buttons and accents, and use a darker version of the same hue for body text.
Common questions
What contrast ratio do I need?
4.5:1 for normal body text and 3:1 for large text or interface elements, to meet WCAG AA. For AAA it is 7:1 and 4.5:1. If you only remember one number, remember 4.5:1.
Does contrast apply to buttons and icons too?
Yes. Any part of the interface that has to be seen to be used — a button outline, a form field border, an icon that carries meaning — needs at least 3:1 against what is behind it. Decorative graphics and disabled controls are exempt.
Is a high ratio always better?
Not always. Pure black on pure white hits 21:1 and can feel harsh over long reads; some people with dyslexia or light sensitivity find it uncomfortable. A very dark grey on off-white still clears AAA and reads more comfortably.
What about text over a photo or gradient?
Measure against the lightest and the darkest point the text crosses, and make sure both pass. In practice that usually means adding a solid or semi-transparent layer behind the text.