Free WCAG Contrast Checker
Check the contrast ratio between any foreground and background colour combination. Instantly see whether your colours pass WCAG 2.1 AA and AAA accessibility standards.
Foreground (Text)
Background
Live Preview
About the Contrast Checker
This tool calculates the contrast ratio between two colors using the WCAG 2.1 algorithm defined by the W3C. It checks all four pass/fail conditions: AA and AAA for both normal text and large text. The live preview panel shows exactly how your text will appear against the background at both normal and large sizes.
Ensuring sufficient colour contrast is one of the most common accessibility failures on the web. This tool helps developers, designers and content creators quickly validate their colour choices before publishing.
How to Use the Contrast Checker
Set Foreground Color
Click the foreground color swatch or type a HEX code. This is usually your text color.
Set Background Color
Click the background swatch or type a HEX code. This is the color behind your text.
Check the Ratio
The contrast ratio is calculated instantly. WCAG AA requires 4.5:1 for normal text; AAA requires 7:1.
Adjust Until It Passes
If any level fails, adjust one or both colors until all required levels show a Pass badge.
Frequently Asked Questions
WCAG (Web Content Accessibility Guidelines) is a set of international standards published by the W3C to make web content more accessible to people with disabilities, including those with colour vision deficiency. Meeting WCAG AA is a legal requirement in many countries and is required for government websites worldwide.
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). Level AAA requires 7:1 for normal text and 4.5:1 for large text.
WCAG defines large text as at least 18 point (24px) or 14 point bold (approximately 18.67px bold). Headings typically qualify as large text, while body copy is generally considered normal text.
WCAG exempts purely decorative content, logotype text (text that is part of a logo or brand name) and text that is part of an inactive user interface component. For all other text on your website, contrast requirements apply.