This measures how easy text is to read against its background, using the same ratio the Web Content Accessibility Guidelines define. Low contrast is one of the most common accessibility problems on the web, and it's often invisible to the person who designed it because they already know what the text says.
How to use it
- Enter the text color as a hex code.
- Enter the background color as a hex code.
- Read the contrast ratio shown in large text.
- Check the badge to see if it passes WCAG AA or AAA.
- Look at the live preview text to see how the pairing actually looks.
When it helps
- Checking body text on a website meets accessibility standards before launch.
- Making sure a button's text is readable against its background in both light and dark themes.
- Reviewing a client's brand colors for accessibility before building a design system around them.
- Testing colors for a chart or an infographic, where readability really counts.
- Auditing an existing site's color choices as part of a broader review.
Good to know
- WCAG AA needs at least 4.5 to 1 for normal text, or 3 to 1 for large text 18 point and above.
- AAA is the stricter standard, needing 7 to 1 for normal text, worth aiming for on anything important.
- Passing contrast doesn't mean color alone is a safe way to convey meaning. Some people see color differently, and contrast ratios don't fix that on their own.
- Test a pairing against both AA and AAA even if you only need to meet AA, since knowing how close you are to the stricter standard is useful for future refinement.
- If you manage a whole design system, check every text and background pairing once and keep a record, rather than re-checking the same combination in every new project.
Questions
What's the actual difference between AA and AAA?
AA is the widely used minimum standard. AAA is stricter and optional, and it's harder to meet, but it gives better readability for people with low vision.
Does this check work against a background image, not just a solid color?
No, it compares two solid colors. Contrast against an image varies by area, so it can't be reduced to a single ratio.
My colors pass for large text but fail for normal text. What does that mean?
The contrast is strong enough for headings and big text, 18 point or bold 14 point and up, but too weak for regular body text. You'd need to darken or lighten one of the colors for body copy specifically.
Does this apply to non text elements like icons?
WCAG's standard ratios are defined for text specifically. Non text elements like icons have their own, generally lower, minimum of 3 to 1 under a separate guideline.
What if my brand colors fail the check?
Consider using the brand color for accents or large elements rather than body text, or create a slightly adjusted, higher contrast version for text use while keeping the original for branding.
Does font weight or size change what contrast ratio I actually need?
Yes, WCAG treats large or bold text more leniently, since bigger text is inherently easier to read at lower contrast, which is why the large text threshold is lower than the normal text one.