Farbkontrast-Prüfer

Über den Farbkontrast-Prüfer

Dieser kostenlose Farbkontrast-Prüfer misst das Kontrastverhältnis zwischen einer Textfarbe und einer Hintergrundfarbe und sagt Ihnen, ob es WCAG AA und AAA für normalen und großen Text erfüllt.

Er läuft in Ihrem Browser — es wird nichts hochgeladen.

Was das Verhältnis bedeutet

Das Kontrastverhältnis vergleicht die relative Leuchtdichte zweier Farben — wie viel Licht jede von ihnen abgibt oder reflektiert — auf einer Skala von 1:1 bis 21:1.

• 1:1 — identische Farben, der Text ist unsichtbar
• 21:1 — reines Schwarz auf reinem Weiß, das mögliche Maximum
• 4.5:1 — das Minimum für gewöhnlichen Fließtext nach WCAG AA

Entscheidend ist, dass die Berechnung die Leuchtdichte heranzieht und nicht, wie unterschiedlich die Farben aussehen. Zwei Farben können sich sehr verschieden anfühlen und trotzdem durchfallen. Rot auf Grün ist das klassische Beispiel: optisch auffällig, in der Leuchtdichte fast gleich und für viele Menschen kaum lesbar.

Deshalb können Sie den Kontrast auch nicht mit bloßem Auge beurteilen. Gestalterinnen und Gestalter arbeiten an guten Monitoren bei kontrolliertem Licht mit jungen Augen, und das helle Grau, das im Studio elegant wirkt, verschwindet auf einem Telefon im Sonnenlicht.

Die Schwellenwerte

WCAG legt zwei Stufen fest, und die Anforderung hängt von der Textgröße ab.

Stufe AA — das übliche Ziel und das, worauf sich die meisten Barrierefreiheitsgesetze beziehen:

• 4.5:1 für normalen Text
• 3:1 für großen Text
• 3:1 für Bedienelemente und bedeutungstragende Grafiken

Stufe AAA — ein strengerer Maßstab, angemessen für Inhalte, die sich an Menschen mit Sehbehinderung richten:

• 7:1 für normalen Text
• 4.5:1 für großen Text

Großer Text bedeutet 18pt (24px) oder größer oder 14pt (18.66px) fett oder größer. Größere Buchstaben haben dickere Striche und überstehen daher einen geringeren Kontrast.

AA ist das realistische Ziel für die meisten Websites. AAA ist über ein ganzes Design hinweg schwer zu erreichen und wird für allgemeine Inhalte nicht erwartet.

Warum das weit mehr Menschen betrifft, als Sie denken

Es ist leicht, Kontrast als „Randfall" abzulegen. Die Zahlen sagen etwas anderes.

Etwa 1 von 12 Männern und 1 von 200 Frauen hat eine Form von Farbfehlsichtigkeit — weltweit ungefähr 300 Millionen Menschen. Rot-Grün ist mit Abstand die häufigste.

Fast alle über 40 erleben eine nachlassende Kontrastempfindlichkeit, und die Augenlinse vergilbt mit dem Alter, was die Wahrnehmung von Blautönen verschiebt.

Alle, manchmal. Kontrastprobleme treffen auch Menschen mit perfekter Sehkraft, die im Freien lesen, auf einem gedimmten Bildschirm, auf einem billigen Monitor oder durch ein verschmiertes Telefondisplay im Bus. Verbesserungen bei der Barrierefreiheit sind hier schlicht Verbesserungen der Lesbarkeit für alle.

Es gibt auch eine rechtliche Dimension. Auf WCAG 2.1 AA wird in der Praxis durch den Americans with Disabilities Act Bezug genommen, durch Section 508 im US-Bundesbeschaffungswesen, durch den European Accessibility Act und durch entsprechende Regeln im Vereinigten Königreich, in Kanada und in Australien. Kontrast gehört zu den am häufigsten genannten Mängeln in Beschwerden über Barrierefreiheit, vor allem weil er so leicht messbar ist.

Wo Designs meistens scheitern

• Hellgrauer Platzhaltertext in Formularfeldern — äußerst verbreitet und fast immer nicht ausreichend
• Weißer Text auf einem Foto — das Verhältnis ändert sich über das Bild hinweg; fügen Sie eine Überlagerung oder einen Abdunkelungsfilter hinzu
• Markenfarben als Textfarbe — ein mitteltoniges Firmenblau oder -orange auf Weiß landet oft nahe bei 3:1
• Deaktivierte Zustände — von der Anforderung ausgenommen, aber trotzdem lesbar zu halten
• Links, die sich nur durch die Farbe abheben — hat ein Link dieselbe Helligkeit wie der Text ringsum, unterstreichen Sie ihn
• Weißer Text auf Gelb oder Grau auf Grau — die ewigen Übeltäter
• Dunkler Modus — reines Weiß auf reinem Schwarz ist technisch 21:1, verursacht aber Halation; leicht abgemilderte Farben lesen sich besser
• Fehlermeldungen in Rot auf weißem Grund — oft unter 4.5:1, ausgerechnet bei der Meldung, auf die es am meisten ankommt

Ein durchgefallenes Paar reparieren

Wenn eine Kombination durchfällt, ändern Sie die Helligkeit statt des Farbtons. Meist lässt sich eine Markenfarbe erkennbar halten und zugleich so weit abdunkeln oder aufhellen, dass sie besteht.

Praktische Ansätze:

Behalten Sie die Markenfarbe für große Elemente — Überschriften, Schaltflächen, Symbole — wo der Schwellenwert 3:1 beträgt, und verwenden Sie eine dunklere Variante für den Fließtext.

Ändern Sie nur eine Seite. Den Text abzudunkeln ist in der Regel weniger störend, als den Hintergrund zu ändern.

