Color contrast checker
A contrast checker compares two colors and reports their WCAG ratio. Normal text needs 4.5:1 for AA, large text and interface graphics need 3:1, and AAA asks for 7:1 and 4.5:1. When a pair fails here, the tool also shows the nearest shade of the same hue that passes.
Two colors
- Requests
- · from Resource Timing
- Script
- · KB of a 100 KB budget
The threshold people forget
Most designers know 4.5:1 for body text. The one that gets missed is 3:1 for interface graphics, which covers anything you need to see in order to use the thing: input borders, focus rings, icons, toggle states, chart strokes, the line between two table rows if that line is carrying meaning.
It is easy to miss because none of those are text, so a page can have perfect body copy and a form full of boxes you cannot see. We found exactly that in this site's own tokens. The border color we had chosen for inputs measured 1.41:1 against the page background. Every word on the page passed. The form did not.
Decorative borders are exempt, which is the part that makes this genuinely fiddly. A divider between two sections carries no meaning and can be as faint as you like. The border around a text input is the thing that tells you where to click, so it is a user interface component and it needs 3:1.
When you have more than two colors
This tool takes a pair. A design system has eight or nine colors, and checking them two at a time means dozens of separate checks, which is enough work that it rarely gets done, and why the failures ship. Paste the whole set into the palette contrast grid instead and get every pair at once.
What "nearest passing" actually does
When a pair fails, this moves lightness only, in small steps, in both directions, and stops at the first shade that reaches 4.5:1. Hue and saturation stay put, so the suggestion is recognizably the color you picked rather than a different one.
Sometimes there is no answer, and it says so. Against a mid-gray background, plenty of saturated hues cannot reach 4.5:1 at any lightness, because lightening and darkening both run into the background from opposite sides. That pair needs a different hue, not a different shade, and knowing that quickly is more useful than a suggestion that nearly works.
Questions
Is this better than the WebAIM checker?
Not really, and it would be silly to claim otherwise. WebAIM's is excellent, it is what accessibility auditors cite, and if it is already in your bookmarks there is no reason to switch. The one thing here that it does not do is compute the nearest passing shade for you rather than giving you a slider to hunt with. Use whichever is closer to hand.
What counts as large text?
18.66px bold or 24px regular and above. That is 14pt bold or 18pt regular in the standard's own units. Anything smaller is normal text and needs 4.5:1, including the 16px that most interfaces call their body size.
Should I be aiming for AAA?
Usually not across the whole palette. AAA at 7:1 is a worthwhile target for long body copy, and chasing it everywhere tends to flatten a brand into black and gray. AA is what most legal and procurement requirements reference. Treat AAA as a goal for reading text, not a rule for the interface.
Does contrast cover color blindness?
No, and this is the most common misunderstanding about the ratio. Contrast is a luminance calculation and says nothing about hue, so two colors can sit at a comfortable 5:1 and be indistinguishable to someone with deuteranopia. They are separate checks. Run the palette through the color blindness simulator as well.
Does it handle transparency?
No. It takes two opaque hex colors. If your text sits on a semi-transparent layer, work out the color that actually results from that composite and check the result, because that is what the eye receives. A ratio computed against the layer rather than the composite is a number for a color nobody sees.
Related tools
Got a whole palette rather than a pair? The contrast grid checks every combination at once. Ready to ship the colors: export them to CSS variables and JSON tokens. And how to read a contrast ratio explains what the number does and does not tell you.