Farbzugänglichkeits-Prüfung
Geben Sie eine Vordergrund- und Hintergrundfarbe (Hex-Codes) ein, um ihr Kontrastverhältnis und ihre WCAG-Konformität zu prüfen.
Dies ist großer, fetter Text.
Dies ist normal großer Text.
21.00:1
Kontrastverhältnis
Normaler Text (AA)
Großer Text (AA)
18pt+ or 14pt+ bold
UI-Komponenten (AA)
Buttons, form controls, etc.
Level AA (minimum required for accessibility compliance):
• Normal Text: Contrast ratio of at least 4.5:1
• Large Text: Contrast ratio of at least 3:1
• UI Components: Contrast ratio of at least 3:1
Level AAA (enhanced accessibility):
• Normal Text: Contrast ratio of at least 7:1
• Large Text: Contrast ratio of at least 4.5:1
Notes:
• "Large Text" is defined as 18pt or 14pt bold and above
• Logos and decorative elements have no minimum contrast requirement
• Text over images or gradients should be evaluated throughout the image
So verwenden Sie Farbzugänglichkeits-Prüfung
- 1
Zwei Farben eingeben
Geben Sie eine Vordergrundfarbe (Text) und eine Hintergrundfarbe als Hex-Codes an, zum Beispiel #1a1a1a und #ffffff.
- 2
Kontrast prüfen
Klicken Sie auf „Barrierefreiheit prüfen“, um das Kontrastverhältnis zwischen den beiden Farben zu berechnen.
- 3
WCAG-Ergebnisse prüfen
Sehen Sie Bestanden- oder Nicht-bestanden-Kennzeichnungen für AA und AAA bei normalem Text, großem Text und UI-Komponenten und betrachten Sie die Live-Vorschau.
- 4
Bei Bedarf anpassen
Tauschen Sie die Farben oder passen Sie einen Hex-Wert an, bis die Kombination die von Ihrem Projekt geforderte WCAG-Stufe erfüllt.
WCAG-Farbkontrast, verständlich erklärt
Was das Kontrastverhältnis bedeutet
Farbkontrast wird als Verhältnis zwischen der helleren und der dunkleren zweier Farben ausgedrückt und reicht von 1:1 bis 21:1. Ein Verhältnis von 1:1 bedeutet, dass die beiden Farben identisch sind, sodass Text vor seinem Hintergrund vollständig unsichtbar wäre, während 21:1 das Maximum ist, der Kontrast zwischen reinem Schwarz und reinem Weiß. Jede andere Kombination liegt irgendwo dazwischen. Beim Verhältnis geht es nicht darum, welche Farben Sie verwendet haben oder wie unterschiedlich ihre Farbtöne sind; es geht ausschließlich um ihren Helligkeitsunterschied, weshalb zwei Farben, die für Sie deutlich verschieden aussehen, dennoch durchfallen können.
Diese eine Zahl ist das Rückgrat barrierefreier Farbgestaltung, denn sie sagt voraus, ob Text für die größtmögliche Bandbreite an Menschen und Bedingungen lesbar sein wird. Der Checker berechnet sie für jedes von Ihnen eingegebene Vordergrund-Hintergrund-Paar und vergleicht das Ergebnis mit den veröffentlichten Schwellenwerten.
Die AA-Schwellenwerte, die Sie erreichen müssen
WCAG-Stufe AA ist die Messlatte, die die meisten Websites anstreben und auf die sich viele Gesetze zur Barrierefreiheit und Beschaffungsregeln beziehen, behandeln Sie sie also als Ihre Grundlinie. AA verlangt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Fließtext und mindestens 3:1 für großen Text. Diese beiden Zahlen decken den Großteil der alltäglichen Gestaltungsentscheidungen ab, und die Kennzeichnungen in diesem Tool sagen Ihnen sofort, ob eine gegebene Kombination jede davon erreicht.
Wenn eine Kombination AA sowohl für normalen als auch für großen Text besteht, haben Sie eine solide, vertretbare Grundlage. Wenn sie bei normalem Text durchfällt, aber bei großem besteht, können Sie sie dennoch verwenden, aber nur in großen Schriftgrößen – eine Einschränkung, über die es sich lohnt, bewusst zu entscheiden, statt sie später zu entdecken.
AAA und was großer Text bedeutet
Stufe AAA ist die erweiterte Stufe, gedacht für maximale Lesbarkeit, und sie hebt die Anforderung auf 7:1 für normalen Text und 4,5:1 für großen Text an. AAA wird für ganze Websites nicht erwartet und ist für Markenpaletten oft unpraktisch, doch es ist ein lohnendes Ziel für langes Lesen, für kritische Inhalte und für Zielgruppen mit eingeschränktem Sehvermögen. Der Checker meldet AAA neben AA, sodass Sie sehen, wie viel Spielraum eine Kombination hat.
Großer Text hat eine genaue Definition, die Menschen überrascht: Er bedeutet etwa 18 pt und größer oder 14 pt und größer, wenn fett, was ungefähr 24 px normal oder 18,66 px fett entspricht. Der Grund, warum der Schwellenwert niedriger ist, liegt schlicht darin, dass größere, kräftigere Buchstabenformen auch bei geringerem Kontrast lesbar bleiben. Alles unterhalb dieser Grenze muss das strengere Verhältnis für normalen Text erfüllen, gehen Sie also nicht davon aus, dass eine groß wirkende Überschrift dafür qualifiziert ist, ohne die tatsächliche Größe und Schriftstärke zu prüfen.
Warum Kontrast für echte Nutzer wichtig ist
Ausreichender Kontrast ist keine Pflichtübung zum Abhaken; er entscheidet darüber, ob echte Menschen Ihre Oberfläche nutzen können. Nutzer mit eingeschränktem Sehvermögen, das mit dem Alter häufiger wird, sind unmittelbar darauf angewiesen, und ebenso jeder, der einen Bildschirm in hellem Sonnenlicht, auf einem dunklen oder billigen Display oder in müdem Zustand liest. Kontrast wirkt außerdem mit Farbfehlsichtigkeit zusammen: Weil das Verhältnis auf Helligkeit statt auf Farbton beruht, kann eine Kombination, die von einem Unterschied zwischen Rot und Grün abhängt, für jemanden zusammenbrechen, der diese Farbtöne nicht unterscheiden kann, während ein starker Helligkeitsunterschied weiterhin lesbar bleibt.
Dieser letzte Punkt zieht eine Folgerung nach sich, die es wert ist, klar ausgesprochen zu werden: Verlassen Sie sich niemals allein auf Farbe, um Bedeutung zu vermitteln. Kombinieren Sie Farbe mit Text, Symbolen, Unterstreichungen oder Form, damit Information sowohl geringen Kontrast als auch Farbenblindheit übersteht.
Wie das Verhältnis berechnet wird
Die Mathematik hinter der Kennzeichnung beginnt mit der relativen Luminanz, einem Maß dafür, wie hell jede Farbe für das menschliche Auge erscheint. Sie ist kein einfacher Durchschnitt der Rot-, Grün- und Blaukanäle, denn das Auge ist für Grün weit empfindlicher als für Blau, sodass Grün am stärksten und Blau am schwächsten gewichtet wird. Jeder Kanal wird außerdem zuerst durch eine kleine Gammakorrektur geleitet, damit das Ergebnis der Wahrnehmung folgt und nicht dem rohen Signal.
Sobald beide Farben einen Luminanzwert haben, ist das Kontrastverhältnis die hellere Luminanz plus eine kleine Konstante, geteilt durch die dunklere Luminanz plus dieselbe Konstante. Die Konstante hält die Formel nahe Schwarz gutartig. Sie müssen das nicht von Hand ausrechnen, aber zu wissen, dass die Luminanz und nicht der Farbton das Ergebnis bestimmt, erklärt, warum es nicht genügt, einfach Farben zu wählen, die unterschiedlich aussehen.
Kontrast bei Nicht-Text und UI-Elementen
Kontrastregeln beschränken sich nicht auf Text. WCAG legt außerdem ein Minimum von 3:1 für die sichtbaren Begrenzungen interaktiver Komponenten und bedeutungstragender Grafiken fest – was der Checker unter UI-Komponenten kennzeichnet. Das umfasst den Rand eines Texteingabefelds, die Umrisslinie einer Schaltfläche, das Häkchen in einem Kontrollkästchen, Fokusindikatoren und die Teile eines Symbols oder Diagramms, die ein Nutzer wahrnehmen muss, um es zu verstehen. Ein blasser grauer Eingabefeldrand auf einer weißen Karte ist ein klassischer Verstoß gegen diese Regel, selbst wenn der Beschriftungstext darin mühelos besteht.
Steuerelemente so zu gestalten, dass sie gegenüber ihrer Umgebung 3:1 erreichen, bedeutet, dass Menschen sie tatsächlich finden und bedienen können, nicht nur die Wörter daneben lesen. Prüfen Sie die Ränder und Zustände der Komponente, nicht nur ihren Text.
Häufige Fehler und wie man sie behebt
Einige Muster fallen immer wieder durch. Hellgrauer Platzhalter- oder Sekundärtext auf Weiß ist der häufigste; Werte wie ein mittleres Grau nahe #999999 auf Weiß liegen unter 4,5:1 und müssen abgedunkelt werden. Markenfarben sind ein weiterer Wiederholungstäter, besonders mitteltönige Blau-, Grün- und Orangetöne, die für Fließtext oder für weißen Text auf einer farbigen Schaltfläche verwendet werden, wo die Kombination oft knapp unter AA landet. Dünne helle Ränder auf hellen Hintergründen verfehlen den 3:1-UI-Schwellenwert ebenfalls regelmäßig.
Die Korrekturen sind meist klein. Dunkeln Sie den Vordergrund ab oder hellen Sie den Hintergrund auf, bis das Verhältnis die Linie überschreitet, was in HSL-Begriffen oft bedeutet, die Helligkeit um einen moderaten Betrag anzupassen und dabei den Farbton beizubehalten, sodass die Marke weiterhin erkennbar bleibt. Für Text auf einem unruhigen Bild oder Verlauf fügen Sie eine deckende oder halbtransparente Abdunkelung dahinter ein, sodass selbst der ungünstigste Bereich noch besteht. Geben Sie hier Ihre echten Farben ein, beobachten Sie, wie sich das Verhältnis und die AA- und AAA-Kennzeichnungen aktualisieren, und justieren Sie die Werte, bis jede von Ihrem Projekt geforderte Stufe grün wird.
Häufig gestellte Fragen
Was ist ein Kontrastverhältnis und was gilt als gut?
Was ist der Unterschied zwischen AA und AAA?
Warum besteht großer Text, während normaler Text durchfällt?
Welches Farbformat sollte ich eingeben?
Ist der Checker kostenlos und sendet er meine Farben irgendwohin?
Verwandte Tools
Machen Sie weiter mit diesen praktischen Tools