Farbkontrast-Prüfer

So verwenden Sie den Farbkontrast-Prüfer

1. 1. Geben Sie die beiden Farben ein. Tippen Sie jede als HEX (#777777), rgb(), hsl() oder als CSS-Namen ein, oder nutzen Sie die Farbauswahl. Tauschen vertauscht sie, was praktisch ist, um Hell-auf-dunkel- und Dunkel-auf-hell-Versionen zu prüfen.
2. 2. Lesen Sie das Verhältnis und die Tabelle ab. Das Verhältnis reicht von 1:1 (identische Farben) bis 21:1 (Schwarz auf Weiß). Die Tabelle vergleicht es mit jeder WCAG-Anforderung und zeigt Bestanden oder Nicht bestanden in Worten, nicht nur durch Farbe.
3. 3. Legen Sie die Größe fest. Großer Text hat niedrigere Anforderungen. Die Vorschau zeigt normalen Text, großen Text, fetten großen Text und ein umrahmtes Steuerelement, damit Sie Ihren eigenen Fall beurteilen können.
4. 4. Korrigieren Sie ein nicht bestandenes Paar. Wählen Sie das Niveau, das Sie anstreben, und verwenden Sie die vorgeschlagene Textfarbe oder Hintergrundfarbe. Das Werkzeug behält den Farbton bei und ändert nur die Helligkeit, und zwar um den kleinsten Schritt, der besteht.

Was WCAG 2.2 verlangt

Die Web Content Accessibility Guidelines (WCAG) 2.2 legen in drei Erfolgskriterien Mindestkontrastverhältnisse fest. Das Verhältnis ist (L₁ + 0,05) ÷ (L₂ + 0,05), wobei L₁ die relative Luminanz der helleren Farbe und L₂ die der dunkleren ist.

Großer Text hat mindestens 18 pt oder 14 pt fett – 24 px bzw. etwa 18,7 px auf einem Bildschirm mit 96 dpi. Logos, rein dekorativer Text und inaktive Steuerelemente sind von 1.4.3 ausgenommen. Die 3:1-Regel in 1.4.11 gilt für die Teile eines Steuerelements, die man zum Auffinden braucht (der Rand einer Schaltfläche, der Umriss eines Kontrollkästchens), für seine Zustände wie den Fokus und für die Grafiken, die ein Leser braucht, um den Inhalt zu verstehen, etwa die Linien in einem Diagramm.

So wird das Verhältnis berechnet

Jeder sRGB-Kanal wird auf 0–1 skaliert und linearisiert: c ÷ 12,92, wenn c ≤ 0,04045 ist, sonst ((c + 0,055) ÷ 1,055)^2,4. Die relative Luminanz ist dann 0,2126 R + 0,7152 G + 0,0722 B. Grün zählt am meisten, weil das Auge darauf am empfindlichsten reagiert.

WCAG rundet nicht: Ein Verhältnis von 4,4999 besteht 4,5 nicht. Der Prüfer zeigt das Verhältnis deshalb auf zwei Dezimalstellen abgerundet an, sodass ein knapper Verfehler nie als Bestehen erscheint.

Folien, Poster und Abbildungen prüfen

• Folien und Poster sind keine Webseiten, aber die WCAG-Verhältnisse sind auch für sie der anerkannte Maßstab. Fließtext auf einer Folie ist meist groß (24 px entsprechen 18 pt); Bildunterschriften, Fußnoten und Achsenbeschriftungen sind es nicht, prüfen Sie sie daher als normalen Text.
• Zielen Sie für die Projektion über dem Minimum. Ein Beamer in einem hellen Raum senkt den Kontrast für alle. Wählen Sie AAA (7:1) für Text auf einer Folie, die Sie in einem hellen Raum zeigen.
• Text über einem Foto oder Verlauf hat keinen einheitlichen Hintergrund. Prüfen Sie die hellsten und dunkelsten Bereiche hinter dem Text oder setzen Sie den Text auf eine einfarbige Fläche.
• Diagramme und Abbildungen fallen unter 1.4.11: Linien, Balken und Markierungen brauchen 3:1 gegenüber dem Hintergrund. Farbe allein sollte die Bedeutung nicht tragen – siehe den Farbsehschwäche-Simulator.
• Transparente Farben werden vor der Messung geglättet: Der Hintergrund wird über Weiß gelegt, dann der Text über den Hintergrund. Liegt dahinter etwas anderes, geben Sie die Farbe direkt ein.

Ein Hinweis zu APCA

Der Accessible Perceptual Contrast Algorithm (APCA) ist ein Kandidatenverfahren im Arbeitsentwurf von WCAG 3, das Textgröße, Schriftstärke und Polarität berücksichtigt. Er ist ein Entwurf, keine Anforderung, und derzeit verlangt kein Gesetz und kein Standard ihn. Die WCAG-2.x-Verhältnisse – die in diesem Werkzeug – bleiben die Grundlage für Konformitätsangaben.

Häufig gestellte Fragen

Was ist ein guter Kontrast?

4,5:1 oder mehr für normalen Text erfüllt WCAG AA, 7:1 erfüllt AAA. Großer Text braucht 3:1 für AA und 4,5:1 für AAA. Schwarz auf Weiß ist das Maximum mit 21:1. Alles unter 3:1 ist für viele Menschen schwer lesbar, selbst bei gutem Sehvermögen.

Was zählt in WCAG als großer Text?

Text mit mindestens 18 pt (24 px) in normaler Schriftstärke oder mindestens 14 pt (etwa 18,7 px) fett. Die Größe wird so gemessen, wie sie angezeigt wird; eine Folienschrift, die auf einem Handout klein wirkt, kann bei der Projektion trotzdem groß sein.

Gilt die Kontrastanforderung auch für Symbole und Diagrammlinien?

Ja, über das Erfolgskriterium 1.4.11 Nicht-Text-Kontrast: Benutzeroberflächen-Komponenten und Grafiken, die zum Verstehen des Inhalts nötig sind, müssen gegenüber angrenzenden Farben mindestens 3:1 erreichen. Dekorative Grafiken und inaktive Komponenten sind ausgenommen.

Warum zeigt meine Farbe 4,49, wenn das Verhältnis knapp 4,5 ist?

Weil WCAG das genaue Verhältnis vergleicht und Rundungen nicht anrechnet. Ein Paar mit 4,4999:1 besteht die Anforderung 4,5:1 nicht, daher zeigt das Werkzeug den Wert auf zwei Dezimalstellen abgerundet statt 4,50 an.

Wie funktionieren die vorgeschlagenen Farben?

Das Werkzeug behält Farbton und Sättigung Ihrer Farbe bei und verschiebt die HSL-Helligkeit in kleinen Schritten nach oben oder unten. Es gibt den nächstgelegenen Wert zurück, der das Zielverhältnis erreicht, als 8-Bit-HEX-Code. Kann keine Helligkeit das Ziel erreichen – etwa 7:1 gegen ein mittleres Grau –, sagt es das und schlägt vor, die andere Farbe zu ändern.

Ist APCA besser als das WCAG-Verhältnis?

APCA bildet die Wahrnehmung genauer ab, besonders für den Dunkelmodus und dünne Schrift, ist aber Teil eines Entwurfs (WCAG 3) und keine anerkannte Anforderung. Barrierefreiheitsgesetze und Beschaffungsstandards, die auf WCAG 2.x verweisen, verwenden das hier berechnete Verhältnis.