Farbkontrast prüfen heißt: eine Zahl berechnen, statt nach Gefühl zu entscheiden. Textfarbe und Hintergrundfarbe eintragen, und das Verhältnis steht sofort da. Das Beispielpaar #777777 auf Weiß ergibt 4.47:1. Das sieht gut lesbar aus und fällt trotzdem bei AA durch.
Fünf Zeilen, fünf Mindestwerte
AA verlangt für normalen Text 4,5, für großen Text 3. AAA verlangt 7 und 4,5. Die fünfte Zeile gilt für Bedienelemente und Grafiken und verlangt 3. Als groß zählt Text ab 18 pt (24 px) oder ab 14 pt (18,67 px) in Fettschrift. Die Vorschau zeigt normalen, großen und großen fetten Text in deinen Farben.
Abschneiden statt Runden
Das Werkzeug schneidet nach der zweiten Nachkommastelle ab. Es rundet nicht. 4,496 wird also als 4.49:1 angezeigt und verfehlt die 4,5. Beim Runden stünde dort 4.50, und ein durchgefallenes Paar sähe bestanden aus. Im Beispiel liegt der echte Wert bei etwa 4,478, angezeigt wird 4.47.
Ablauf bis zur bestandenen Farbe
- Trage die Textfarbe ein oder wähle sie mit dem Farbfeld. Textfeld und Farbwähler bleiben abgeglichen.
- Trage die Hintergrundfarbe ein. Erlaubt sind
#rgb,#rrggbbundrgb(r, g, b). Alles andere meldet einen Fehler direkt am Feld. - Lies Verhältnis und Tabelle ab. Fällt AA bei normalem Text durch, erscheint ein Kasten mit der nächsten Textfarbe, die 4,5:1 erreicht.
- Mit Diese Farbe übernehmen setzt du sie ein. Mit Farben tauschen prüfst du hellen Text auf dunklem Grund.
Wie der Farbvorschlag entsteht
Farbton und Sättigung bleiben gleich. Nur die Helligkeit ändert sich, in Schritten von 0,1 Prozentpunkten, abwärts und aufwärts. Das nähere Ergebnis wird angezeigt. Für #777777 auf Weiß liegt es bei etwa #767676.
Was der Check nicht beurteilen kann
Verglichen werden zwei deckende Farben. Alpha, etwa rgba() oder Hex mit acht Stellen, wird nicht akzeptiert. Text auf einem Foto oder Verlauf hat keinen einzelnen Hintergrund, prüfe dort die schlechteste Stelle selbst. Schriftgröße und Schriftschnitt deiner Seite kennt das Werkzeug nicht.
Deine Farbwerte bleiben lokal
Die Berechnung läuft auf der Seite. Es wird keine Anfrage gesendet, und die Farben werden nicht gespeichert. Im Netzwerk-Tab der Entwicklertools kannst du das prüfen.