So prüfen Sie den Farbkontrast einer Website

Bestimmen Sie Text und tatsächlichen Hintergrund

Beginnen Sie mit einem bestimmten Element: einem Absatz, einer Formularbeschriftung oder einem Schaltflächentext. Notieren Sie Textfarbe und direkt darunterliegenden Hintergrund. Eine in einer Klasse festgelegte Farbe kann durch andere Regeln überschrieben werden. Prüfen Sie deshalb die berechneten Stile des Elements im Browser. Transparenz verändert die wirksame Farbe ebenfalls durch Mischung mit dem Hintergrund. Das Werkzeug akzeptiert deckende HEX-Farben mit drei oder sechs Stellen. Ermitteln Sie bei Transparenz zunächst die zusammengesetzte Farbe. Ersetzen Sie CSS-Werte nicht automatisch durch Farbmuster aus komprimierten Bildschirmfotos. Die Kantenglättung erzeugt an Buchstabenrändern unterschiedliche Farbtöne, die nicht der ursprünglichen Textfarbe entsprechen. Bewahren Sie die ursprünglichen Codes für spätere Vergleiche auf.

Verstehen Sie Verhältnis und vier Ergebnisse

Geben Sie beide Codes ein und wählen Sie Kontrast prüfen. Ein Verhältnis von 1:1 bezeichnet Farben gleicher Leuchtdichte; Schwarz auf Weiß ergibt 21:1. Die vier Ergebnisse unterscheiden AA und AAA für normalen und großen Text. AA verlangt 4,5:1 bei normalem und 3:1 bei großem Text. Für AAA gelten 7:1 beziehungsweise 4,5:1. Die Entscheidung verwendet den vollständigen Wert vor der Rundung der Anzeige. Wählen Sie bei einem Farbpaar nahe der Grenze daher etwas Abstand zur Schwelle. Ein positives Ergebnis bestätigt nur diesen konkreten Textkontrast. Es bescheinigt nicht die Barrierefreiheit der gesamten Seite. Dazu gehören auch Tastaturbedienung, Beschriftungen, Inhaltsreihenfolge und weitere Kriterien der tatsächlichen Oberfläche.

Führen Sie einen nachvollziehbaren Test durch

Laden Sie das Beispiel mit Schwarz und Weiß. Prüfen Sie das Verhältnis 21:1 und vier erfüllte Ergebnisse. Ändern Sie anschließend die Textfarbe auf #777777 bei einem Hintergrund von #FFFFFF. Das Verhältnis beträgt ungefähr 4,478:1. Normaler Text erfüllt AA damit nicht, auch wenn eine stark gerundete Anzeige nahe an 4,5 liegt. Wählen Sie wieder eine dunklere Farbe und vergleichen Sie erneut. Ändern Sie jeweils nur eine Einstellung, um die Ursache der Verbesserung zu erkennen. Speichern Sie beide Farbcodes zusammen mit Ergebnis und geprüftem Bauteil. Die TXT-Datei bewahrt die Ausgabe; eine brauchbare Dokumentation nennt außerdem den Einsatzort der Farben. Wiederholen Sie den Test nach Änderungen am Stylesheet.

#000000 / #FFFFFF → 21:1
#777777 / #FFFFFF → 4.478089453577214:1

Prüfen Sie Schriftgrößen in px und rem

Großer Text beginnt bei einer normalen Schriftstärke ab 24 CSS-Pixeln oder bei Fettschrift ab ungefähr 18,67 Pixeln. Prüfen Sie berechnete Größe und Stärke statt nur die sichtbare Vorschau. Verwendet Ihr Entwurf rem, stellen Sie im Umrechner die tatsächliche Basis des html-Elements ein. Bei einer Wurzelschriftgröße von 16 px ergeben 1,5 rem genau 24 px. Bei 20 px ergeben dieselben 1,5 rem dagegen 30 px. Die vorgegebene Basis im Werkzeug dient der Bequemlichkeit und misst Ihre Seite nicht. Einheitenwechsel allein macht kleine oder dünne Buchstaben nicht lesbar. Kontrollieren Sie auch die verwendete Schrift mit dem endgültigen Text und den Abmessungen des tatsächlichen Bauteils.

Kontrollieren Sie Zustände und wechselnde Hintergründe

Prüfen Sie besuchte Links, Fokusmarkierungen, Schaltflächen unter dem Mauszeiger und Fehlermeldungen einzeln. Kommunizieren Sie einen Zustand nicht ausschließlich durch Farbunterschiede. Ergänzen Sie verständlichen Text, ein erkennbares Symbol oder eine weitere Kennzeichnung. Ein Hintergrund aus dem Verlaufsgenerator enthält zwischen den beiden Farben zusätzliche Zwischentöne. Seine Darstellung hängt außerdem von den Abmessungen des Elements ab. Zwei Farbmuster bestätigen deshalb nicht automatisch den gesamten Verlauf. Prüfen Sie die Stellen unter dem tatsächlichen Text oder legen Sie eine gleichmäßige Fläche hinter die Wörter. Testen Sie das fertige Element zuletzt mit Browserzoom und in einer schmalen Ansicht. Halten Sie die endgültigen Farben bei den Stilen fest, damit spätere Änderungen auf derselben Grundlage überprüft werden können.