Free accessibility tool
WCAG Colour Contrast Checker
Enter two colours to get an instant WCAG 2.2 contrast ratio, with live pass/fail results for normal text, large text, and non-text UI elements.
By Calling All Minds·Last updated April 2026
AA normal text
The legal minimum for standard body text under WCAG 1.4.3.
AA large text & UI
Minimum for large text (1.4.3) and interactive UI components (1.4.11).
AAA normal text
Enhanced contrast target under WCAG 1.4.6, beyond the legal minimum.
AAA large text
Enhanced target for large text under WCAG 1.4.6.
Try it now
Check two colours
Pick or type a text colour and a background colour. The ratio and every WCAG 2.2 pass/fail threshold updates as you go — nothing is sent anywhere, it all runs in your browser.
Large text preview — Aa
This is what normal body text looks like at this contrast ratio. Read it in bright sunlight, on a low-quality screen, or with low vision, and the difference between a pass and a fail becomes obvious fast.
Contrast ratio
4.54:1
AA — Normal text
Needs 4.5:1 minimum
AA — Large text (18pt+ or 14pt bold+)
Needs 3:1 minimum
AAA — Normal text
Needs 7:1 minimum
AAA — Large text
Needs 4.5:1 minimum
UI components & graphics
Needs 3:1 minimum
Try an example
Understanding contrast ratios
Contrast ratio measures the difference in relative luminance between two colours, on a scale from 1:1 (identical, no contrast) to 21:1 (pure black against pure white). WCAG calculates it from each colour's relative luminance — a weighted measure of how bright it appears to the human eye — using the formula defined in WCAG 1.4.3 Contrast (Minimum).
The required ratio depends on what the colour combination is used for. Normal text needs more contrast than large text, because bigger, bolder strokes stay legible at lower contrast. Level AA is the legal compliance target under the European Accessibility Act; Level AAA is a stricter, optional target for enhanced accessibility.
Exemptions
Decorative text with no informational purpose, text that is part of a logo or brand name, and text in inactive or disabled UI components are exempt from these ratios.
How to use this tool
Enter or pick your foreground (text) colour and background colour above. Check every combination your interface actually uses — body copy, headings, links, button labels, placeholder text, and icons — since each pair needs to pass on its own.
This tool checks flat colour pairs. It cannot check text over a gradient or a photograph, where contrast varies across the image — for those, sample the lowest-contrast point by eye and test that colour here. It also will not catch every accessibility issue on a page; for a full audit against every WCAG 2.2 criterion, see AXS Audit.
AXS Audit
AXS Audit evaluates your website against the full WCAG 2.2 matrix — visual, cognitive, and keyboard criteria that most automated scanners miss. Built by the same team that created this guide.