chevron_right

Farbkontrast-Prüfer

WCAG 2.1 Farbkontrastratios für Barrierefreiheit prüfen.

Vordergrundfarbe

#f8fafc

Hintergrundfarbe

#111827

Sample Heading Text

The quick brown fox jumps over the lazy dog. This is body text at 16px to demonstrate readability at normal size.

16.96:1

Contrast Ratio

WCAG 2.1 Ergebnisse

check_circle

AA Normal Text

Min 4.5:1 — Body text, UI components

BESTANDEN

check_circle

AA Large Text

Min 3:1 — 18pt+ or 14pt+ bold

BESTANDEN

check_circle

AAA Normal Text

Min 7:1 — Enhanced: body text

BESTANDEN

check_circle

AAA Large Text

Min 4.5:1 — Enhanced: large text

BESTANDEN

Ahnliche Tools

IP-Adressprüfer

Prüfe IPv4-Adressen, IPv6-Adressen und CIDR-Notation mit Details zu Adresstyp und Subnetz.

Verlaufsgenerator

CSS-Verläufe visuell mit Live-Vorschau erstellen.

Zufalls-Farbpaletten-Generator

Erzeugen Sie zufällige Farbpaletten mit Harmonievorgaben.

Buchstabenabstand-Tool

CSS-letter-spacing mit Lesbarkeitszonen anpassen und in Echtzeit prüfen.

Metronome

Browser-based metronome with adjustable BPM and time signature. Perfect for music practice, no app install required.

Unicode-Konverter

Wandle Klartext in Unicode-Escape-Sequenzen um.

UUID-Validierer

UUIDs validieren und Version, Variante und normalisierte Form erkennen.

apps

Mehr Tools

Durchsuchen Sie unsere vollstandige Sammlung kostenloser Online-Tools.

Farbkontrast prüfen, bevor Farben live gehen

Eine Farbpalette kann gut aussehen und trotzdem an Barrierefreiheit scheitern. Mit diesem Prüfer lassen sich Vorder- und Hintergrundfarben gegen die WCAG-Kontrastgrenzen testen, bevor sie in ein Designsystem, eine Komponentenbibliothek oder ein Live-Produkt übernommen werden.

Was die Ergebnisse bedeuten

Das Tool zeigt das Kontrastverhältnis und ob die Kombination die üblichen WCAG-Stufen erfüllt für:

normalen Text nach AA
großen Text nach AA
normalen Text nach AAA
großen Text nach AAA

Warum das in echten Projekten wichtig ist

Kontrastprüfungen helfen besonders, wenn Sie:

Markenfarben in Komponenten validieren
Text auf Buttons, Karten oder Bannern testen
Barrierefreiheit im Handoff prüfen
schwer lesbare Kombinationen für Menschen mit Sehschwäche vermeiden möchten

Ein bestandener Test ist nicht das Ende

Eine Kombination kann formal bestehen und sich bei kleiner Schrift oder feiner Gewichtung trotzdem unangenehm lesen. Sehen Sie sich daher auch nach dem Bestehen noch die Vorschau mit realistischen Textgrößen an.