WCAG Color Contrast Checker (AA / AAA)

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

🔒 100 % im Browser🆓 Für immer kostenlos⚡ Kein Signup
Hinweis: Das Tool-Interface unten ist aktuell nur auf Englisch verfügbar. Wir übersetzen die UIs Stück für Stück. Dieses Tool auf Englisch ansehen →
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.

So funktioniert's

  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.

Über 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) auf 712 Tools läuft komplett in deinem Browser über native JavaScript APIs - kein Server sieht je deine Daten. Das heißt: sofortige Ergebnisse, volle Privatsphäre und keine Upload-Limits.

Ob fĂźr eine Debugging-Session, einen schnellen Sanity Check oder einen Produktions-Incident - dieses Tool ist kostenlos so oft nutzbar, wie du willst. Keine Wasserzeichen, kein Signup und keine Ads im Tool selbst.

Häufige Fragen

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.

Weiterlesen

5 Min. Lesezeit

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.

Verwandte 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