Test any colour pair against WCAG AA and AAA standards. See the contrast ratio instantly and know if your design passes.
Requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt bold). AA is the conformance level most commonly targeted by websites and digital products.
Requires 7:1 for normal text and 4.5:1 for large text. AAA uses stricter contrast thresholds and can be useful where enhanced readability is a priority.
Choose the colour used for your text or foreground element, then choose its background colour. The checker calculates the contrast ratio between them and shows whether the pair meets the WCAG 2.x thresholds for AA and AAA text contrast.
The ratio ranges from 1:1 for identical colours to 21:1 for black on white. Higher ratios generally make text easier to distinguish from its background, but the required threshold depends on text size and the conformance level you are targeting.
Under WCAG 2.x, large text means at least 18pt (24 CSS px) when regular weight, or at least 14pt (about 18.66 CSS px) when bold. These checks apply to text contrast; non-text interface components have separate accessibility requirements.
Contrast affects whether people can comfortably read text in different conditions and on different displays. Low-contrast combinations can be difficult for people with low vision or colour-vision differences, and can also become hard to read on dim screens, low-quality displays or in bright light.
Testing gives you an objective result instead of relying on how a colour combination looks on your own monitor. It is especially useful before approving body copy, buttons, form labels, navigation links and text placed over coloured sections or images.
Keep the colour that matters most to your design and adjust the other one until the ratio passes. In practice, that usually means making the text darker on a light background or lighter on a dark background. If you are working with brand colours, reserve lower-contrast colours for decorative areas and use an accessible text colour where readability matters.
Once you have a passing pair, test it in the actual interface too. Contrast ratio is important, but readable typography also depends on font size, weight, spacing and the content behind the text.
Build your colours with the Brand Colour Palette Generator or Colour Scheme Generator, test important foreground/background pairs here, then use the Gradient Generator only where text remains readable across the full gradient. For a deeper explanation, read our guide to colour contrast and WCAG.
For normal body text, 4.5:1 is the WCAG AA threshold most websites aim to meet. A ratio of 7:1 meets the stricter AAA threshold for normal text.
A 3:1 ratio can meet WCAG AA for large text, but it does not meet the AA requirement for normal-size text.
Yes. Test the text inside buttons and links against their backgrounds. Interactive components can also have non-text contrast requirements for visual boundaries and states.
Yes. Accessibility depends on the relationship between foreground and background colours, not on a colour in isolation.