Prüfungen
Nachgerechnet, nicht nachgeschlagen.
Ob Weiß auf dem Hauptblau lesbar ist, ob zwei Grüns für einen Rotblinden dasselbe sind, ob eine Regel einer anderen widerspricht: nexbrand rechnet es aus, jedes Mal, wenn sich etwas ändert. Kein Hinweis ist von Hand geschrieben.
Kontrast jeder Kombination
Im Reiter Prüfung jeder Fassung steht eine Tabelle: in den Zeilen jede Farbe als Schrift, in den Spalten jede Farbe als Grund, und in jeder Zelle die Note nach WCAG 2.2. AAA heißt 7:1, AA heißt 4,5:1, „nur groß“ heißt 3:1 und damit nur für große Schrift, „fällt durch“ heißt darunter.
Ein Schalter rechnet alles für große Schrift ab 24 px. Ein Klick auf eine Zelle zeigt eine Textprobe in genau diesem Paar und die fünf Schwellen: Fließtext AA und AAA, große Schrift AA und AAA, Grafik und Symbole mit 3:1.
Pavo sagtDie Prüfung läuft auch im Editor und im Assistenten mit. Du siehst also, dass eine Farbe zu hell ist, während du sie noch verschiebst.
Wie andere die Palette sehen
Etwa jeder zwölfte Mann sieht Rot und Grün anders als die meisten. Unter der Tabelle zeigt nexbrand die Palette so, wie sie Menschen mit Grünblindheit, Rotblindheit und Blaublindheit sehen, und in Graustufen, wie im Schwarzweißdruck. Jede Farbe steht dort zweimal: so gemeint und so gesehen.
Zwei Farben, die normal deutlich verschieden sind, aber bei Grün- oder Rotblindheit verschwimmen, meldet nexbrand als Hinweis. Blaublindheit ist selten; sie steht in der Ansicht, löst aber keinen Hinweis aus.
Was nexbrand meldet
Ernste Hinweise stehen als Zahl am Reiter Prüfung. Jeder nennt die Farben, die er meint, und wo es geht, eine, die besser passt.
| Hinweis | Wann |
|---|---|
| Auf einem Grund ist nichts lesbar | Keine Farbe der Palette erreicht 4,5:1 auf diesem Grund, oder nicht einmal 3:1 für große Schrift. |
| Weiß auf einer Farbe | Weiß ist in der Palette, erreicht auf einer bunten Farbe aber keine 4,5:1. nexbrand nennt, welche Schrift dort geht. |
| Hauptfarbe als Text | Die Hauptfarbe erreicht auf einem hellen Neutralton keine 4,5:1, taugt also nicht für Links. |
| Fast gleich | Zwei Farben liegen nach CIEDE2000 weniger als 4 auseinander. |
| Grün- und Rotblindheit | Zwei Farben, die normal mindestens 15 auseinanderliegen, liegen für Grün- oder Rotblinde unter 10. |
| Wortmarke | Zeichen oder Schrift einer gezeichneten Wortmarke erreichen keine 3:1 zu ihrem Grund. |
| Fließtext zu klein | Die Stufe für Fließtext ist kleiner als 16 px. |
| Nur intern, Systemschrift | Zur Kenntnis: Eine Hausschrift geht nur als Name nach draußen, eine Systemschrift braucht eine Ausweichschrift. |
| Regeln | Ein erlaubtes Paar ist zu blass, ein Paar ist zugleich erlaubt und verboten, ein Logo zeigt ein verbotenes Paar oder steht auf dem falschen Grund, eine Stufe benutzt eine Schrift gegen eine Regel oder ist zu klein, eine Regel zeigt auf etwas, das es nicht mehr gibt. |
| Dunkelmodus | Text, Text auf Flächen, leiser Text, Hauptfarbe oder Text auf Knöpfen erreicht im Dunkeln keine 4,5:1, oder eine Zuordnung fehlt. |
Pavo sagtHochgeladene Logodateien tragen ihre Farben selbst, die prüft nexbrand nicht. Geprüft werden gezeichnete Wortmarken, deren Farben aus der Palette kommen.
Der Kontrastrechner
Für die schnelle Frage zwischendurch: Schrift und Grund eintippen, als HEX, rgb() oder hsl(), und nexbrand rechnet schon beim Tippen. Du siehst eine große Probe, das Verhältnis und die fünf Schwellen, darunter das Verhältnis, wie es Menschen mit jeder Farbfehlsichtigkeit sehen.
Reicht das Paar nicht, schlägt nexbrand die nächste Schriftfarbe im selben Farbton vor, die 4,5:1 erreicht, heller oder dunkler in Schritten von einem Prozent. „Übernehmen“ setzt sie ein.
Wie gerechnet wird
Kontrast nach WCAG 2.2
Relative Leuchtdichte im linearen RGB. Verhältnisse werden abgeschnitten, nie aufgerundet: Aus 4,4992 wird 4,49, nicht 4,5.
Farbsehen nach Machado 2009
Die Simulation von Machado, Oliveira und Fernandes in voller Stärke, ebenfalls im linearen RGB.
Abstand nach CIEDE2000
Der Farbabstand ΔE 2000 entscheidet über „fast gleich“, über den Vergleich zweier Fassungen und beim Sammeln über „fast richtig“.
Dieselbe Rechnung läuft zweimal, im Browser für die Prüfung beim Bearbeiten und auf dem Server für Code, API und MCP, und beide werden gegen dieselben Testfälle geprüft. Ein Programm bekommt also genau die Hinweise, die du in der App siehst.