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 Chromoforge-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 Luminanzverhältnis 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. Chromoforge berechnet sofort das Verhältnis und zeigt an, ob die Kombination die WCAG 2.1-Stufen erfüllt:
- AA normal: Mindestverhältnis 4,5:1 für Standardtext (unter 18pt oder 14pt Fett).
- AA groß: Mindestverhältnis 3:1 für großen Text oder wichtige grafische Elemente.
- AAA normal: Mindestverhältnis 7:1, erforderlich für maximale Barrièrefreiheit.
- AAA groß: Mindestverhältnis 4,5:1 für großen 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-Schaltflächen: Prüfe, ob weißer Text auf deiner Primärfarbe 4,5:1 übersteigt, bevor du das Design ablieferst.
- Dark Mode: Teste jede Text/Hintergrund-Kombination für deine dunklen Themes, da sich die Verhältnisse dabei vollständig ändern.
- Formulare: Hellgraue Platzhaltertexte scheitern häufig am AA-Niveau. Ersetze sie durch ein dunkleres Grau.
- Infografiken: Beschriftungen auf farbigen Hintergründen müssen AA groß (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 "größ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.