Was tun Sie, wenn Sie eine Beschwerde über den Farbkontrast in Ihrem Webdesign erhalten? Es mag für Sie perfekt in Ordnung erscheinen, weil Sie Inhalte auf der gesamten Website lesen können, aber für jemand anderen kann es eine völlig andere Erfahrung sein. Wie können Sie sich in die Lage dieser Person versetzen, um ihre Erfahrung zu verbessern?
Es gibt einige relativ einfache Möglichkeiten, den Kontrast zu testen. Sie können zum Beispiel die Website auf Ihrem Handy oder Tablet bei hellem Sonnenlicht überprüfen (nicht zuverlässig*) oder einen CSS-Filter hinzufügen, um eine Graustufenansicht zu simulieren). Aber… Sie müssen Ihren Augen nicht trauen. Nicht jeder hat genau Ihre Augen, daher kann Ihre subjektive Meinung möglicherweise keine fehlerhafte Messung sein.
Sie können mathematisch wissen, ob zwei Farben genügend Kontrast zueinander haben.
Das W3C hat ein Dokument namens Web Content Accessibility Guidelines (WCAG) 2.1, das erfolgreiche Kontrastrichtlinien behandelt. Bevor wir zur Mathematik kommen, müssen wir wissen, welche Kontrastverhältniswerte wir anstreben oder übertreffen wollen. Um eine gute Note (AA) zu erhalten, beträgt das Kontrastverhältnis 4,5:1 für die meisten Textkörper und 3:1 für größere Text.
Wie kam das W3C zu diesen Verhältnissen?
Die Richtlinien wurden für alle erstellt, die einen Standardbrowser ohne zusätzliche assistierende Technologie verwenden. Die Kontrastverhältnisse, die die WCAG vorschlägt, basierten ursprünglich auf früheren Kontraststandards und wurden angepasst, um neuere Display-Technologien wie Kantenglättungstext zu berücksichtigen, damit Inhalte für Menschen mit einer Vielzahl von visuellen oder kognitiven Schwierigkeiten lesbar sind, sei es aufgrund von Alter, Krankheit oder anderen Beeinträchtigungen der Sehschärfe.
Wir zielen im Grunde darauf ab, Text für jemanden mit 20/40er-Sehschärfe lesbar zu machen, was der Sehschärfe eines 80-jährigen Menschen entspricht. Eine Sehschärfe von 20/40 bedeutet, dass man etwas in 20 Fuß Entfernung nur lesen kann, was jemand mit perfekter 20/20-Sehschärfe lesen könnte, wenn es 40 Fuß entfernt wäre.
Sagen wir also, Ihr Design erfordert kantenglätteten Text, weil er auf einem Bildschirm viel weicher aussieht. Das opfert tatsächlich etwas Kontrast und verschlechtert Ihr Verhältnis. Die WCAG geht detaillierter darauf ein, wie die Bewertung funktioniert.
Es gibt andere Standards, die den Kontrast berücksichtigen, und die WCAG nutzte einige dieser Überlegungen zur Entwicklung ihrer Bewertung. Einer davon heißt Human Factors Engineering of Computer Workstations (ANSI/HFES 100-2007), wurde 2007 veröffentlicht und als amerikanischer Standard für Ergonomie anerkannt. Er fasste zwei frühere Standards zusammen, die von separaten Ausschüssen erstellt wurden. Das Ziel des kombinierten Standards war es, 90 % der Computernutzer zu berücksichtigen und viele Aspekte der Computernutzung und Ergonomie abzudecken, einschließlich visueller Anzeigen und Kontrast. Das bedeutet also, dass wir physische Bildschirme in unseren Designs berücksichtigen müssen.
Was bedeutet das Verhältnis?
Das Kontrastverhältnis erklärt den Unterschied zwischen der Helligkeit der hellsten Farbe und der Helligkeit der dunkelsten Farbe in einem bestimmten Bereich. Es ist die relative Luminanz jeder Farbe.
Beginnen wir mit einem eklatanten Beispiel für türkisfarbigen Text auf einem hellgrauen Hintergrund.
<h1>Title of Your Awesome Site</h1>h1 {
background-color: #888888;
color: #1ABC9C;
}
Es ist erwähnenswert, dass einige Tools, wie z. B. WordPress, eine hilfreiche Warnung ausgeben, wenn eine schlecht kontrastierende Text- und Hintergrundkombination vorliegt. Im Fall von WordPress erhalten Sie eine Benachrichtigung in der Seitenleiste.
„OK“, sagen Sie. „Vielleicht denken Sie, dass die türkisfarbene Grau-Kombination nicht gerade großartig ist, aber ich kann immer noch erkennen, was der Inhalt besagt.“ (Ich bin froh, dass einer von uns das kann, denn für mich ist es so ziemlich eine schlammig-graue Masse.)
Das Kontrastverhältnis für dieses feine Stück Hypertext beträgt 1,47:1.
Ich wollte besser verstehen, was die Kontrastwerte tatsächlich prüfen, und stellte fest, dass dies die Verwendung von *Mathematik* erfordert... mit einer Beilage des Verständnisses der Unterschiede zwischen menschlicher und Computer-Vision. Diese Reise lehrte mich etwas über die Geschichte der Computer-Vision und ein wenig über Biologie und gab mir eine kleine Wiederholung von einigen mathematischen Konzepten, die ich seit der Universität nicht mehr berührt hatte.
Hier ist die Gleichung
(L1 + 0.05) / (L2 + 0.05)L1ist die relative Luminanz der helleren der beiden Farben.L2ist die relative Luminanz der dunkleren der beiden Farben.
Das scheint einfach, oder? Aber zuerst müssen wir die relative Luminanz für jede Farbe bestimmen, um diese Variablen zu erhalten.
OK, zurück zur relativen Luminanz
Wir haben es beiläufig erwähnt, aber es lohnt sich, tiefer in die relative Luminanz einzutauchen, oder die relative Helligkeit einer beliebigen Farbe, ausgedrückt in einem Spektrum zwischen 0 (Schwarz) und 1 (Weiß).
Um die relative Luminanz für jede Farbe zu ermitteln, müssen wir zunächst die RGB-Notation für eine Farbe erhalten. Manchmal arbeiten wir mit HEX-Farbwerten und müssen diese in RGB umwandeln. Es gibt Online-Rechner, die das für uns erledigen, aber im Hintergrund steckt solide Mathematik dahinter. Unsere türkisfarbene HEX-Farbe, #1ABC9C, wird zu einem RGB von 26, 188, 156.
Als Nächstes nehmen wir jeden Wert der RGB-Farbe und teilen ihn durch 255 (den maximalen Integerwert von RGB) , um einen linearen Wert zwischen 0 und 1 zu erhalten.
Mit unserer türkisfarbenen Farbe sieht das nun so aus:
| Komponente | Gleichung | Wert |
|---|---|---|
| Rot | 26/255 | 0.10196078 |
| Grün | 188/255 | 0.73725490 |
| Blau | 156/255 | 0.61176471 |
Dann wenden wir die Gammakorrektur an, die die Beziehung zwischen dem numerischen Wert eines Pixels und seiner tatsächlichen Luminanz definiert, auf jeden Komponentenanteil der RGB-Farbe. Wenn der lineare Wert einer Komponente kleiner als 0,03938 ist, teilen wir ihn durch 12,92. Andernfalls addieren wir 0,055, teilen das Ergebnis durch 1,055 und nehmen das Ergebnis hoch 2,4.
Unsere gammakorrigierten Farbkomponenten unserer türkisfarbenen Farbe sehen dann so aus:
| Komponente | Gleichung | Wert |
|---|---|---|
| Rot | ((0.10196078 +.055)/1.055) ^ 2.4 | 0.01032982 |
| Grün | ((0.73725490 +.055)/1.055) ^ 2.4 | 0.50288646 |
| Blau | ((0.61176471 +.055)/1.055) ^ 2.4 | 0.33245154 |
Dieser Teil unserer Gleichung stammt aus der Formel zur Bestimmung der relativen Luminanz.
Wir sind hier im Grunde an der Gammakorrektur vorbeigesaust, ohne viel darüber zu reden, was sie tut. Kurz gesagt, sie übersetzt, was ein Computer „sieht“, in die menschliche Wahrnehmung von Helligkeit. Computer erfassen Licht direkt, wobei die doppelte Photonenmenge die doppelte Helligkeit ergibt. Menschliche Augen nehmen bei schwachen Lichtverhältnissen mehr Helligkeitsstufen wahr und bei hellen Bedingungen weniger. Digitale Geräte um uns herum führen ständig Gamma-Kodierungs- und Dekodierungsberechnungen durch. Sie dient dazu, uns Dinge auf Bildschirmen zu zeigen, die mit unserer Wahrnehmung übereinstimmen, wie Dinge für unsere Augen aussehen.
Schließlich multiplizieren wir die verschiedenen Farben mit Zahlen, die angeben, wie hell diese Farbe für das menschliche Auge *erscheint*. Das bedeutet, wir bestimmen die Luminanz jeder Farbe, indem wir den Rotkomponentenwert mit 0,2126, den Grünkomponentenwert mit 0,7152 und den Blaukomponenten mit 0,0722 multiplizieren, bevor wir alle drei Ergebnisse zusammen addieren. Sie werden feststellen, dass Grün hier den höchsten Wert erhält,
Also, ein letztes Mal für Türkis
| Komponente | Gleichung | Wert |
|---|---|---|
| Rot | 0,01032982 X 0,2126 | 0.00219611973 |
| Grün | 0,50288646 X 0,7152 | 0.35966439619 |
| Blau | 0,33245154 X 0,0722 | 0.02400300118 |
…und sie für die Luminanz zusammen addieren!
L1 = 0.00219611973 + 0.35966439619 + 0.02400300118 = 0.38586352Wenn wir dasselbe tun, um unseren L2-Wert zu erhalten, erhalten wir 0,24620133.
Wir haben nun die L1- und L2-Werte, die wir zur Berechnung des Kontrasts benötigen. Um zu bestimmen, welcher Wert L1 und welcher L2 ist, müssen wir sicherstellen, dass die größere Zahl (die die hellere Farbe zeigt) immer L1 ist und durch die kleinere/dunklere Farbe als L2 geteilt wird.
Vergleichen Sie dieses Ergebnis nun mit den Erfolgskriterien der WCAG. Für Text in Standardgröße, zwischen 18-22 Punkten, besteht ein Mindestergebnis von 4,5 mit der Note AA. Wenn unser Text größer ist, reicht ein etwas niedrigerer Wert von 3 aus. Aber um die *höchste* WCAG-Bewertung (AAA) zu erhalten, müssen wir ein Kontrastverhältnis von mindestens 7 erzielen. Unsere schöne Kombination besteht alle Tests nicht und liegt weit unter 4,5 für normalen Text oder 3 für Schlagzeilentext. Zeit für bessere Farben!
Ich bin so froh, dass wir Computer und Online-Tools haben, um diese Arbeit für uns zu erledigen! Der Versuch, die Details Schritt für Schritt auf Papier zu erarbeiten, hat mir wochenlange Frustration bereitet. Ich habe viel falsch gemacht, als ich die Ergebnisse mit denen von automatisierten Kontrastprüfern verglichen habe.
Erinnern Sie sich, wie Lehrer in der Schule immer wollten, dass Sie Ihre Rechenarbeit zeigen, um zu beweisen, wie Sie zur Antwort gekommen sind? Ich habe etwas gemacht, um uns zu helfen.
Wenn Sie diese Demo mit geöffneter Konsole betrachten, sehen Sie die Berechnungen, die in jeden Schritt der Kalkulation einfließen. Probieren Sie unsere beiden Beispiel-Farben aus, wie z. B. #1ABC9C und #888888.
Ich möchte einfach nur, dass meine Seite richtigen Kontrast hat, was mache ich?!
Es gibt eine Vielzahl von Ressourcen zur Barrierefreiheit, mit denen Sie Ihre Website überprüfen können. Hier ist eine Liste, die ich zusammengestellt habe, und hier auf CSS-Tricks gibt es eine weitere Liste.
Aber hier sind ein paar Tipps für den Anfang.
Identifizieren Sie zuerst Bereiche, die Ihren Barrierefreiheitsanforderungen nicht entsprechen.
Das WAVE-Tool für Barrierefreiheit ist ein guter Ausgangspunkt. Lassen Sie Ihre Website damit durchlaufen, und es liefert Ihnen Kontrollergebnisse und hilft, Problembereiche zu identifizieren.
Befolgen Sie die Vorschläge des Audits
Nutzen Sie Best Practices, um Ihre Punktzahlen zu verbessern und die Fehler zu beheben. Sobald Sie Kontrastfehler identifiziert haben, können Sie im WAVE-Tool verschiedene Optionen ausprobieren. Klicken Sie auf das Farbfeld, um einen Farbwähler zu öffnen. Spielen Sie dann herum, bis die Fehler verschwinden, und Sie wissen, was Sie in Ihrem Code ersetzen können.
Führen Sie den Test erneut durch
Auf diese Weise können Sie sicherstellen, dass Ihre Änderungen Dinge verbessert haben. Herzlichen Glückwunsch! Sie haben gerade Ihr Produkt für alle Benutzer verbessert, nicht nur für diejenigen, die von den Barrierefreiheitsproblemen betroffen sind!
Was als Nächstes kommt, liegt an Ihnen!
Sie können es sich einfacher machen und alle neuen Produkte mit dem Ziel beginnen, sie barrierefrei zu gestalten. Machen Sie die Richtlinien zur Barrierefreiheit zu einem Teil Ihrer Anforderungen sowohl für Technologie als auch für Design. Sie sparen sich potenziell Hunderte von Stunden bei der Fehlerbehebung und mögliche rechtliche Beschwerden. Websites der US-Regierung und des Bildungswesens sind zur Einhaltung verpflichtet, aber andere Branchen werden oft dafür belangt, dass sie ihre Websites nicht für alle Menschen gleichermaßen zugänglich machen.
Wenn Sie die Möglichkeit haben, sollten Sie etablierte und getestete Frameworks und Webbibliotheken (wie Bootstrap oder Googles Material Design) verwenden, die bereits optimale Kontrastthemenfarben gefunden haben. In vielen Fällen können Sie nur das nehmen, was Sie brauchen (z. B. nur das CSS) oder zumindest ihre Farbpaletten überprüfen, um Entscheidungen zu treffen. Sie sollten den Kontrast trotzdem überprüfen, denn während die meisten Standard-Textoptionen in einem Framework den WCAG-Vorschlägen für Kontrastverhältnisse entsprechen, tun dies Warn- und Nachrichtenstile möglicherweise nicht. (Ich schaue dich an, Bootstrap!)
Derek Kay hat eine Liste von Web-Frameworks mit Schwerpunkt auf Barrierefreiheit überprüft, die ich Ihnen empfehlen zu lesen, wenn Sie nach weiteren Optionen suchen. Das U.S. Web Design System zeigt eine Möglichkeit, Farb-/Kontrastprobleme mit seinem CSS-Token-System zu lösen, das Farben kennzeichnet, um Kontrastunterschiede super klar zu machen), aber sie verlinken auch zu mehreren sehr guten Ressourcen zur Verbesserung und zum Verständnis von Kontrast.
Wir haben uns hier tiefer eingearbeitet, als Sie es vielleicht jemals wissen müssen, aber das Verständnis, was ein Kontrastverhältnis ist und was es tatsächlich bedeutet, sollte Ihnen helfen, daran zu denken, den Kontrast im Auge zu behalten, wenn Sie zukünftige Websites, Webanwendungen und andere Software entwerfen.
Ein klareres Verständnis dafür, was das Kontrastverhältnis bedeutet, hilft mir zu erinnern, wen schlechter Kontrast beeinträchtigen kann und wie Web- und Mobilprodukte insgesamt verbessert werden können.
Ich bin nicht die ultimative Fachexpertin für Kontrast, nur ein sehr, sehr neugieriges Mädchen, das manchmal Probleme hat, Dinge im Web mit geringem Kontrast zu lesen.
Wenn Sie weitere Gedanken, Korrekturen oder weitere Recherchen zu teilen haben, hinterlassen Sie bitte einen Kommentar, und ich werde diesen Artikel ergänzen! Je vollständiger unser Verständnis der Bedürfnisse und Anforderungen unserer Websites ist, desto besser können wir Verbesserungen planen und letztendlich die Bedürfnisse unseres Publikums erfüllen.
Weiterführende Lektüre und Referenzen
- Wie das Web unleserlich wurde – Kevin Marks
- Verständnis der Gammakorrektur – Cambridge in Colour
- Mehr über Gammakorrektur erfahren – Science Direct
- Relative Luminanz – Wikipedia
- 1. Wellenlänge der maximalen menschlichen visuellen Empfindlichkeit Susan Zhao 2007
Zu Beginn des Beitrags wird vorgeschlagen, dass Sie eine Graustufenversion Ihres Designs verwenden können, um den Kontrast schnell visuell zu überprüfen und leicht übersehene Fehler zu erkennen.
Das funktioniert in der Praxis nicht.
Zum Beispiel hat Grün eine weitaus höhere Luminanz (~10x) als Blau, aber wenn beide in Grau umgewandelt werden, können sie gleich aussehen und einen falschen Eindruck über ihren relativen Kontrast vermitteln.
Das können Sie in der Mathematik sehen, die zur Ermittlung der Luminanz (
Y) einer Farbe im RGB-Farbraum verwendet wird:Y = 0.2126R + 0.7152G + 0.0722BDies ist die gleiche Formel wie weiter unten im Artikel, was dies mit der Gleichung und dem umgebenden Kontext impliziert. Ich denke, es gibt jedoch noch Raum für Verwirrung, und ich möchte den Punkt hervorheben, dass die Verwendung von Graustufen als Stellvertreter nicht ausreicht.
Guter Punkt!
Ich stimme Ihnen voll und ganz zu. Für Menschen mit unterschiedlichen Sehbedürfnissen kann eine einfache Graustufenüberprüfung nicht alle Probleme erkennen. Diese Praxis wurde im Web als Vorschlag erwähnt, aber ich persönlich vertraue immer eher auf tatsächliche Stichproben mit Kontrastprüfern als darauf.
Ich persönlich kann meinen Augen mit meiner Brillenstärke kaum trauen, aber sie erleichtern tatsächlich das Erkennen von Kontrastproblemen, da ich Schwierigkeiten habe, sie zu lesen. Das mag meine persönlichen Kontrastbedürfnisse etwas extremer machen als die aktuellen Best Practices. (Wir können also nicht den Wein vor mir auswählen. ;) ) Solange der fragliche Text die Metriken erfüllt, lasse ich es durchgehen.
Eine Graustufenversion einer Website ist nutzbar, aber die Graustufen müssen korrekt erstellt werden. Sie dürfen die RGB-Komponenten NICHT einfach addieren und mitteln, wie (R+G+B)/3.
Die sRGB-Werte müssen zuerst in relative Luminanz umgewandelt werden, dann linearisiert und dann zweitens die sRGB-Koeffizienten von R0.2126, G0.7152, B*0.0722 angewendet werden. Diese werden zur relativen Luminanz Y summiert.
Als Nächstes muss auf Y die sRGB-Gamma angewendet werden. Die "kurz und schmerzlos"-Methode ist, den Potenzkurvenexponenten ^0.455 anzuwenden, dann mit 255 zu multiplizieren und auf eine ganze Zahl zu runden, und dann diesen ganzzahligen Wert für alle drei Farben RʹGʹBʹ zu verwenden.
sRGBgrey = round(Y^0.455 * 255);
Das ist dann ein nützliches, genaues Graustufenbild. FWIW habe ich einen CVD-Simulator, der farbdefizientes Sehen zeigt, und auch ein richtiges Graustufenbild, mit dem Sie Screenshots Ihres Inhalts unter https://www.myndex.com/CVD/ verarbeiten können.
Leider berücksichtigen die WCAG-Bewertungen kein Umgebungslicht und keine Schriftstärke.
Der Ansatz, "Dinge zu optimieren, bis man gerade so die Schwelle überschreitet", führt oft zu zu geringem Kontrast.
Ein besserer Ansatz ist es, mit schwarzem Text auf weißem Hintergrund (oder umgekehrt im Dark Mode) zu beginnen und ihn nur dann einzufärben, wenn er etwas Spezifisches kommuniziert.
Die Delegation an Frameworks hilft nicht immer – die Standard-Linkfarbe von Bootstrap hat zum Beispiel zu geringen Kontrast.
Ich habe mehr darüber geschrieben: https://www.wired.com/2016/10/how-the-web-became-unreadable/
Ich stimme Ihnen zu, Kevin, und habe Ihren ausgezeichneten Artikel gelesen. :D Tatsächlich habe ich Ihren spezifischen Artikel erwähnt, als ich mit Chris über diesen sprach.
Ich denke, dass Umgebungslicht im Allgemeinen eher außerhalb der Verantwortung der Entwickler liegt, es sei denn, sie haben die vollständige Kontrolle/Kenntnis darüber, wo die Ausgabe ausgestrahlt wird.
Fernseher, Projektoren, Handgeräte in einem Fischerboot oder Stadion-Kiss-Cams haben alle erheblich unterschiedliche Kontrastanforderungen, die über die grundlegenden Standards hinausgehen.
Manchmal kann ein leises Wort mit Präsentatoren, deren Folien zu schwer (dünn/hell) zu lesen sind, zukünftige Präsentationen besser lesbar machen. Hoffentlich nehmen Entwickler Anpassungen vor, wenn sie Feedback zu ihrer Arbeit an verschiedenen Orten mit Umgebungslicht erhalten.
Ich habe Bootstrap ein wenig kritisiert, da es stimmt, dass nicht jeder Teil davon konform oder lesbar ist. Andere Frameworks können die gleiche partielle Konformität aufweisen. Wir können die Verantwortung dafür nicht abwälzen.
Ebenso können nicht alle automatisierten Testtools Opazitätsüberlagerungen und Hintergrundbilder hinter Textbereichen verstehen, was bedeutet, dass etwas zunächst konform sein mag, aber tatsächlich nicht lesbar ist. Wir müssen alle Produkte während der Entwicklung und beim Testen kritisch prüfen, um sicherzustellen, dass wir alle Zielgruppen erreichen können.
Aber! Wenn wir von einer Website ohne Kontrastunterstützung zu einer Website mit getestetem Kontrast wechseln und Entwickler, die beginnen, den Kontrast zu berücksichtigen... in den meisten Fällen werde ich das als Verbesserung bezeichnen.
Es fühlt sich an, als ob Kontrast eine Lektion ist, die wir immer wieder lehren müssen.
Hallo Kevin, interessant, dass Sie das erwähnen – die neue Kontrastmethode für WCAG 3 ist APCA, und Schriftstärke und Schriftgröße sind ein wichtiger Teil der neuen Richtlinie.
Die APCA-Mathematik selbst ist ebenfalls wahrnehmungsuniform.
Bitte erklären Sie die genaue Logik und die Berechnungen, die hinter der Verwendung von #2e2f3e anstelle von Schwarz für den Text auf DIESER Seite stecken!
Kleine Korrektur: Bei der Berechnung der relativen Luminanz verwenden Sie den Wert 0.03938 als Grenzwert für die Gammakorrektur. Die W3C-Formel gibt jedoch 0.03928 an.
Eigentlich sind beide falsch. Der IEC-Standard gibt 0.04045 als Schwellenwert an. Er ist seit Jahren im WCAG 2-Standard falsch. Er wurde nicht geändert, da in 8-Bit-sRGB buchstäblich kein Unterschied für die Luminanz im Kontext der Verhältnisberechnung besteht. Die Probleme mit der alten WCAG 2-Mathematik beruhen auf anderen Faktoren.