Ein Farbwert: Kontrast beheben ohne Neugestaltung

Der Wert, den der Standard verlangt

Kontrast wird als Verhältnis zwischen der Helligkeit des Textes und der Helligkeit dessen gemessen, was dahinter liegt. Schwarz auf Weiß ergibt 21 zu 1. Der Standard für Barrierefreiheit verlangt mindestens 4,5 zu 1 für normalen Text und 3 zu 1 für großen Text, also ab etwa 24 Pixeln oder ab 19 Pixeln in Fettschrift.

Das Verhältnis stammt aus der Forschung dazu, wie viel Unterschied eine Person mit mäßig eingeschränktem Sehvermögen braucht, um bequem zu lesen. Es ist der Wert, den jedes automatische Prüfwerkzeug, jede Prüfung in der Beschaffung und jedes Beschwerdeschreiben verwendet.

Die Grautöne, die bestehen, und die, die durchfallen

Auf weißem Hintergrund verläuft die Grenze in einem schmalen Band. Einige Werte mit ihren Verhältnissen:

#999999   2.85 to 1   fails
#949494   2.99 to 1   fails
#8a8a8a   3.45 to 1   passes only as large text
#767676   4.54 to 1   passes
#666666   5.74 to 1   passes
#595959   7.00 to 1   passes the stricter AAA level

Beachten Sie, wie nah die durchfallenden Werte an den bestehenden liegen. Ein Theme, das #999 für Bildunterschriften gewählt hat, war eine Abstufung von der Konformität entfernt. Nebeneinander bemerkt niemand die Änderung. Wer draußen auf dem Smartphone liest, kann diese Bildunterschriften zum ersten Mal lesen.

Warum es ein einziger Wert ist

Themes und Page Builder legen eine Palette fest, und das helle Grau kommt darin einmal vor. Jede Bildunterschrift, jeder Hinweis in Formularen, jede Fußzeile, jedes Datum und jede Nebenbeschriftung verweist auf diesen einen Eintrag. Ändern Sie ihn, und die ganze Website ändert sich.

Bei einem Block-Theme steht die Palette im Website-Editor unter Stile. Bei älteren Themes steht sie im Customizer oder in einem Stylesheet, das jemand aus der Entwicklung pflegt.

Deshalb ist das auch keine Neugestaltung. Nichts verschiebt sich, und keine Schrift ändert sich. Die Website sieht für alle gleich aus, außer für die Menschen, die einen Teil davon vorher nicht lesen konnten.

Markenfarben sind der andere Fall

Das Blau oder Grün einer Organisation wurde meist für ein Logo gewählt, nicht für Text. Helle und leuchtende Markenfarben bestehen oft als Hintergrund hinter weißem Text und fallen als Text auf Weiß durch. Unser eigenes Blau, #1849B8, erreicht auf Weiß in beide Richtungen 7,8 zu 1, und das ist ebenso Glück wie Absicht. Prüfen Sie Ihres in beide Richtungen, bevor Sie es für Links verwenden.

Fällt eine Markenfarbe als Text durch, behalten Sie sie für Hintergründe, Schaltflächen und große Überschriften, und wählen Sie eine dunklere Verwandte davon für Links und Text in Fließtextgröße. Zwei Abstufungen desselben Farbtons wirken wie eine Marke.

Die Hierarchie behalten, die Blässe verlieren

Gestalter verwenden helles Grau, damit Nebentext zurücktritt. Größe und Schriftstärke leisten dasselbe, ohne etwas schwer lesbar zu machen. Eine 14-Pixel-Bildunterschrift in einem bestehenden Grau tritt neben 17-Pixel-Fließtext immer noch zurück.

Wer zur Kontrastkorrektur alles schwarz macht, macht die Seite flach. Einen Wert anzupassen und die Größe die Hierarchie tragen zu lassen, erhält das Design.

Platzhaltertext in Formularfeldern fällt ebenfalls durch. Browser stellen ihn standardmäßig hell dar, und er fällt fast überall durch. Wenn jedes Feld eine sichtbare Beschriftung darüber hat (die Reihe über Formulare behandelt das), brauchen Sie den Platzhalter gar nicht.

Was das kostenlose Audit prüft

Das kostenlose Audit wendet die automatische Kontrastregel auf die ganze Startseite an und meldet jedes durchfallende Element mit seinem gemessenen Verhältnis und den beteiligten Farben. Eine Startseite mit dreißig Fehlern hat meist eine Ursache. Finden Sie den gemeinsamen Wert, ändern Sie ihn und führen Sie die Prüfung erneut aus.