QuickATools

Entwickler-Tools · Free browser tool

WCAG-Farbkontrast-Checker

Text-zu-Hintergrund-Kontrastverhältnisse in Echtzeit prüfen. WCAG-2.1-AA- und AAA-Compliance sofort für barrierefreies Webdesign verifizieren.

Colors

Pick or type hex values for text and background.

#
#

Live preview

Sample heading

The quick brown fox jumps over the lazy dog. Body text should stay readable at this size for AA compliance (4.5:1).

Smaller supporting copy — check Normal Text AA/AAA below.

Contrast ratio

17.74:1

Range is 1:1 (identical) to 21:1 (black on white).

Text luminance
0.0092
rgb(17, 24, 39)
Background luminance
1.0000
rgb(255, 255, 255)

WCAG 2.1 compliance

Large text means at least 18pt (24px) regular or 14pt (18.66px) bold.

  • Normal text · AA

    Body copy under ~18pt / 14pt bold · ≥ 4.5:1

    Pass

  • Normal text · AAA

    Enhanced contrast for body copy · ≥ 7:1

    Pass

  • Large text · AA

    ≥18pt regular or ≥14pt bold · ≥ 3:1

    Pass

  • Large text · AAA

    Enhanced contrast for large text · ≥ 4.5:1

    Pass

Frequently Asked Questions

Welche Kontrastverhältnisse verlangt WCAG 2.1 wirklich?

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) verlangt mindestens 4,5:1 für normalen Text und 3:1 für Large Text auf Level AA. Level AAA (1.4.6 Contrast Enhanced) hebt die Floors auf 7:1 für normalen Text und 4,5:1 für Large Text. Verhältnisse werden aus relativer Luminanz berechnet und reichen von 1:1 (identische Farben) bis 21:1 (reines Schwarz auf reinem Weiß).

Worin liegt der praktische Unterschied zwischen AA und AAA?

AA ist das gängigste Compliance-Ziel für öffentliche Websites, Behörden und kommerzielle Produkte — Lesbarkeit und Design-Flexibilität im Gleichgewicht. AAA ist strenger und kommt zum Einsatz, wenn maximale Lesbarkeit nötig ist (z. B. Long-Form-Reading oder Zielgruppen mit starker Seheinschränkung). AAA für jedes UI-Element ist oft unpraktisch; viele Teams zielen global auf AA und AAA für kritischen Body-Text.

Was zählt unter WCAG als „Large Text“?

Large Text ist definiert als mindestens 18 Point (typisch ~24 px) Regular Weight oder mindestens 14 Point (typisch ~18,66 px) Bold. Headings und Hero-Copy qualifizieren oft; Body-Absätze meist nicht. Large Text hat eine niedrigere Kontrastschwelle, weil größere Glyphen bei schwächerem Kontrast lesbar bleiben — trotzdem die tatsächlich gerenderte Größe in CSS prüfen, nicht nur die Design-Datei.

Warum ist Farbkontrast für Barrierefreiheit so wichtig?

Niedriger Kontrast ist einer der häufigsten Accessibility-Fails. Nutzer mit Seheinschränkung, ältere Erwachsene, Menschen auf dunklen oder sonnenbeschienenen Screens und viele mit Farbsehschwäche brauchen ausreichenden Luminanz-Unterschied — nicht nur Hue — um Text zu lesen. Kontrast früh prüfen verhindert Interfaces, die unter Idealbedingungen poliert wirken, aber für einen großen Teil realer Besucher unbrauchbar sind.

Weitere hilfreiche Tools

Entdecken Sie weitere kostenlose Browser-Tools für Verkäufer, Creator und Profis.

Warum Farbkontrast für barrierefreie Interfaces unverhandelbar ist

Barrierefreies Design ist kein Nice-to-have-Polish — es entscheidet, ob Menschen mit Seheinschränkung, Farbsehschwäche oder hartem Outdoor-Glare Ihre UI noch lesen. WCAG 2.1 definiert Mindest-Kontrastverhältnisse zwischen Text und Hintergrund, damit Content für deutlich mehr Nutzer lesbar bleibt. Wer diese Schwellen verfehlt, schließt Menschen still von Forms, Docs, Dashboards und Marketing-Seiten aus, die Designern auf kalibrierten Monitoren fine erscheinen.

Behörden-Sites, Enterprise-Produkte und viele Consumer-Apps sollen mindestens WCAG AA erfüllen. Kontrast im Browser prüfen — mit derselben Relative-Luminance-Formel der Spec — lässt Palette-Entscheidungen vor dem Ship validieren, ohne Brand-Farben zu einem Drittanbieter hochzuladen. Text und Hintergrund tauschen, Large vs. Normal Text previewen und einen Palette-Link teilen, wenn eine Kombination besteht.

AA verlangt 4,5:1 für normalen Text und 3:1 für Large Text; AAA hebt auf 7:1 und 4,5:1. Large Text bedeutet typisch 18 pt (ca. 24 px) Regular oder 14 pt (ca. 18,66 px) Bold. Dieses Tool als schnelles Gate in Design Reviews nutzen, dann finales UI im Kontext bestätigen — Icons, Gradients und Overlays können effektiven Kontrast ändern, auch wenn zwei flache Hex-Werte bestehen.

Weitere Developer-Utilities: Form-Patterns mit dem Regex-Tester validieren, Auth-Tokens im JWT-Decoder inspizieren, Design Tokens als JSON mit dem JSON-Formatter & Validator aufräumen oder Assets via Base64 Encode/Decode kodieren. Für Marktplatz-Produktfotos nutzt der Produktfoto-Hintergrund-Checker dieselbe Luminanz-Mathematik gegen echte Bilder.