Der Kontrast-Prüfer berechnet das WCAG 2.1 Kontrastverhältnis zwischen zwei Farben und bewertet sie anhand der AA/AAA-Grenzwerte für normalen und großen Text. Eine Live-Vorschau zeigt Text in den gewählten Farben, und eine Schaltfläche „Seitenhintergrund wählen“ übernimmt den aktuellen Hintergrund der Webseite.
Barrierefreiheit wird immer wichtiger — die Einhaltung der WCAG-Richtlinien ist in vielen Ländern gesetzlich vorgeschrieben, und selbst wenn nicht, schreckt ein schlechter Kontrast Benutzer ab. Der Kontrast-Prüfer sagt Ihnen sofort, ob zwei Farben den WCAG-Standards entsprechen. Wählen Sie eine Vorder- und Hintergrundfarbe über den Farbwähler aus oder fügen Sie Hex-Werte ein; das Tool berechnet das Kontrastverhältnis nach der offiziellen WCAG-Luminanzformel und bewertet es anhand von vier Grenzwerten: AA normal (≥4,5:1), AA groß (≥3:1), AAA normal (≥7:1) und AAA groß (≥4,5:1). Jeder Grenzwert wird mit einem eindeutigen Pass/Fail-Abzeichen angezeigt. Eine Live-Vorschau rendert großen und normalen Text in den gewählten Farben, damit Sie die tatsächliche visuelle Wirkung sehen können. Eine praktische Schaltfläche übernimmt die Hintergrundfarbe des aktuellen Seiten-Bodys — nützlich, um Farbkombinationen auf einer echten Website zu prüfen. Alles läuft lokal in Ihrem Browser ab, ohne Uploads.
Verwendet die offizielle WCAG-Luminanzformel zur Berechnung des Kontrastverhältnisses. Das Ergebnis ist exakt und stimmt mit jedem konformen Barrierefreiheits-Prüfer überein.
Pass/Fail für AA normal (≥4,5:1), AA groß (≥3:1), AAA normal (≥7:1), AAA groß (≥4,5:1) — alles in einer übersichtlichen Tabelle.
Rendert echten großen und normalen Text in Ihren gewählten Farben, sodass Sie die visuelle Wirkung neben dem numerischen Verhältnis sehen.
Mit nur einem Klick wird die berechnete Hintergrundfarbe des aktuellen Webseiten-Bodys übernommen — ideal zum Testen von Farbkombinationen in der Praxis.
Geben Sie einen Hex-Wert ein oder nutzen Sie den nativen Farbwähler. Die Werte werden bei jeder Bearbeitung bidirektional synchronisiert.
Tauscht mit einem Klick Vorder- und Hintergrundfarbe — nützlich beim Prüfen von invertierten Themes oder Hover-Zuständen.
Prüfen Sie vor der Finalisierung einer Farbpalette jede Textfarbe gegen ihren Hintergrund, um WCAG AA-Konformität sicherzustellen — das vermeidet spätere Nachbesserungen.
Nutzen Sie „Seitenhintergrund wählen“ auf einer Live-Seite und fügen Sie dann die tatsächliche Textfarbe ein — finden Sie Barrierefreiheitsfehler in Minuten, ohne Lighthouse zu öffnen.
Wenn eine Marke eine Farbe wählt, die bei der Barrierefreiheit durchfällt, finden Sie mit dem Prüfer die nächstgelegene konforme Variante (dunklerer/hellerer Ton).
Stellen Sie sicher, dass Farben für Hover-, Active- oder Disabled-Zustände die Kontrastanforderungen erfüllen, nicht nur der Standardzustand.
Dunkle Themes scheitern oft am Kontrast bei Grau-auf-Grau-Texten. Prüfen Sie Ihre dunkelsten Grautöne gegen Ihre dunkelsten Hintergründe, um dies abzufangen.
Klicken Sie auf das Kontrast-Symbol im DevSuite Pro Dock. Ein Panel mit Feldern für Vorder- und Hintergrundfarbe öffnet sich.
Nutzen Sie den Farbwähler oder fügen Sie für beide Farben Hex-Werte ein. Die Live-Vorschau wird bei jeder Änderung aktualisiert.
Die große Zahl (z. B. 4,8:1) ist das Kontrastverhältnis. Höher ist besser. 3 ist das absolute Minimum; 4,5 ist der Zielwert für normalen Text.
Pass/Fail-Abzeichen für AA und AAA sowie normale und große Textgrößen zeigen auf einen Blick, wofür Ihre Kombination qualifiziert ist.
Wenn der Test fehlschlägt, passen Sie die Farben an. Machen Sie den Vordergrund dunkler oder den Hintergrund heller (oder umgekehrt), bis das Ziel-Level „Bestanden“ zeigt.
Installieren Sie DevSuite Pro kostenlos und schalten Sie 64+ Entwickler-Tools für Ihren Browser frei.
