The quick brown fox
Small text preview β WCAG requires 4.5:1 for normal text
How it works
The WCAG Contrast Checker calculates the contrast ratio between a foreground (text) color and a background color, and reports whether that combination passes the Web Content Accessibility Guidelines (WCAG) 2.1 thresholds for normal text, large text, and UI components.
Sufficient color contrast is a legal accessibility requirement in many jurisdictions and a core usability factor for users with low vision or color blindness. WCAG defines specific minimum contrast ratios: 4.5:1 for normal text at Level AA, 3:1 for large text (18pt+ or 14pt+ bold) at Level AA, and stricter 7:1 / 4.5:1 thresholds at Level AAA.
How to use it: enter or pick a foreground and background color using the color pickers or by typing hex/RGB values directly. The tool calculates the precise contrast ratio using the WCAG relative luminance formula and shows a live preview of sample text at both normal and large sizes against your chosen background, with clear pass/fail badges for AA and AAA at each text size.
Quick fixes: if a combination fails, nudge the lightness of either color using the sliders and watch the ratio update in real time until it crosses the threshold you need β this is faster than guessing hex values and re-checking.
Privacy: all color math (relative luminance, contrast ratio calculation) runs locally using the WCAG formula implemented in JavaScript. No colors or design data are sent to a server.
Frequently Asked Questions
- WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text, and 3:1 for large text (at least 18pt, or 14pt bold). UI components and graphical objects require at least 3:1.
- Level AAA is a stricter, optional standard requiring 7:1 contrast for normal text and 4.5:1 for large text. Most legal accessibility requirements (such as ADA and EN 301 549) reference Level AA as the baseline.
- The tool uses the WCAG relative luminance formula on both colors, then computes the ratio between the lighter and darker luminance values. The result ranges from 1:1 (identical colors) to 21:1 (pure black on pure white).
- This tool checks luminance-based contrast, which is the primary WCAG requirement and benefits most low-vision and color-blind users. It does not simulate specific color blindness types β for that, pair it with a color-blindness simulator when choosing a palette.