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

PDF-Barrierefreiheit prüfen

Prüfen Sie Tags, Lesereihenfolge, Alternativtexte, Sprache und Überschriften nach maschinell prüfbaren WCAG-Regeln.

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.

PDF-Schriften prüfen

Listet jede Schrift einer PDF mit Subset-Kennung, Subtyp, Einbettungsstatus und den Seiten, auf denen sie tatsächlich benutzt wird.

PDF-Druck-Preflight-Prüfung

Prüfen Sie Schriften, Bildauflösung, Farbe, Seitenboxen, Transparenz und Farbauftrag, bevor Sie ein PDF an eine Druckerei geben.

Bildmetadaten entfernen

Entfernen Sie EXIF-, GPS- und alle anderen Metadaten aus Bildern, um Ihre Privatsphaere zu schuetzen.

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.