Farbkontrast-Prüfer
Prüfen Sie jede Farbkombination anhand der WCAG-2.1-Vorgaben. Sehen Sie sofort, kostenlos und direkt im Browser, wie Ihre Farben auf Menschen mit Farbsehschwäche wirken.
Normales Farbsehen
So wirkt diese Kombination bei einer Farbsehschwäche
protanopia
Ratio: 17.93:1 ✓ AA
deuteranopia
Ratio: 17.93:1 ✓ AA
tritanopia
Ratio: 17.93:1 ✓ AA
Farbkontrast und Barrierefreiheit verstehen
WCAG-Kontrastvorgaben
Die Richtlinien für barrierefreie Webinhalte (WCAG) legen Mindestkontrastverhältnisse fest, damit Text auch für Menschen mit Sehbehinderung oder Farbenblindheit lesbar bleibt:
- 4.5:1 WCAG AA — Normaler Text (unter 18 pt)
- 3.0:1 WCAG AA — Großer Text (ab 18 pt oder 14 pt fett)
- 7.0:1 WCAG AAA — Normaler Text (erhöht)
- 4.5:1 WCAG AAA — Großer Text (erhöht)
Warum die CVD-Simulation wichtig ist
Rund 8 % der Männer und 0,5 % der Frauen haben eine Form der Farbsehschwäche. Selbst wenn Ihre Farbkombination die WCAG-Kontrastwerte für normales Sehen erfüllt, kann sie für Menschen mit Protanopie oder Deuteranopie versagen, die Rot- und Grüntöne sehr unterschiedlich wahrnehmen. Prüfen Sie Ihre Entwürfe deshalb immer mit einer CVD-Simulation.
Leuchtdichte ist der Kanal, der immer bleibt
Farbe hat zwei Komponenten, auf die sich Gestaltung stützen kann: Farbton und Helligkeit. Nur eine davon ist für das gesamte Publikum verlässlich.
Die Farbtonunterscheidung schwankt enorm. Etwa jeder zwölfte Mann hat eine Rot-Grün-Störung, und für ihn kann ein Farbtonunterschied, der Ihnen offensichtlich erscheint, gar keine Information tragen. Die Helligkeitsunterscheidung ist weit einheitlicher. Eine Person mit Farbsinnstörung, eine Person mit verminderter Sehschärfe, eine Person mit ausgewaschenem Handydisplay in praller Sonne und eine Person mit völlig typischem Sehen nehmen einen großen Helligkeitsunterschied alle als großen Unterschied wahr.
Deshalb ist das Kontrastverhältnis die tragende Barrierefreiheitskennzahl. Es misst die Helligkeitsbeziehung zweier Farben und ignoriert den Farbton völlig — genau das ist erwünscht, denn es zeigt, was bleibt, wenn der Farbtonkanal unzuverlässig ist.
Das Verhältnis reicht von 1:1, wo zwei Farben dieselbe relative Leuchtdichte haben und ihre Grenze für alle unsichtbar ist, bis 21:1 für reines Schwarz auf reinem Weiß. Die Berechnung ist in WCAG genau definiert: jeden sRGB-Kanal in lineares Licht umrechnen, die Kanäle nach ihrem Beitrag zur wahrgenommenen Leuchtdichte gewichten und das hellere mit dem dunkleren Ergebnis vergleichen.
Die Schwellen und was dahintersteckt
4,5:1 — normaler Text (WCAG AA). Die Basis für Fließtext. Der Wert leitet sich aus dem Verlust an Kontrastempfindlichkeit ab, der etwa einer Sehschärfe von 20/40 entspricht — bei älteren Erwachsenen häufig, korrigierbar, aber oft unkorrigiert.
3:1 — großer Text (WCAG AA). Gilt ab 18 pt regulär oder 14 pt fett. Größere Zeichen haben dickere Striche und bleiben bei geringerem Kontrast lesbar.
3:1 — Nicht-Text-Kontrast (WCAG AA). Betrifft Bedienelemente und bedeutungstragende Grafiken: Feldränder, Schalterzustände, Fokusindikatoren, informative Symbole und die wesentlichen Teile eines Diagramms. Dieses Kriterium wird am häufigsten übersehen, und meist scheitert daran eine optisch elegante, kontrastarme Oberfläche im Audit.
7:1 und 4,5:1 — normaler und großer Text (WCAG AAA). Eine strengere Stufe, ausgelegt auf etwa 20/80. Für lange Lektüre auch dann sinnvoll, wenn nicht gefordert.
Kontrast ist notwendig, nicht hinreichend
Der häufigste Fehler bei barrierefreien Paletten ist, ein bestandenes Kontrastverhältnis als Ende der Arbeit zu nehmen. Zwei unabhängige Fragen sind zu beantworten:
- Ist jede Farbe gegen ihren Hintergrund lesbar? Das ist Kontrast, und dieser Prüfer beantwortet es.
- Sind Farben, die Verschiedenes bedeuten, voneinander unterscheidbar? Das ist Farbtontrennung, und darüber sagt das Kontrastverhältnis nichts.
Ein Diagramm mit einer roten und einer grünen Reihe kann den Kontrast bequem bestehen — beide sind dunkel auf weißem Grund — und für einen Deuteranopen völlig unlesbar sein, weil die beiden Reihen voneinander nicht zu unterscheiden sind. Schicken Sie solche Paletten zusätzlich durch den Farbsehsimulator.
Und wo immer Farbe Bedeutung trägt, ergänzen Sie einen zweiten Hinweis. Das WCAG-Kriterium zur Verwendung von Farbe verlangt es, und Technik G111 beschreibt das übliche Vorgehen: Farbe mit Muster, Form, Position oder ausdrücklicher Beschriftung koppeln. In der Praxis heißt das: Diagrammreihen direkt beschriften statt farbiger Legende, ein Symbol neben eine rote Fehlermeldung setzen, Inline-Links unterstreichen und Erfolgs- von Fehlerzuständen auch über die Form unterscheiden.
Mit dem Prüfer arbeiten
Geben Sie Vorder- und Hintergrundfarbe ein, und das Werkzeug nennt das Verhältnis und die erfüllten Schwellen. Einige Gewohnheiten machen es nützlicher:
- Prüfen Sie das echte Paar. Halbtransparente Überlagerungen, Verläufe und Hintergrundbilder bedeuten, dass der wirksame Hintergrund nicht die Farbe aus Ihrem Stylesheet ist. Messen Sie, was tatsächlich gerendert wird.
- Prüfen Sie beide Themes. Leuchtdichte invertiert nicht sauber; eine Dunkelpalette braucht einen eigenen Durchgang.
- Prüfen Sie in einem Verlauf den ungünstigsten Fall, nicht den Mittelwert.
- Beziehen Sie Deaktiviert- und Platzhalterzustände ein. Sie werden trotzdem gelesen.
- Prüfen Sie Fokusindikatoren gegen jede Fläche, auf der sie erscheinen. Ein Fokusring, der auf Weiß 3:1 erreicht, kann auf einer Karte verschwinden.
Für das größere Bild behandelt Gestalten für Farbenblindheit den Palettenaufbau, und Diagramme barrierefrei machen geht speziell auf Datenvisualisierung ein.
Haben Sie Fragen?
Häufig gestellte Fragen
Alles, was Sie über Farbenblindheitstests wissen müssen, wie sie funktionieren und was Sie mit Ihren Ergebnissen tun sollen.
Was bedeuten 4,5:1 und 3:1 eigentlich?
Es sind Leuchtdichte-Kontrastverhältnisse zwischen Vorder- und Hintergrund, auf einer Skala von 1:1 (identisch) bis 21:1 (Schwarz auf Weiß). WCAG 2.2 verlangt mindestens 4,5:1 für normalen Fließtext und erlaubt 3:1 für großen Text — ab 18 pt oder 14 pt fett —, weil größere Zeichen dickere Striche haben und geringeren Kontrast überstehen. Nicht-textliche Elemente mit Bedeutung, etwa Symbole, Feldränder und Fokusindikatoren, brauchen ebenfalls 3:1.
Warum ist Kontrast gerade bei Farbenblindheit wichtig?
Weil der Leuchtdichtekontrast der Kanal ist, der übrig bleibt, wenn die Farbtonunterscheidung ausfällt. Unterscheiden sich zwei Elemente nur im Farbton und kaum in der Helligkeit, bleibt jemandem, der diesen Farbtonunterschied komprimiert, nichts. Ausreichender Leuchtdichtekontrast hält die Unterscheidung sichtbar, unabhängig davon, wie Farbe verarbeitet wird. Es ist die robusteste Barrierefreiheitseigenschaft, die Sie einem Farbpaar geben können.
Meine Farben bestehen 4,5:1, aber das Design scheitert trotzdem. Wie?
Kontrast gegen den Hintergrund zu bestehen ist notwendig, aber nicht hinreichend. Eine rote und eine grüne Linie in einem Diagramm können jeweils hervorragenden Kontrast gegen Weiß haben und dennoch voneinander ununterscheidbar sein. Kontrast wird von Vordergrund zu Hintergrund gemessen; Unterscheidbarkeit ist eine Frage von Vordergrund zu Vordergrund. Prüfen Sie beides und geben Sie jeder farbcodierten Unterscheidung einen nicht farblichen Hinweis.
Ändert sich das Verhältnis im Dunkelmodus?
Die Formel nicht, Ihre Ergebnisse schon. Kontrast wird aus der relativen Leuchtdichte berechnet; eine invertierte Palette liefert also andere Verhältnisse, keine gespiegelten. Ein Paar, das auf Weiß besteht, kann auf Fast-Schwarz durchfallen — besonders gesättigte Blau- und Violetttöne, deren Leuchtdichte ohnehin niedrig ist. Prüfen Sie beide Themes.
Lohnt sich AAA?
Es ist eine strengere Stufe — 7:1 für normalen und 4,5:1 für großen Text — und tatsächlich besser lesbar, vor allem bei Sehbehinderung und schlechtem Licht. Die meisten Organisationen setzen AA als Konformitätsbasis und behandeln AAA als Ziel für Fließtext und lange Lektüre. AAA ist selten rechtlich gefordert.
Welche Elemente sind ausgenommen?
WCAG nimmt rein dekorative Inhalte aus, Text als Teil eines inaktiven Bedienelements, Text in einem Logo und Text als Teil eines Bildes mit anderem bedeutsamem visuellem Inhalt. Die Ausnahmen sind enger als vermutet: Platzhaltertext, aktive Bedienelemente, die deaktiviert aussehen, und kontrastarmer Hilfetext werden häufig und zu Unrecht als ausgenommen behandelt.
Haben Sie noch Fragen? Kontaktieren Sie uns →