Der erste Barrierefreiheitsfehler, den ich jemals versendet habe, war ein hellgrauer Zeitstempel auf einer weißen Karte. In Figma sah es elegant aus, auf meinem kalibrierten Monitor sah es gut aus und es war für einen Kunden völlig unsichtbar, E-Mails auf seinem Telefon in einem geparkten Auto zu lesen. Er war nicht sehbehindert. Es war nur Sonnenlicht. Dieses einzelne Support-Ticket hat mir etwas beigebracht, das das Design-Modell niemals könnte: Kontrast ist keine Geschmackssache, es ist eine messbare Eigenschaft, und wenn Sie es nicht messen, senden Sie es.
Seitdem habe ich die gebaut Farbkontrast-Checker Auf toolz.dev regeln kabelgebundene Kontrastregeln in die Design-Token für WP Adminify und auditierten mehr React-Komponenten, als ich zählen möchte. Dieser Leitfaden ist die Version dieser Erfahrung, von der ich mir wünschte, jemand hätte mir zu Beginn übergeben. Es wird erklärt, was das Kontrastverhältnis tatsächlich ist, wie die Zahl berechnet wird, was die WCAG-Schwellenwerte bedeuten und wie man ein fehlerhaftes Farbpaar behebt, ohne dass Ihre Markenpalette weggeworfen wird.
tl; dr: Der WCAG-Kontrast ist ein Verhältnis von 1:1 bis 21:1, basierend auf der relativen Leuchtdichte zweier Farben. Für normalen Text benötigen Sie mindestens 4,5: 1, um AA und 7: 1 zu übergeben, um AAA zu übergeben. Großer Text (ca. 24px oder 18.66px fett) fällt auf 3:1 für AA und 4,5:1 für AAA. nicht -Text-UI wie Symbole und Eingabegrenzen 3:1. Messen Sie jedes Text-auf-Hintergrund-Paar, behandeln Sie AA als Passleiste und lassen Sie das Werkzeug eine vorübergehende Farbe vorschlagen, wenn Sie zu kurz kommen.
Warum ist der Farbkontrast so wichtig?
Kontrast ist der häufigste Zugriff auf die Zugriffshilfe im Web. Jahr für Jahr stellen automatisierte Audits der Top-Millionen-Homepages fest, dass kontrastreicher Text die häufigste Verletzung der WCAG ist. Es ist auch dasjenige, das die meisten Menschen betrifft, da es nicht nur Benutzer betrifft, die blind registriert sind. Es geht um jeden mit einer verminderten Sehkraft, jeden mit einer gemeinsamen Erkrankung wie Katarakten, jemanden, der ein billiges Display benutzt, jeder in einem hellen Raum und jeder von uns, wenn die Sonne auf den Bildschirm trifft.
Es gibt auch einen Geschäftswinkel, und ich werde nicht so tun, als ob ich etwas anderes vorbeugen werde. Das Barrierefreiheitsgesetz bezieht sich jetzt direkt auf die WCAG in vielen Regionen, was bedeutet, dass eine unzugängliche Schnittstelle eine rechtliche Exposition ist, nicht nur ein Höflichkeitsproblem. Aber der Grund, warum ich mich darum kümmere und der Grund, warum ich ein spezielles Tool dafür gebaut habe, ist einfacher. Text, den die Leute nicht lesen können, ist Text, der bei seiner einzigen Arbeit fehlgeschlagen ist. Eine wunderschöne Schnittstelle, die niemand verwenden kann, ist keine Designerfolge.
Die Falle ist, dass unsere Augen unzuverlässige Erzähler sind. Wir passen uns an unsere eigenen Bildschirme an, wir wissen, was der Text sagen soll, damit unser Gehirn ihn ausfüllt, und wir betrachten Designs unter idealen Bedingungen. Das Kontrastverhältnis entfernt all das. Es gibt Ihnen eine Nummer, die sich nicht um Ihren Monitor oder Ihre Erwartungen kümmert.
Was genau ist ein Kontrastverhältnis?
Das Kontrastverhältnis ist ein Vergleich der relativen Leuchtdichte von zwei Farben: Ihrem Vordergrund (normalerweise Text) und Ihrem Hintergrund. Die relative Leuchtdichte ist ein Maß dafür, wie viel Licht eine Farbe emittiert oder reflektiert, gewichtet, wie das menschliche Auge tatsächlich Rot, Grün und Blau wahrnimmt. Grün trägt am meisten zur wahrgenommenen Helligkeit bei, am wenigsten blau, weshalb reiner blauer Text auf Schwarz so viel schwerer zu lesen ist als reines Grün.
Das Verhältnis selbst wird von WCAG definiert als:
(L1 + 0.05) / (L2 + 0.05)
wohin L1 ist die relative Leuchtdichte der helleren Farbe und L2 ist das des dunkleren. der 0.05 Begriffe Modell Ambiente, der vom Bildschirm reflektiert wird, weshalb die Skala nie ganz unendlich ist. Identische Farben erzeugen ein Verhältnis von genau 1:1. Reiner schwarzer Text auf reinem Weiß ergibt das Maximum von 21:1. Alles Reale lebt zwischen diesen beiden Extremen.
Das Wichtigste zu verinnerlichen ist, dass das Verhältnis nicht linear ist, wie "andere" zwei Farben im Farbton gesehen aussehen. Zwei Farben können in ihrem Farbton - zum Beispiel ein gesättigtes Rot und ein gesättigtes Grün - sehr unterschiedlich sein und haben immer noch fast die gleiche Leuchtdichte, was sie zu einem Albtraum für die Lesbarkeit macht, obwohl sie heftig aufeinander treffen. Kontrast ist ein Unterschied der Helligkeit, nicht der Farbunterschied. Genau deshalb kann man es nicht sehen und warum Farbkontrast-Checker Konvertiert beide Farben in Luminanz, bevor Sie einen Vergleich durchführen.
Wie wird die Zahl tatsächlich berechnet?
Wenn Sie das Tool verstehen möchten, anstatt es nur zu vertrauen, finden Sie hier die vollständige Pipeline, die genau den WCAG 2.2-Definitionen folgt.
Zunächst wird jeder Farbkanal vom Bereich von 0–255 auf 0–1 normalisiert. Dann wird jeder Kanal linearisiert, um die sRGB-Gamma-Kurve rückgängig zu machen. Die Formel wendet ein kleines lineares Segment für sehr dunkle Werte und eine Leistungskurve für den Rest an:
c_linear = c / 12.92 if c <= 0.03928
c_linear = ((c + 0.055) / 1.055) ^ 2.4 otherwise
Als nächstes werden die drei linearisierten Kanäle mit den Luminanzkoeffizienten kombiniert, die die menschliche Wahrnehmung widerspiegeln:
L = 0.2126 * R + 0.7152 * G + 0.0722 * B
Diese Gewichte sind nicht willkürlich. Sie kommen aus der Art und Weise, wie die Kegelzellen der Augen auf verschiedene Wellenlängen reagieren, und deshalb dominiert Grün. Schließlich werden die beiden Luminanzwerte in die oben genannte Verhältnisformel eingesteckt, wobei die leichtere oben ist.
Es gibt eine Subtilität, die Menschen aufregt, und es ist Transparenz. Ein Kontrastverhältnis ist nur zwischen zwei undurchsichtigen Farben sinnvoll, da das reale Aussehen einer halbtransparenten Farbe davon abhängt, was dahinter sitzt. Wenn Ihre Textfarbe einen Alpha-Wert hat, können Sie sie nicht direkt messen. Der richtige Ansatz und derjenige, den das Werkzeug annimmt, besteht darin, den durchscheinenden Vordergrund über den Hintergrund zu vermischen, indem Sie zuerst die Standard-Quell-Over-Mischung verwenden und dann das Verhältnis gegen das abgeflachte Ergebnis messen. Dies entspricht eher dem, was ein Benutzer sieht, als der Farbe, die Sie nominell einstellen.
Welche WCAG-Schwellenwerte muss ich erreichen?
Die WCAG definiert Kontrastanforderungen auf zwei Konformitätsstufen und für drei breite Inhaltstypen. Hier ist das ganze Bild an einem Ort.
| Inhaltstyp | AA Minimum | AAA-Minimum |
|---|---|---|
| Normaler Text (unter ~24px) | 4.5:1 | 7: 1 |
| Großer Text (~24px oder ~18.66px fett) | 3: 1 | 4.5:1 |
| UI-Komponenten und Grafiken | 3: 1 | 3: 1 (keine separate AAA) |
| Logos und zufälliger Text | befreien | befreien |
Ein paar Hinweise aus der Anwendung dieser Tabelle. "Großer Text" wird durch die gerenderte Größe definiert, nicht durch die Bedeutung des Textes. Der Schwellenwert beträgt 18 Punkte für reguläres Gewicht und 14 Punkte Fettdruck, was ungefähr 24 Pixel und 18,66 Pixel entspricht. Alles an oder darüber bekommt den entspannten 3: 1-Balken für AA, da größere Buchstabenformen bei geringerem Kontrast lesbar bleiben.
Die UI-Komponentenregel ist das Erfolgskriterium 1.4.11, und es ist das, was Teams am häufigsten vergessen. Es heißt die visuelle Begrenzung einer interaktiven Komponente - die Grenze einer Texteingabe, die Umrisse einer Schaltfläche, die Form eines Symbols, das Bedeutung vermittelt - braucht 3: 1 gegen seine Umgebung. Ein Formular voller AA-übergebender Beschriftungstexte mit unsichtbaren Eingabegrenzen schlägt immer noch fehl, und genau das habe ich in der Produktion mehr als einmal gesehen.
Schließlich sind dekorativer Text, deaktivierte Steuerelemente und Logos ausgenommen. Diese Ausnahme ist eng. Ein ausgegrauter Knopf ist in Ordnung, ein kontrastreicher Absatz, den Sie als "sekundär" bezeichnet haben, ist nicht.
Wie verwende ich den Farbkontrast-Checker?
Der Workflow, den ich täglich benutze, dauert ungefähr zehn Sekunden pro Paar. Öffne das Farbkontrast-Checker und geben Sie Ihre Textfarbe in das erste Feld ein. Sie können jedes Format einfügen - ein sechsstelliges Hex wie #4b5563, ein achtstelliges Hex mit Alpha, ein rgb() oder rgba() String, ein hsl() Wert oder ein einfaches CSS-Schlüsselwort wie navydrohen Das Tool normalisiert, was Sie geben, sodass Sie Formate zwischen den beiden Feldern frei mischen können.
Geben Sie Ihre Hintergrundfarbe in das zweite Feld ein. Sobald beide gültig sind, wird das genaue Verhältnis neben einer Live-Sample von Large-, Normal- und Untertiteltext angezeigt, die auf Ihrem tatsächlichen Hintergrund wiedergegeben werden. Diese Vorschau ist wichtig. Die Zahl sagt Ihnen, ob es passiert, aber echte Wörter auf der realen Farbe sehen, ob es bequem ist, was eine höhere Maßnahme als nur legal ist.
Unterhalb des Verhältnisses erhalten Sie ein Raster von Pass- und Fail-Badges: AA und AAA für normalen und großen Text sowie den 3: 1-UI-Komponenten-Check. Wenn eine Kombination fehlschlägt, bietet das Tool einen Ein-Klick-Fix. Es geht Ihrer Textfarbe heller oder dunkler im HSL-Raum - unter Beibehaltung des von Ihnen gewählten Farbtons und der Sättigung -, bis das Zielverhältnis gelöscht wird, und gibt Ihnen dann einen Passwert, den Sie direkt in Ihr Stylesheet kopieren können. Dieser letzte Teil ist der Unterschied zwischen einem Checker, der Sie schimpft, und einem, der tatsächlich hilft: Es hält Ihren Markenton intakt und bewegt die Leichtigkeit nur um das erforderliche Minimum.
Alles läuft lokal in Ihrem Browser. Keine Farben, Paletten oder unveröffentlichte Markenwerte verlassen Ihr Gerät, was wichtig ist, wenn Sie das Designsystem eines Kunden vor dem Start prüfen. Es ist der gleiche Datenschutz-Ansatz, den ich für jedes Tool auf der Website verwende, und ich habe darüber geschrieben, warum diese Architektur in der Datenschutz-Leitfadendrohen
Häufige Anwendungsfälle aus realen Projekten
Auditing eines Designsystems
Wenn ich Farb-Token für ein neues Projekt einrichte, überprüfe ich jede semantische Paarung, bevor eine einzelne Komponente ausgeliefert wird: Primärtext auf dem Hintergrund, gedämpfter Text auf dem Hintergrund, Text auf Primär, Text auf Karte, Text bei jeder Alarmvariante. Ein einmal fehlgeschlagener Token schlägt überall dort fehl, so dass es auf Token-Ebene enorm billiger ist, als es pro Komponente zu fangen. Ich halte eine einfache Checkliste und führe jedes Paar durch den Checker, um das Verhältnis neben dem Tokennamen aufzunehmen.
Rettung einer Markenfarbe, die "muss" verwendet werden muss
Marketing gibt Ihnen eine Marke blau und sagt, dass die Knöpfe es verwenden müssen. Sie testen weißen Text darauf und erhalten 3,1: 1 - gut für großen Text, bei einem Button-Etikett mit normaler Größe fehlschlagen. Sie haben drei ehrliche Optionen: das Markenblau leicht für interaktive Oberflächen abdunkeln, ein größeres oder fetteres Etikett verwenden, damit der 3:1-Schwellenwert gilt, oder schalten Sie das Etikett auf eine dunklere Farbe, wenn die Taste hell ist. Das Tool "Vorschlag" findet den nächsten Passschirm, sodass Sie eine konkrete, minimale Änderung und nicht eine flache "Nein" anzeigen können.
Überprüfen von Platzhalter und Helfertext
Platzhaltertext ist ein Wiederholungstäter, da Browser ihn standardmäßig mit reduzierter Deckkraft wiedergeben und Designer dann ein bereits helles Grau auswählen. Denken Sie daran, das zusammengesetzte Ergebnis zu testen, nicht die Nennfarbe. Das Alpha-Compositing des Checkers erledigt dies für Sie: Geben Sie die Platzhalterfarbe mit ihrer tatsächlichen Deckkraft über dem Eingabehintergrund ein und lesen Sie das wahre Verhältnis ab.
Überprüfen der Sichtbarkeit des Symbols und der Grenze
Für die 1.4.11-UI-Prüfung teste ich das Symbol oder die Randfarbe gegen das, was sich unmittelbar dahinter befindet. Ein grauer Teiler auf einer weißen Karte, ein Chevron auf einem farbigen Kopf, der Fokusring gegen das Feld - all dies braucht 3: 1. Es ist ein schneller Check, der das "Alles ist technisch da" fängt, aber ich kann nichts davon sehen "-Bug-Klasse.
Wie ist dies im Vergleich dazu, nur die integrierte Schecks eines Design-Tools zu verwenden?
Designtools haben Kontrastindikatoren hinzugefügt, und Browser-Entwickler-Tools zeigen ein Verhältnis in der Farbauswahl. Eine faire Frage ist daher, warum nach einem speziellen Werkzeug überhaupt greifen. Hier ist mein ehrlicher Vergleich.
| heraufkommen | Stärke | Beschränkung |
|---|---|---|
| Dedizierter Kontrast-Checker | Exaktes Verhältnis, alle Schwellenwerte, Alpha-Compositing, Pass-Farbvorschläge, funktioniert auf jeder Farbfolge | Sie fügen Farben manuell ein |
| Plugin für Design-Tools | Inline mit Ihrer Zeichenfläche | Oft ungefähre, kann Alpha ignorieren, an diese App gebunden |
| Browser-Entwickler-Tool | Überprüft die Live-Rendered-Seite | Ein Paar nach dem anderen, keine Vorschläge, erfordert, dass die Seite zuerst existiert |
| Augen auf | echt | falsch, ständig |
Das dedizierte Tool gewinnt, wenn Sie an Werten und nicht mit einer gerenderten Seite arbeiten - Token überprüfen, Spezifikationen überprüfen oder einen gemeldeten Fehler beheben - und wann immer Sie eine vorübergehende Alternative und nicht nur ein Urteil benötigen. Die Browser-Entwickler-Tools sind besser, sobald die Seite vorhanden ist und Sie überprüfen möchten, was tatsächlich versendet wurde. Ich benutze beides in verschiedenen Phasen.
Erweiterte Notizen für Teams, die sich darum kümmern
Ein paar Dinge, die ich gelernt habe, die über die Grundlagen hinausgehen. Erstens ist Kontrast notwendig, aber nicht ausreichend. Das Übergeben von 4.5:1 beseitigt eine Barriere, es macht keine Schnittstelle für sich allein zugänglich. Sie benötigen immer noch sichtbare Fokuszustände, Sie müssen immer noch die Bedeutung von Bedeutung durch Farbe vermeiden und Sie benötigen immer noch echte Tests mit echter Unterstützungstechnologie. Behandeln Sie das Verhältnis als Boden, nicht als Ziellinie.
Zweitens ist der Dunkelmodus nicht kostenlos. Eine Palette, die im Lichtmodus läuft, kann im Dunkelmodus fehlschlagen, da die Luminanzbeziehungen invertiert sind. Überprüfen Sie beide Themen. Der Checker-Dark-Background-Vorschau-Toggle existiert genau, weil ich es immer wieder vergessen habe.
Drittens seien Sie vorsichtig mit "nah genug". Ein Verhältnis von 4,48: 1 ist ein Fehlschlag, kein Rundungssieg. Bildschirme variieren, Benutzer variieren und der Schwellenwert ist aus einem bestimmten Grund eingearbeitet. Wenn Sie grenzwertig sind, gehen Sie daran vorbei.
Wenn Sie ein breiteres Toolkit zusammenstellen, wird die Leitfaden für Webentwickler-Toolkit Beinhaltet, wie Kontrast zu den anderen Automatisierungsprüfungen passt. Und sobald Ihre Farben vorbei sind, Werkzeuge wie die Gradientengenerator und Farbpflücker Helfen Sie Ihnen, den Rest der Palette auf einem bereits verifizierten Fundament zu erstellen. Wenn Sie auch Seitenmetadaten und soziale Vorschauen generieren, wird die Meta-Tag-Generator Paare gut im selben Vor-Launch-Pass.
FAQ
Was ist ein gutes Farbkontrastverhältnis?
Für normalen Text, sollte mindestens 4,5:1 an WCAG AA und 7:1 erreicht werden, um das strengere AAA-Niveau zu erreichen. Großer Text, der etwa 24px oder 18.66px fett bedeutet, benötigt nur 3:1 für AA und 4,5:1 für AAA. Icons und interaktive UI-Komponenten benötigen mindestens 3:1 gegenüber ihrer Umgebung.
Was zählt als großer Text unter WCAG?
Großer Text ist mindestens 18 pt, ungefähr 24 Pixel, für normales Gewicht oder mindestens 14 Punkte, ungefähr 18,66 Pixel, wenn er fett gedruckt ist. Text bei oder über dieser Größe ist für die entspannte 3: 1-AA-Schwelle geeignet, da größere Buchstabenformen bei geringerem Kontrast als kleine lesbar bleiben.
Was ist der Unterschied zwischen WCAG AA und AAA?
AA ist die Ebene, die die meisten Gesetze und Organisationen ansprechen und erfordert 4,5: 1 für normalen Text. AAA ist das verbesserte Level und erfordert 7: 1, das für Benutzer mit Sehbehinderung geeignet ist, aber über eine ganze Palette schwer zu erreichen ist. Die meisten Teams behandeln AA als Passleiste und AAA als Anspruch auf kritische Leseinhalte.
Wie wird das Kontrastverhältnis berechnet?
Jede Farbe wird in ihre relative WCAG-Luminanz umgewandelt, ein gammakorrigiertes und wahrnehmungsgewichtetes Maß für die Helligkeit. Das Verhältnis wird (l_lighter + 0,05) geteilt durch (l_darker + 0,05) und ergibt einen Wert von 1:1 für identische Farben bis 21:1 für reines Schwarz auf reinem Weiß.
Beeinflusst Transparenz das Kontrastergebnis?
Ja. Eine halbtransparente Textfarbe lässt den Hintergrund durchscheinen, der seine effektive Farbe ändert. Die richtige Methode besteht darin, den durchscheinenden Vordergrund zuerst über dem Hintergrund zu vereinen und dann das Verhältnis zu messen, damit die Punktzahl eher das, was ein Benutzer sieht, als die von Ihnen festgelegte nominelle Farbe widerspiegelt.
Warum geht mein Text in großer Größe, schlägt aber bei normaler Größe fehl?
Die Schwellenwerte unterscheiden sich. Normaler Text benötigt 4,5: 1 für AA, während großer Text nur 3: 1 benötigt, sodass ein Verhältnis zwischen 3 und 4,5 für Überschriften fehlschlägt, aber bei der Körperkopie fehlschlägt. Erhöhen Sie entweder den Kontrast für den Körpertext oder stellen Sie sicher, dass die Paarung nur bei großen Größen verwendet wird, bei denen die entspannte Schwelle gilt.
Reicht ein Pass-Kontrast-Verhältnis für die Zugänglichkeit aus?
kein . Kontrast ist notwendig, aber nicht ausreichend. Sie benötigen auch sichtbare Fokuszustände, Sie müssen die Bedeutung nicht nur durch Farbe vermitteln, und Sie sollten mit echtem Inhalt und unterstützender Technologie testen. Das Übergeben des Verhältnisses entfernt eine gemeinsame Barriere, macht aber keine Schnittstelle zugänglich.
Sendet der Farbkontrast-Checker meine Farben überall?
kein drohen Alle Parsing und Mathematik werden lokal in Ihrem Browser mit Javascript ausgeführt. Es werden keine Farbwerte, Markenpaletten oder Screenshots hochgeladen oder gespeichert, und das Tool funktioniert nach dem Laden der Seite weiterhin ohne Netzwerkverbindung.