WCAG Contrast Checker
Calculate the contrast ratio between any foreground and background color and grade it against WCAG 2.1 AA and AAA thresholds. Includes a live preview of the combination. Runs in your browser.
The quick brown fox jumps over the lazy dog
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
About WCAG Contrast
Computes the contrast ratio per WCAG 2.1 using relative luminance, then grades against AA and AAA thresholds. To generate backgrounds use theGradient Generator.
Secure & Private Client-Side
This tool runs entirely in your browser. No data is sent to any server, ensuring your information remains private and secure.
About WCAG Contrast Checker
Calculate the contrast ratio between any foreground and background color and grade it against WCAG 2.1 AA and AAA thresholds. Includes a live preview of the combination. Runs in your browser.
Frequently Asked Questions
What is WCAG? expand_more
The Web Content Accessibility Guidelines, published by the W3C, define how to make web content accessible. WCAG 2.1 is the current widely-adopted version.
What contrast ratio do I need? expand_more
AA requires 4.5:1 for normal text and 3:1 for large text (18pt+ or 14pt+ bold). AAA requires 7:1 for normal text and 4.5:1 for large text.
How is the ratio computed? expand_more
The relative luminance of each color is calculated using the sRGB-to-linear conversion in the WCAG spec, then the lighter luminance plus 0.05 is divided by the darker luminance plus 0.05.
Need harmonious color choices? expand_more
Use the [Color Palette Generator](/tools/color-palette-generator/) to build accessible schemes from color theory.
Are my colors uploaded? expand_more
No. Everything runs locally in your browser.
Common Use Cases
- Accessibility Audits: Verify text and background combinations meet WCAG.
- Brand Guidelines: Lock in compliant color pairings for design systems.
- Form Design: Ensure error messages stay readable for everyone.
- Print: Confirm contrast for posters and signage.