WCAG-Kontrastprüfer
Prüfe, ob Text- und Hintergrundfarben die WCAG-Kontrastverhältnisse AA und AAA erfüllen.
Was diese Seite abdeckt
Diese Seite erklärt den Ablauf und verlinkt direkt auf den passenden Bereich des Chromaforge-Haupttools.
- Generiere Paletten aus einer Basisfarbe.
- Prüfe Kontrast vor dem Veröffentlichen von UI-Text.
- Exportiere CSS, Tailwind, SCSS, JSON, SVG und PNG.
- Läuft lokal im Browser.
Wie es funktioniert
Der WCAG-Kontrastprüfer berechnet das relative Luminanzverhaeltnis zwischen zwei Farben nach der offiziellen W3C-Formel. Dieses Verhältnis reicht von 1:1 (kein Kontrast, identische Farben) bis 21:1 (Schwarz auf Weiß, maximaler Kontrast).
Gib einfach die Text- und Hintergrundfarbe als Hexadezimalwert, RGB oder HSL ein. Chromaforge berechnet sofort das Verhältnis und zeigt an, ob die Kombination die WCAG 2.1-Stufen erfullt:
- AA normal: Mindestverhaeltnis 4,5:1 für Standardtext (unter 18pt oder 14pt Fett).
- AA gross: Mindestverhaeltnis 3:1 für grossen Text oder wichtige grafische Elemente.
- AAA normal: Mindestverhaeltnis 7:1, erforderlich für maximale Barrièrefreiheit.
- AAA gross: Mindestverhaeltnis 4,5:1 für grossen Text auf AAA-Niveau.
Das Ergebnis wird in Echtzeit mit einem visuellen Bestanden/Nicht-bestanden-Indikator für jede Stufe angezeigt. Mit einem Klick kannst du die Farben umkehren, um hellen Text auf dunklem Hintergrund zu testen.
Praktische Beispiele
Konkrete Situationen, in denen der Kontrastprüfer unverzichtbar wird:
- CTA-Schaltflachen: Prüfe, ob weisser Text auf deiner Primarfarbe 4,5:1 ubersteigt, bevor du das Design ablieferst.
- Dark Mode: Teste jede Text/Hintergrund-Kombination für deine dunklen Themes, da sich die Verhältnisse dabei vollstandig andern.
- Formulare: Hellgraue Platzhaltertexte scheitern haufig am AA-Niveau. Ersetze sie durch ein dunkleres Grau.
- Infografiken: Beschriftungen auf farbigen Hintergrunden müssen AA gross (3:1) für nicht-textuelle Elemente erf?llen.
- Zugänglichkeits-Audit: Vor einer BITV-Zertifizierung oder Kundenabnahme alle Farb-/Hintergrundpaare deines Design Systems prüfen.
FAQ — WCAG-Kontrast
Was ist der Unterschied zwischen WCAG AA und AAA?
Stufe AA ist der von den meisten Zugänglichkeitsgesetzen geforderte Mindeststandard (BITV 2.0 in Deutschland, ADA in den USA). Sie erfordert ein Verhältnis von 4,5:1 für normalen Text. Stufe AAA geht mit 7:1 weiter und wird für Seiten empfohlen, die auf Menschen mit starken Sehbeeintr?chtigungen ausgerichtet sind. Sie ist aber nicht immer verpflichtend.
Gilt der Kontrast auch für Bilder und Icons?
Ja, teilweise. Grafische Elemente, die Informationen tragen (funktionale Icons, Datengrafiken, Formularrahmen), müssen gem?? WCAG-Kriterium 1.4.11 ein Verhältnis von 3:1 gegen ihren Hintergrund erf?llen. Rein dekorative Bilder sind ausgenommen.
Mein Text ist 20px fett. Welches Verhältnis brauche ich?
Ein 20px fetter Text gilt laut WCAG als "gro?er Text" (14pt Fett oder 18pt Normal). Es gen?gt daher ein Verhältnis von 3:1 für AA und 4,5:1 für AAA. Das gibt mehr gestalterischen Spielraum bei gleichzeitiger Konformit?t.
Kann ich den Kontrast einer halbtransparenten Farbe prüfen?
RGBA-Farben oder Farben mit Transparenz müssen auf dem realen Hintergrund berechnet werden. Stelle die Endfarbe auf ihrem tatsächlichen Untergrund zusammen (z.B. rgba(0,0,0,0.5) auf Weiß = #808080) und gib diesen deckenden Wert in den Prüfer ein. Das Ergebnis hängt vom darunterliegenden Untergrund ab.
Funktioniert der Prüfer offline?
Ja. Chromaforge f?hrt alle Berechnungen direkt im Browser per JavaScript durch. Es werden keine Daten an einen Server gesendet. Sobald die Seite geladen ist, kannst du sie ohne Internetverbindung nutzen.