WCAG Contrast Checker
Check WCAG 2.1 color contrast ratios
WCAG Contrast Checker is a free online tool from BrowserUtils that check wcag 2.1 color contrast ratios. It runs entirely in your browser — your data never leaves your device. No account required.
Large Text Sample (18pt+)
Normal text sample — The quick brown fox jumps over the lazy dog.
Small text for detailed reading and interface elements.
17.06:1
Contrast Ratio
PASS — AA Normal Text (4.5:1)
PASS — AA Large Text (3:1)
PASS — AAA Normal Text (7:1)
PASS — AAA Large Text (4.5:1)
How to use WCAG Contrast Checker
- 1 Paste or type your input into the editor above.
- 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
- 3 Copy the result with one click or continue editing your input.
About WCAG Contrast Checker
Free online WCAG 2.1 contrast ratio checker. Test foreground and background color combinations against AA and AAA accessibility standards for normal and large text. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.
WCAG Contrast Checker specs
- Runtime
- 100% client-side (browser)
- Built on
- WCAG 2.2 contrast formulas (relative luminance per W3C spec) and ARIA 1.2 role mappings
- Cost
- Free — no account, no rate limits, no usage caps
- Browser support
- Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
- Part of
- 299 developer tools on BrowserUtils (100% client-side)
Questions
What contrast ratio is required for WCAG AA compliance?
WCAG AA requires a minimum contrast ratio of 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold). These thresholds ensure readability for users with moderately low vision.
What is the difference between WCAG AA and AAA?
WCAG AAA is a stricter standard requiring 7:1 contrast for normal text and 4.5:1 for large text. While AA is the minimum recommended level, AAA provides enhanced readability for users with more significant visual impairments.
How do I use the WCAG contrast checker?
Enter a foreground (text) color and a background color as hex codes. The tool instantly calculates the contrast ratio and shows whether the combination passes AA and AAA for both normal and large text sizes.
Does the WCAG contrast checker work offline?
Yes. The contrast ratio formula runs entirely in your browser. No color values are sent to a server, and the tool works without an internet connection after the page loads.
Is the WCAG contrast checker safe to use for compliance audits?
The tool implements the exact WCAG 2.1 relative luminance formula defined in the W3C specification. It gives the same results as other standards-compliant checkers and is suitable for accessibility audits.
Comments
Related tools
More Accessibility
ARIA Roles ReferenceAlt Text GeneratorHeading Hierarchy CheckerReadability ScoreColor Safe PaletteLink Text CheckerFocus Order Visualizer
View all Accessibility tools
Comments