Prüfen · Kapitel 18

Kontrastrechner

Manchmal willst du nur schnell wissen, ob ein Grau auf einem Beige reicht, ohne einen Kunden anzulegen. Dafür gibt es den Kontrastrechner: zwei Farben, jede Prüfung auf einmal.

Zwei Farben eingeben

In der Kopfleiste öffnet Kontrast den Kontrastrechner. Er hat zwei Felder, Schrift und Grund. Beide nehmen Farben so, wie sie in Stylesheets stehen:

#RRGGBB und die Kurzform #RGB
rgb() und hsl()

Gerechnet wird schon beim Tippen. Kann nexbrand einen Wert nicht lesen, sagt es das und nennt die Schreibweisen. Tauschen vertauscht Schrift und Grund.

Was du siehst

Eine große Probe mit Überschrift, Fließtext in 16 px und Kleingedrucktem in 12 px, dazu das Verhältnis und fünf Kriterien:

Kriterium	braucht
Fließtext AA	4,5:1
Fließtext AAA	7:1
Große Schrift AA	3:1
Große Schrift AAA	4,5:1
Grafik und Symbole	3:1

Die nächste Farbe, die reicht

Liegt das Paar unter 4,5:1, schlägt nexbrand eine Schriftfarbe vor: „Nächste Schriftfarbe mit 4,5:1 auf diesem Grund“, mit Hexwert, Verhältnis und dem Farbton in Grad. Gesucht wird im selben Farbton, in Schritten von einem Prozent dunkler oder heller, bis es reicht. Mit Übernehmen steht die Farbe im Feld Schrift. So bleibt der Ton erkennbar, und nur die Helligkeit ändert sich.

Der Contrast checker mit zwei Farben, der großen Probe, den Kriterien und dem Vorschlag Nearest text colour mit Use it — Der Rechner schlägt die nächste reichende Farbe vor.

Bei Farbfehlsichtigkeit

Unter Bei Farbfehlsichtigkeit stehen fünf Kacheln mit dem Verhältnis, wie es Menschen mit der jeweiligen Sehschwäche erleben, nach derselben Rechnung wie im Kapitel Prüfungen. Ein Paar, das normal reicht, kann dort deutlich schwächer werden.

Dasselbe für Programme

Die API rechnet dasselbe unter /api/v1/contrast?fg=…&bg=…, mit Noten, Farbsehen und der nächsten reichenden Farbe; über MCP heißt das Werkzeug check_contrast.

Pavo sagtDer Rechner braucht keinen Kunden und speichert nichts. Er ist das Werkzeug für die schnelle Frage zwischendurch.