Zum Hauptinhalt springen
Bethemesh
Web & SEO

Kontrastprüfer

Prüfe Vorder- und Hintergrundfarben anhand der WCAG-Kontrastanforderungen.

  • Zwischenablage

Dieses Widget einbetten

Passe die Darstellung an, prüfe die Vorschau und kopiere anschließend den Code.

Vorschau

Art des Einbettungscodes

Zu kopierender Code

Responsive und automatisch von Bethemesh in der Größe angepasst.

War dieses Werkzeug hilfreich?

Wie funktioniert dieses Tool?

Dieser Prüfer berechnet das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe nach der WCAG-Methode und zeigt, ob die Kombination die Stufen AA und AAA erreicht. So prüfst du eine Farbpalette, bevor sie in ein Mock-up, ein Stylesheet oder eine Komponente wandert, ohne die Farben an einen Server zu senden.

Jede Hexfarbe wird in relative Leuchtdichte umgerechnet: Die Kanäle Rot, Grün und Blau werden linearisiert und nach der Empfindlichkeit des Auges gewichtet (Grün macht über 70 % der Leuchtdichte aus).

Das Verhältnis teilt die hellere Leuchtdichte plus 0,05 durch die dunklere plus 0,05. Es reicht von 1:1 (zwei gleiche Farben) bis 21:1 (Schwarz auf Weiß) und hängt nicht von der Reihenfolge der Farben ab.

Das Ergebnis wird mit drei Schwellen verglichen: 4,5:1 für normalen Text bei AA, 3:1 für großen Text bei AA und 7:1 für normalen Text bei AAA. Eine Vorschau zeigt Text in den beiden gewählten Farben.

So verwenden Sie dieses Tool

  1. Textfarbe wählen

    Gib die Farbe der Schrift ein oder wähle sie aus.

  2. Hintergrundfarbe wählen

    Gib die Farbe des Hintergrunds an, auf dem der Text steht.

  3. Verhältnis und Stufen ablesen

    Das Verhältnis erscheint mit Bestanden oder Nicht bestanden für AA normaler Text, AA großer Text und AAA normaler Text.

  4. Bis zur Zielstufe anpassen

    Dunkle den Text ab oder helle den Hintergrund in kleinen Schritten auf und prüfe erneut.

Formel des WCAG-Kontrastverhältnisses

Das Verhältnis vergleicht die relative Leuchtdichte der beiden Farben.

Kontrastverhältnis

Verhältnis = (L1 + 0,05) ÷ (L2 + 0,05), wobei L1 die Leuchtdichte der helleren Farbe ist

Die 0,05 stehen für das vom Bildschirm reflektierte Umgebungslicht.

Relative Leuchtdichte

L = 0,2126 × R + 0,7152 × G + 0,0722 × B, mit linearisierten Kanälen zwischen 0 und 1

Ein Kanal c (Wert von 255 geteilt durch 255) ist c ÷ 12,92, wenn er höchstens 0,03928 beträgt, sonst ((c + 0,055) ÷ 1,055)^2,4.

L_1
Leuchtdichte der helleren Farbe
L_2
Leuchtdichte der dunkleren Farbe
R_s, G_s, B_s
Linearisierte Kanäle Rot, Grün und Blau

Anwendungsfälle

Markenfarben prüfen

Prüfen, ob eine Markenfarbe als Text auf hellem oder dunklem Grund lesbar bleibt, bevor sie auf der ganzen Website eingesetzt wird.

Barrierefreiheits-Audit beheben

Den nächstgelegenen Farbton finden, der 4,5:1 erreicht, wenn ein Audit grauen Text als zu hell meldet.

Button-Farbe wählen

Die Beschriftung eines Buttons mit seiner Hintergrundfarbe vergleichen und danach Hover- und deaktivierten Zustand testen.

Beispiele

Grau #777777 auf Weiß

Dieses verbreitete Grau verfehlt AA knapp: Für große Überschriften reicht es, für Fließtext nicht.

Eingabe

Textfarbe: #777777 · Hintergrundfarbe: #ffffff

Ergebnis

Kontrastverhältnis: 4.48:1 · AA normaler Text: Nicht bestanden · AA großer Text: Bestanden · AAA normaler Text: Nicht bestanden

Grau #595959 auf Weiß

Ein dunkleres Grau erreicht genau die AAA-Schwelle von 7:1 und wirkt dabei weicher als reines Schwarz.

Eingabe

Textfarbe: #595959 · Hintergrundfarbe: #ffffff

Ergebnis

Kontrastverhältnis: 7.00:1 · AA normaler Text: Bestanden · AA großer Text: Bestanden · AAA normaler Text: Bestanden

Tipps und bewährte Vorgehensweisen

  • Als großer Text gelten 24 px (18 pt) normal oder 18,66 px (14 pt) fett; darunter brauchst du 4,5:1.
  • Bei Text auf Bildern oder Verläufen prüfst du die ungünstigste Stelle des Hintergrunds.
  • Icons und Rahmen von Eingabefeldern folgen einem anderen WCAG-Kriterium (1.4.11), das 3:1 gegenüber angrenzenden Farben verlangt.
  • Ein bestandenes Verhältnis ist nicht alles: Sehr dünne oder sehr kleine Schrift kann trotzdem schwer lesbar sein.

Quellen und Referenzen

Häufig gestellte Fragen

Was ist ein Kontrastverhältnis?

Es ist die Leuchtdichte der helleren Farbe geteilt durch die der dunkleren, jeweils plus 0,05. Es reicht von 1:1 bei gleichen Farben bis 21:1 bei Schwarz auf Weiß.

Welche Schwellen muss ich erreichen?

Für Stufe AA 4,5:1 bei normalem Text und 3:1 bei großem Text, für Stufe AAA 7:1 bei normalem Text. AA ist die Stufe, die die meisten Regelwerke verlangen, darunter die europäische Norm EN 301 549 und die BITV 2.0.

Warum fällt #777777 auf Weiß durch?

Das Verhältnis beträgt 4.48:1 und liegt damit knapp unter 4,5:1. Das Tool rundet nicht zu deinen Gunsten: Mit 4,48 erreicht normaler Text die Stufe AA nicht.

Spielt die Reihenfolge der Farben eine Rolle?

Nein. Die Formel setzt immer die hellere Farbe in den Zähler: Weißer Text auf Blau und blauer Text auf Weiß ergeben dasselbe Verhältnis.

Wird Transparenz berücksichtigt?

Nein. Das Tool vergleicht zwei deckende Farben. Bei einer halbtransparenten Farbe ermittelst du zuerst die Farbe, die auf dem Hintergrund entsteht, und prüfst dann diese.

Werden meine Farben irgendwohin gesendet?

Nein. Die Berechnung läuft in deinem Browser, und die Farben verlassen dein Gerät nicht.

Verwandte Werkzeuge

Mit diesen Werkzeugen weitermachen

Werkzeuge, die diesem ähnlich sind oder es ergänzen.

Ähnliche Werkzeuge

Slug-Generator

Erzeuge saubere URL-Slugs aus Titeln oder beliebigem Text.

Web & SEODieses Werkzeug verwenden

URL prüfen

Prüfe, ob eine URL syntaktisch gültig ist.

Web & SEODieses Werkzeug verwenden

Auch interessant