WCAG Contrast Checker
Check text contrast against WCAG 2.2 AA and AAA thresholds, with live preview.
Loading tool…
How to use it
- Set the foreground (text) and background colors — by HEX, RGB or CSS name, or with the pickers.
- Read the contrast ratio and the pass/fail table for WCAG 2.2 AA and AAA thresholds.
- Check the live preview to see the combination with sample text.
- Use Swap to quickly test inverted color pairs.
About this tool
Computes the WCAG contrast ratio for foreground/background pairs and reports pass/fail for normal text, large text and UI components at both AA and AAA levels. The formula and the relative-luminance math are explained, and a live text preview shows the combination in context.
Your input never leaves the browser: this tool works entirely offline once the page has loaded.
Frequently asked questions
Which ratio do I need for my text?
AA requires 4.5:1 for normal text and 3:1 for large text (24 px+ or 18.7 px bold); AAA requires 7:1 and 4.5:1. UI components such as icons need 3:1.
Does a passing ratio guarantee accessibility?
No — it is one of many requirements. Contrast is necessary but not sufficient; also check focus visibility, keyboard navigation and screen-reader labels.