Technical and design
WCAG Contrast Checker
Check whether a text and background color pair meets the WCAG 2.2 contrast requirements, and see the exact ratio.
Runs in your browser; nothing is uploaded. · Free, no account · 2 min
HEX, rgb(), hsl(), oklch() or a colour name.
Importing a saved run into your account is coming soon. Until then, your last runs stay in this browser only, and you can download your files.
How to use
- Enter the text color and the background color as HEX, RGB, HSL, OKLCH or a color name.
- Read the contrast ratio and the pass or fail result for AA and AAA.
- Look at the live sample drawn in both colors.
- Try the suggested nearby text color, or change one color, when the pair fails, then check again.
What it checks and how it works
Relative luminance is L = 0.2126 R + 0.7152 G + 0.0722 B, where each sRGB channel c from 0 to 1 is made linear: c divided by 12.92 when c is 0.04045 or less, otherwise ((c + 0.055) / 1.055) raised to the power 2.4. The contrast ratio is (L1 + 0.05) divided by (L2 + 0.05), with L1 the luminance of the lighter color. The tool tests five requirements from WCAG 2.2: 4.5:1 for normal text and 3:1 for large text (success criterion 1.4.3, level AA), 7:1 and 4.5:1 (1.4.6, level AAA), and 3:1 for user interface components and graphical objects (1.4.11, level AA). Large text means 18 point, or 14 point bold, or larger. WCAG says computed values should not be rounded, so 4.499:1 does not meet 4.5:1, and the display never rounds a failing ratio up to a threshold.
Limits: WCAG does not define contrast for translucent colors, so a translucent text color is blended over the background and a translucent background over white; that is Zaher's convention. The tool compares two flat colors, not text over a photo or a gradient, and it does not apply exceptions such as logotypes or inactive components. WCAG notes that fonts with very thin strokes can need more contrast than the number suggests. The suggested nearby color is Zaher's helper and is not part of WCAG.
Sources
- W3C: Web Content Accessibility Guidelines (WCAG) 2.2 opened 29 Oct 2026
- W3C: Understanding Success Criterion 1.4.3 Contrast (Minimum) opened 29 Oct 2026
Related tools
Color Converter: HEX, RGB, HSL and OKLCH
Convert colors between HEX, RGB, HSL and OKLCH, one or many at a time, in CSS syntax.
Image Alt Text Checker
List every image in a page and find the ones with missing, empty or weak alt text.
Favicon and Web App Manifest Generator
Turn one logo into a favicon set, a maskable icon, an Apple touch icon, a web manifest and the head tags that link them.
Questions
About this tool
4.5:1 for normal text and 3:1 for large text under success criterion 1.4.3, and 3:1 for user interface components and graphical objects under 1.4.11.
WCAG says computed ratios should not be rounded. A ratio of 4.499:1 does not meet 4.5:1, so the tool shows the true result and never rounds a failure up.
No, it compares two flat colors, so for a photo or gradient test the worst spot behind the text by hand.
Get started today
Find out where your brand stands in AI. Free.
Run a free AI visibility analysis on your domain. No credit card, results in minutes. See what AI engines say about your brand today.
Brands already measuring their AI visibility with Zaher.
