WCAG-Farbkontrast-Prüfer – kostenlos
Prüfen Sie, ob zwei Farben die WCAG-AA- und AAA-Kontraststandards für Barrierefreiheit erfüllen. Live-Vorschau bei verschiedenen Textgrößen mit automatischen Vorschlägen bei zu geringem Kontrast.
Großer Überschriftstext
Mittlerer Fließtext (18px) für Lesen und Inhalt.
Normaler Fließtext (16px) für Absätze.
Kleiner Text (14px) für Bildunterschriften und Metadaten.
Kontrastverhältnis
Erfordert 4.5:1 · Ihr Wert: 14,63:1
Erfordert 3.0:1 · Ihr Wert: 14,63:1
Erfordert 7.0:1 · Ihr Wert: 14,63:1
Erfordert 4.5:1 · Ihr Wert: 14,63:1
Erfordert 3.0:1 · Ihr Wert: 14,63:1
Schnellvoreinstellungen
Basiert auf den WCAG 2.1-Kontrastrichtlinien. Großer Text = 18 pt (24px) normal oder 14 pt (18,66px) fett. HEX-Codes werden in beide Richtungen aktualisiert: HEX eingeben oder Farbe auswählen — beide Eingaben bleiben synchron.
Häufige Anwendungen
- Web-Seiten auf WCAG-Konformität überprüfenÜberprüfen Sie, dass Ihre Website-Textfarben die WCAG AA- oder AAA-Kontraststandards für Barrierefreiheit erfüllen.
- Markenfarbkombinationen überprüfenTesten Sie Markenfarbpaletten-Paarungen, um sicherzustellen, dass sie für barrierefreies UI-Design funktionieren.
- Farbpaletten im dunklen Modus testenHeller Text auf dunklem Hintergrund kann dennoch kontrastverletzend sein — überprüfen Sie hier Ihre Dark-Mode-Paletten-Paarungen.
- Farbpaarungen für DruckmaterialienPlakate, Beschilderung und Druckmaterialien benötigen auch lesbaren Kontrast — besonders für ältere Betrachter.
- Zugängliche Schaltflächenfarben entwerfenStellen Sie sicher, dass Ihre CTAs, Aktionstaschen und Links gegen ihre Hintergründe WCAG bestehen.
So funktioniert es
Die Kontrastprüfung läuft vollständig in Ihrem Browser mit dem WCAG-2.1-Algorithmus für relative Leuchtdichte – keine Bibliothek, kein Server, nur selbst geschriebene Mathematik, die genau der Spezifikation folgt. Jedes Ergebnis aktualisiert sich in Echtzeit beim Tippen oder Farbwählen.
- 1Hex-Eingabe und NormalisierungSowohl 3-stellige (#abc) als auch 6-stellige (#aabbcc) Hex-Werte werden akzeptiert und zu vollständigen RGB-Tripeln normalisiert. Ungültige Eingaben werden sofort abgelehnt, statt stillschweigend auf Schwarz zu fallen – so erscheint ein roter Rahmen statt eines irreführenden Bestanden-Ergebnisses.
- 2WCAG-LeuchtdichteberechnungJede Farbe wird mit der WCAG-2.1-Formel in relative Leuchtdichte umgerechnet: sRGB-Kanalwerte werden mit einer stückweisen Gammakorrektur linearisiert (Division durch 12,92 unter 0,03928, darüber Potenz 2,4) und dann als 0,2126R + 0,7152G + 0,0722B gewichtet.
- 3Kontrastverhältnis und KonformitätsprüfungenDas Kontrastverhältnis wird als (heller + 0,05) / (dunkler + 0,05) berechnet und gegen alle fünf WCAG-Schwellen geprüft: AA normaler Text (4,5:1), AA großer Text (3:1), AAA normaler Text (7:1), AAA großer Text (4,5:1) und UI-Komponenten (3:1). Die Ergebnisse aktualisieren sich bei jedem Tastenanschlag.
- 4Korrekturvorschläge mit gleichem FarbtonBesteht das Paar WCAG AA nicht, durchsucht das Tool den HSL-Helligkeitsraum – in beide Richtungen von der ursprünglichen Helligkeit aus – nach der nächsten Variante jeder Farbe, die 4,5:1 erreicht und dabei Farbton und Sättigung beibehält. Die EyeDropper API (Chromium) steht ebenfalls zur Verfügung, um jede Farbe direkt vom Bildschirm aufzunehmen.
Ähnliche Tools
Farbenblindheits-Simulator
Sehen Sie, wie Ihr Design für Menschen mit Farbsehschwäche aussieht. Simuliert Protanopie, Deuteranopie, Tritanopie, Achromatopsie und mildere Anomalien.
Wie hoch ist meine Bildschirmauflösung
Sehen Sie Ihre Bildschirmauflösung in CSS- und echten Pixeln, Fenstergröße, Pixeldichte, Farbtiefe, HDR, Touch-Unterstützung und Bildwiederholrate, und kopieren Sie alles.
Pixelfehler-Test
Überprüfen Sie Ihren Bildschirm auf tote oder feststeckende Pixel mit vollflächigem Schwarz, Weiß, Rot, Grün, Blau und Grau, plus einem optionalen Pixel-Reparaturversuch.