WCAG Color Contrast Checker (AA / AAA)

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

🔒 100 % in-browser🆓 Gratuit pour toujours⚡ Pas de signup
Note : L'interface de l'outil ci-dessous n'est actuellement disponible qu'en anglais. On traduit les UI une par une. Voir cet outil en anglais →
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.

Comment ça marche

  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.

À propos de 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) sur 712 Tools tourne entièrement dans ton browser via des APIs JavaScript natives - aucun server ne voit jamais tes données. Résultats instantanés, privacy complète, et aucune limite d'upload.

Que ce soit pour une session de debug, un sanity check rapide ou un incident en prod, cet outil est gratuit à utiliser autant que tu veux. Pas de watermarks, pas de signup et pas d'ads dans l'outil.

Questions fréquentes

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.

Lire plus

5 min de lecture

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.

Outils similaires

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