Die Ergebnisse dienen nur zu Informationszwecken und können Fehler enthalten. Bitte überprüfen Sie wichtige Informationen unabhängig. Die Nutzung dieses Tools erfolgt auf eigene Gefahr.
Was dieses Tool macht
Der Farbkontrast-Prüfer misst, wie gut Text auf einem Hintergrund lesbar ist. Wählen Sie eine Text- und eine Hintergrundfarbe, und Sie sehen das Kontrastverhältnis von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß), eine Live-Vorschau und ob das Farbpaar die vier WCAG-Schwellen besteht: AA und AAA jeweils für normalen und für großen Text.
Das Verhältnis wird mit der Formel für die relative Leuchtdichte aus WCAG 2 berechnet: Jeder Farbkanal wird linearisiert und gewichtet (Grün zählt am meisten, Blau am wenigsten), dann wird die hellere Leuchtdichte durch die dunklere geteilt, wobei zu beiden 0,05 addiert wird. AA verlangt 4,5:1 für normalen und 3:1 für großen Text (mindestens 24px oder 18,66px fett). AAA hebt diese Werte auf 7:1 und 4,5:1 an. Die Berechnung läuft in Ihrem Browser.
Wann Sie es verwenden
- Sie wählen eine Markenfarbe für Buttons und prüfen, ob weiße Beschriftungen darauf lesbar bleiben.
- Sie beheben ein fehlgeschlagenes Barrierefreiheits-Audit von Lighthouse oder axe, das Text mit zu geringem Kontrast meldet.
- Sie suchen ein Grau für Sekundärtext, das hell genug wirkt, um als Nebentext erkennbar zu sein, aber trotzdem AA besteht.
- Sie gestalten ein Dark Theme, in dem mittelhelle Akzentfarben auf dunklem Hintergrund oft durchfallen.
Beispiel
#ffffff auf #3b82f6
3.68:1 - AA large only
#767676 auf #ffffff
4.54:1 - AA normal and large, fails AAA normal
#1e293b auf #ffffff
14.63:1 - passes all four
Fragen zu diesem Tool
Warum fällt weißer Text auf einem leuchtend blauen Button durch?
Gesättigte, mittelhelle Farben haben eine recht hohe Leuchtdichte, daher landet weißer Text darauf oft zwischen 3:1 und 4,5:1. Das genügt für große, fette Beschriftungen, aber nicht für Fließtext. Dunkeln Sie den Hintergrund um ein oder zwei Stufen ab, bis das Verhältnis 4,5:1 erreicht.
Welche Stufe sollte ich anstreben, AA oder AAA?
Auf AA beziehen sich die meisten Gesetze und Richtlinien zur Barrierefreiheit, betrachten Sie es also als Minimum. AAA ist ein strengeres Ziel, das sich für längere Lesetexte lohnt, aber nicht für jedes Element vorgeschrieben ist.
Gilt der Kontrast auch für Icons und Rahmen?
WCAG 2.1 verlangt mindestens 3:1 für bedeutungstragende Grafiken und Bedienelemente, etwa Rahmen von Eingabefeldern, Fokusringe und Icons, die Informationen vermitteln. Orientieren Sie sich dafür am AA-Ergebnis für großen Text.
Kann ich eine Farbe in RGB- oder HSL-Schreibweise prüfen?
Die Farbwähler arbeiten mit Hex-Werten. Wandeln Sie andere Schreibweisen zuerst mit dem HEX-in-RGB-Farbkonverter und den verwandten Konvertern oder mit dem Farbkonverter um und fügen Sie dann den Hex-Code ein.
Ist dieses Tool kostenlos?
Ja, es ist kostenlos. Ohne Anmeldung und ohne E-Mail. Ergebnisse direkt auf dieser Seite.
Wie erhalte ich mein Ergebnis?
Nutze das Tool auf dieser Seite. Das Ergebnis erscheint hier und wird nicht per E-Mail zugestellt.