How to use the contrast checker
- Set your text color using the color swatch or by typing a hex code directly.
- Set your background color the same way.
- Read the ratio and the four pass or fail badges for AA and AAA, at normal and large text sizes.
- Check the live preview to judge readability with your own eyes, not just the number.
- Use the presets or the swap button to compare alternatives quickly.
What the ratings mean
- AA normal text (4.5:1): the minimum most sites and apps should meet for body copy, to comply with WCAG 2.1 at level AA.
- AAA normal text (7:1): a stricter target, recommended for content aimed at users with low vision.
- AA large text (3:1): the lower bar allowed for text at 18pt (24px) and larger, or 14pt (18.5px) bold and larger, since bigger letterforms stay legible at lower contrast.
- AAA large text (4.5:1): the stricter target for that same large text.
Who this is for
- Web and product designersConfirm a palette meets accessibility standards before it ships, not after a review flags it.
- Frontend developersSpot-check a color token or a one-off inline style without opening a full audit tool.
- Accessibility and QA reviewersGet an exact ratio to cite in a ticket or a compliance report.
- Marketers and slide designersCheck that brand colors stay readable in decks, ads, and presentations.
- Students learning web accessibilitySee the WCAG math applied to real colors instead of memorizing the thresholds.
- Anyone picking a color schemeSettle a "can you actually read that" argument with a number.
Frequently asked questions
What do the AA and AAA ratings actually mean?
They're conformance levels from the Web Content Accessibility Guidelines (WCAG). AA is the level most laws and accessibility policies require; AAA is a higher, optional bar aimed at serving low vision users even better. Meeting AA is generally treated as the practical minimum for public-facing content.
What counts as large text for the lower threshold?
WCAG defines large text as 18 point (about 24px) regular weight or larger, or 14 point (about 18.5px) bold or larger. Anything smaller than that is judged against the stricter normal text thresholds, even if it looks reasonably big on screen.
My colors pass for large text but fail for normal text. What should I do?
Use that pair only for headings or other large, bold text, and pick a higher-contrast pair for body copy and small labels. It's common for a brand color to work as a heading color but not hold up at paragraph size.
Does this check apply to icons, buttons, and borders too?
WCAG has a separate, lower threshold (3:1) for non-text elements like icon outlines, form field borders, and focus indicators against their background. This tool is built for text contrast specifically; treat its ratio as a text answer, not a general UI answer.
Is a higher contrast ratio always better?
Not necessarily for comfort. Extremely high contrast, like pure black on pure white, can feel harsh for long reading sessions, which is why many accessible designs land in the 7 to 15:1 range rather than pushing to the 21:1 maximum.
Can I test colors with transparency or opacity?
This tool works with solid hex colors. If your real design uses a semi-transparent color over a background, flatten it to its effective solid color first (blend the two), since transparency changes the actual rendered contrast.
Does WCAG apply differently to dark mode designs?
The same thresholds apply regardless of theme. A dark mode palette needs its own text and background pairs checked independently, since a combination that passes in light mode won't automatically pass once the colors are inverted.