Color Contrast Checker
Enter two colours, get the exact ratio and whether it clears WCAG. Plus a suggested fix when it does not, rather than leaving you to guess which direction to nudge it.
AA is 4.5:1
For normal text. Large text — 18pt, or 14pt bold — only needs 3:1, because bigger letterforms stay legible at lower contrast.
AAA is 7:1
The stricter level, 4.5:1 for large text. Worth targeting for long-form reading; rarely a legal requirement.
Controls need 3:1 too
WCAG 1.4.11 applies to the visual boundary of buttons, inputs and focus rings — not just text. A hairline border almost never qualifies.
A suggested pair
When a combination fails, the tool proposes the nearest passing variant so you can keep the hue and adjust only what has to move.
Passing is a floor, not a goal. A ratio of exactly 4.5:1 is legible, not comfortable. Long-form text is easier to read well above the minimum.
The ratio also says nothing about hue. Two colours can pass and still be an unpleasant pairing, or fail for someone with a colour vision deficiency in ways the number does not capture.
Frequently asked questions
Is this free?
Yes, with no account and no limit on how many pairs you check.
Does anything get uploaded?
No. The calculation runs in your browser; no colour you enter reaches a server.
What counts as large text?
18pt and above, or 14pt and above if bold — roughly 24px and 18.66px. Large text needs 3:1 for AA rather than 4.5:1.
Does this cover non-text elements?
Yes. Icons, form borders and focus indicators need 3:1 under WCAG 1.4.11, which is a rule a lot of otherwise-accessible interfaces miss.
Related tools
Build a palette that passes from the start with the colour palette generator, or apply it as a CSS gradient. For dedicated accessibility software, browse digital product design tools.