Legen Sie auf Bildern einen Abdunkelungsfilter an — eine halbtransparente dunkle Schicht zwischen Foto und Text. Sie garantiert das Verhältnis unabhängig davon, was das Bild zeigt.

Verlassen Sie sich nicht allein auf Farbe, um Bedeutung zu vermitteln. Ergänzen Sie ein Symbol, eine Beschriftung oder eine Unterstreichung, damit die Information auch für jemanden erhalten bleibt, der die Farben überhaupt nicht unterscheiden kann.

So verwenden Sie es

• Wählen Sie eine Textfarbe und eine Hintergrundfarbe
• Sehen Sie das Kontrastverhältnis und die AA-/AAA-Kennzeichnungen für bestanden oder nicht bestanden
• Lesen Sie die Live-Vorschau, um selbst zu urteilen, und passen Sie die Farben dann an

Gut zu wissen

• Testen Sie die tatsächlichen Farben, einschließlich jeder Deckkraft. Text mit 70 % Deckkraft ist gegenüber seinem Hintergrund faktisch eine andere Farbe.
• Prüfen Sie beide Themes. Eine Palette, die im hellen Modus besteht, kann im dunklen Modus durchfallen.
• Logos sind ausgenommen von der Kontrastanforderung, ebenso beiläufiger und rein dekorativer Text.
• Dünne Schriften brauchen in der Praxis mehr Kontrast, als das Verhältnis nahelegt. Der Standard misst die Strichstärke nicht, Ihre Leserinnen und Leser aber schon.
• Prüfen Sie es nach Möglichkeit auf einem Telefon bei Tageslicht. Das ist ein ehrlicherer Test als jeder Monitor.
• Bestehen ist eine Untergrenze, kein Ziel. 4.5:1 ist das gerade noch Akzeptable, nicht das Ziel.

Häufige Fragen

Was ist ein gutes Kontrastverhältnis?

Für gewöhnlichen Fließtext mindestens 4.5:1, um WCAG AA zu erfüllen — die Stufe, auf die sich die meisten Barrierefreiheitsgesetze beziehen. Großer Text, also 18pt/24px oder 14pt/18.66px fett und darüber, benötigt 3:1. Die strengere Stufe AAA verlangt 7:1 für normalen Text. Behandeln Sie diese Werte als Mindestwerte und nicht als Ziele; angenehmes Lesen liegt in der Regel deutlich darüber.

Was ist der Unterschied zwischen WCAG AA und AAA?

AA ist der praktische Standard, den die meisten Vorschriften und Organisationen übernehmen; er verlangt 4.5:1 für normalen Text und 3:1 für großen Text. AAA ist strenger, mit 7:1 und 4.5:1, und ist für Inhalte gedacht, die sich gezielt an Menschen mit Sehbehinderung richten. AAA ist über ein gesamtes Design hinweg schwer zu erreichen und wird für Websites mit allgemeinem Zweck nicht erwartet.

Warum fällt meine Farbkombination durch, obwohl sie für mich gut aussieht?

Weil der Kontrast aus der Leuchtdichte berechnet wird und nicht daraus, wie unterschiedlich zwei Farben erscheinen. Rot und Grün sehen stark verschieden aus, haben aber eine ähnliche Leuchtdichte, weshalb diese Paarung durchfällt. Auch das persönliche Urteil ist unzuverlässig: Gestaltende arbeiten meist an guten Bildschirmen bei kontrolliertem Licht mit guter Sehkraft — Bedingungen, die die meisten Lesenden nicht haben.

Ist Kontrast auch für Bilder und Symbole wichtig?

Ja. WCAG verlangt 3:1 für Bedienelemente und für Grafiken, die Bedeutung tragen, etwa Symbole, die einen Status vermitteln, oder den Rahmen eines Formularfelds. Rein dekorative Bilder und Logos sind ausgenommen. Text über einem Foto ist das übliche Problem, da sich das Verhältnis über das Bild hinweg ändert — eine halbtransparente Überlagerung löst es.

Wie repariere ich ein durchgefallenes Farbpaar, ohne meine Markenfarbe zu verlieren?

Passen Sie die Helligkeit an statt des Farbtons. Eine dunklere oder hellere Version derselben Farbe bleibt meist erkennbar markentreu und überschreitet zugleich den Schwellenwert. Sie können das Original auch für Überschriften, Schaltflächen und Symbole behalten, wo nur 3:1 gefordert ist, und für den Fließtext, wo 4.5:1 gilt, eine dunklere Variante verwenden.

Ist reines Schwarz auf reinem Weiß die beste Wahl?

Es ist mit 21:1 das Maximum, aber nicht unbedingt das Angenehmste. Sehr hoher Kontrast kann Halation verursachen — einen Leuchteffekt um die Buchstaben herum — besonders im dunklen Modus und bei manchen Lesenden mit Legasthenie oder Astigmatismus. Ein sehr dunkles Grau auf einem gebrochenen Weiß, oder ein abgemildertes Weiß auf einem dunklen Grau, liest sich oft angenehmer und besteht trotzdem mühelos.

Werden meine Farbauswahlen irgendwohin gesendet?

Nein. Das Verhältnis wird in Ihrem Browser berechnet, während Sie Farben auswählen, sodass nichts übertragen oder gespeichert wird und das Tool auch offline funktioniert.

Verwandte Tools

• Farbwähler — Farben finden und zwischen HEX, RGB und HSL umrechnen
• Bild-Farbwähler — eine Farbe aus einem Bild herausgreifen
• Farbpalette aus Bild — eine Palette erstellen und dann hier testen
• CSS-Verlaufsgenerator — den Textkontrast an beiden Enden eines Verlaufs prüfen