WCAG Color Contrast Checker (AA / AAA)

Check text/background contrast against WCAG 2.1 AA and AAA - live preview

🔒 100% in-browser🆓 Free forever⚡ No sign-up
The quick brown fox jumps over the lazy dog - 0123456789
14.33:1
Contrast ratio · Normal text
AA (normal ≥ 4.5)PASS
AA large (≥ 3)PASS
AAA (normal ≥ 7)PASS
AAA large (≥ 4.5)PASS

Uses the WCAG 2.1 sRGB relative-luminance formula. “Large text” is 24px (18pt) regular or 18.66px (14pt) bold.

How it works

  1. 1
    Pick foreground and background

    Type HEX or use the color pickers. Alpha is supported and blended over the background.

  2. 2
    Read the ratio

    The exact contrast ratio appears with AA / AAA pass/fail badges for normal and large text.

  3. 3
    Nudge until it passes

    Sliders adjust lightness in tiny steps so you can find the closest passing shade.

About WCAG Color Contrast Checker (AA / AAA)

Free WCAG color contrast checker. Pick foreground and background colors to see the exact contrast ratio (per WCAG 2.1 relative luminance) and pass/fail badges for AA, AA Large, AAA, and AAA Large. Live preview of real text at the actual colors. Runs entirely in your browser. WCAG Color Contrast Checker (AA / AAA) on 712 Tools runs entirely inside your browser using modern JavaScript APIs - no server ever sees your data. That means instant results, complete privacy, and no upload limits.

Whether you need to check text/background contrast against wcag 2.1 aa and aaa - live preview for a debugging session, a quick sanity check, or a production incident, this tool is free to use as many times as you need. There are no watermarks, no sign-up, and no ads inside the tool itself.

Frequently asked questions

What ratios does WCAG require?

AA needs 4.5:1 for normal text and 3:1 for large. AAA needs 7:1 for normal and 4.5:1 for large. 'Large' is 18pt (24px) regular or 14pt (18.66px) bold.

Which luminance formula is used?

The WCAG 2.1 sRGB relative-luminance formula - the same one webaim.org and axe use. Results match to the fourth decimal.

What about APCA?

APCA (the proposed WCAG 3 algorithm) isn't included yet - it's still in draft. This tool sticks to the current WCAG 2.1 formula that accessibility auditors and lawyers actually cite.

Read more

5 min read

The WCAG color contrast checklist every designer should bookmark

AA vs AAA, the math behind the ratios, why gray-on-gray fails on retina screens, and the two-line HTML that makes a color contrast test run in seconds.

Related tools

Color Converter

Convert between HEX, RGB, HSL, and CMYK with live preview

Palette Generator

Generate harmonious color palettes from a base color

CSS Gradient

Design linear, radial, and conic CSS gradients with live preview

Box Shadow

Design multi-layer CSS box-shadows with live preview

Glassmorphism

Design frosted-glass CSS cards with live preview and copy-ready code

Physics Editor

Free online sprite hitbox editor - auto-trace collision polygons and export for Phaser, Matter.js, Rapier or any 2D engine