JavaScripts › Verschiedenes

Kontrast prüfen

Misst das Kontrastverhältnis zweier Farben nach WCAG und sagt, ob Text darin lesbar ist — mit Vorschau in echter Schriftgröße.

Hellgrauer Text auf weißem Grund sieht auf dem eigenen Bildschirm oft elegant aus — und ist für viele Menschen unlesbar. Ob eine Farbkombination taugt, lässt sich nicht nach Gefühl entscheiden, sondern ausrechnen. Genau das tut dieses Script.

Gemessen wird das Kontrastverhältnis nach den Web Content Accessibility Guidelines, kurz WCAG. Es liegt zwischen 1:1 — zwei identische Farben — und 21:1, dem Höchstwert für Schwarz auf Weiß. Die Richtlinien nennen zwei Stufen: AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für große Schrift ab etwa 24 Pixeln oder ab 19 Pixeln fett. AAA ist die strengere Stufe mit 7:1 beziehungsweise 4,5:1.

Diese Zahlen sind keine Geschmacksfrage. Sehschwächen sind weit verbreitet — Alterssichtigkeit, grauer Star, Farbfehlsichtigkeit —, und dazu kommen Umstände, die jeden treffen: Sonnenlicht auf dem Telefondisplay, ein billiger Monitor, ein müdes Auge am Abend. Für öffentliche Stellen ist die Einhaltung in Deutschland durch die Barrierefreie-Informationstechnik-Verordnung sogar verbindlich; das Barrierefreiheitsstärkungsgesetz erstreckt sie seit Juni 2025 auf viele weitere Anbieter.

Tragt zwei Farben als Hexadezimalwert ein oder wählt sie mit dem Farbwähler. Unter dem Ergebnis seht ihr die Kombination in drei Schriftgrößen — der schnellste Weg, das Zahlenergebnis mit dem eigenen Auge abzugleichen.

Verwandtes im Archiv: die Farbcodes-Übersicht, der RGB-Slider zum Mischen und Farbverlauf.

Verschiedenes Baujahr 2026 läuft in deinem Browser
Script von kostenlose-javascripts.de

So funktioniert das Script

Die Formel sieht auf den ersten Blick willkürlich aus. Jeder ihrer Bestandteile hat aber einen Grund, und der liegt darin, wie Bildschirme arbeiten und wie Augen sehen.

return anteil <= 0.03928
  ? anteil / 12.92
  : Math.pow((anteil + 0.055) / 1.055, 2.4);

Der Wert 128 in einem Farbkanal bedeutet nicht „halb so hell wie 255". Bildschirme geben Farben nach einer gekrümmten Kennlinie aus, der sogenannten Gammakurve — das spart Bits dort, wo das Auge ohnehin kaum Unterschiede sieht. Vor jeder Helligkeitsrechnung muss diese Krümmung rückgängig gemacht werden, und genau das tut diese Zeile. Der gerade Abschnitt für sehr dunkle Werte verhindert, dass die Kurve dort zu steil wird.

return 0.2126 * kanal(farbe.r) + 0.7152 * kanal(farbe.g) + 0.0722 * kanal(farbe.b);

Die drei Grundfarben tragen sehr unterschiedlich zur empfundenen Helligkeit bei: Grün mit rund 72 Prozent, Rot mit 21, Blau mit knapp 7. Das liegt an der Verteilung der Zapfen im Auge, die im grünen Bereich am empfindlichsten sind. Deshalb wirkt reines Blau fast schwarz und reines Gelb — Rot plus Grün — beinahe so hell wie Weiß.

return (heller + 0.05) / (dunkler + 0.05);

Das Kontrastverhältnis ist der Quotient der beiden Helligkeiten. Der Zuschlag von 0,05 steht für das Streulicht, das auf jedem realen Bildschirm vorhanden ist — ohne ihn ergäbe Schwarz gegen irgendetwas eine Division durch null. Mit ihm liegt der höchstmögliche Wert bei (1 + 0,05) / (0 + 0,05) = 21, also 21:1 für Schwarz auf Weiß.

if (/^[0-9a-fA-F]{3}$/.test(wert)) {
  wert = wert.charAt(0) + wert.charAt(0) + …;
}

Farbangaben gibt es in Kurz- und Langform: #fc0 bedeutet dasselbe wie #ffcc00. Statt an zwei Stellen zu rechnen, wird die Kurzform gleich beim Einlesen aufgeblasen. Solches Vereinheitlichen möglichst früh — im Fachjargon Normalisierung — erspart weiter unten eine Menge Fallunterscheidungen.

parseInt(wert.slice(0, 2), 16)

Die zwei Zeichen je Kanal sind eine Sechzehnerzahl; parseInt mit der Basis 16 macht daraus einen Wert von 0 bis 255. Ohne die 16 als zweites Argument würde "ff" als NaN gelesen — und "08" in ganz alten Browsern gar als Oktalzahl.

wahl.addEventListener("input", function () {
  feld.value = wahl.value;
  pruefen();
});

Textfeld und Farbwähler zeigen denselben Wert und halten sich gegenseitig auf Stand. Das eingebaute input type="color" liefert seinen Wert immer als sechsstelligen Hexwert — praktisch, weil damit keine Umrechnung nötig ist.

Zum Anpassen: Die Vorgabe #767676 auf Weiß ist mit Bedacht gewählt — sie liegt knapp über 4,5:1 und ist damit das hellste Grau, das für Fließtext noch zulässig ist. Alles darüber fällt durch. Wollt ihr zu einer Farbe die passende Partnerfarbe finden, könnt ihr in einer Schleife die Helligkeit schrittweise verändern, bis das Verhältnis den Zielwert erreicht.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Verschiedenes