Farbkontrast-Prüfer
Prüfe den Kontrast zwischen einer Textfarbe und einer Hintergrundfarbe nach WCAG 2 und APCA. Das Prüfwerkzeug berechnet das WCAG-2-Kontrastverhältnis anhand der relativen Leuchtdichte, meldet für normalen und großen Text sowie für UI Grafiken, ob die Anforderungen für AA und AAA erfüllt sind, und ergänzt den APCA-Helligkeitskontrastwert mit Hinweisen zu seiner Aussagekraft. Für Designer und Entwickler, die barrierefreie Benutzeroberflächen erstellen.
Häufig gestellte Fragen
Was bedeuten die WCAG-Stufen?
Stufe AA erfordert 4.5:1 für normalen Text und 3:1 für großen Text (Erfolgskriterium 1.4.3); Stufe AAA erfordert 7:1 und 4.5:1 (1.4.6). Benutzeroberflächenkomponenten und aussagekräftige Grafiken benötigen 3:1 gegenüber angrenzenden Farben (1.4.11). Das Prüfwerkzeug meldet für jeden dieser fünf Schwellenwerte, ob er erfüllt ist.
Was gilt als großer Text?
WCAG definiert großen Text als mindestens 18 Punkt in normaler Schrift, etwa 24 CSS Pixel, oder mindestens 14 Punkt in Fettschrift, etwa 18.66 CSS Pixel. Alles darunter gilt als normaler Text und benötigt das höhere Kontrastverhältnis.
Warum erfüllt ein Verhältnis von 4.499:1 AA nicht?
Die WCAG-Schwellenwerte sind exakt: Ein Verhältnis, das auf 4.5 gerundet würde, aber darunter liegt, erfüllt die Anforderung nicht. Das Prüfwerkzeug vergleicht das ungerundete Verhältnis und zeigt es auf zwei Dezimalstellen abgeschnitten an, sodass die angezeigte Zahl nie besser aussieht als der tatsächliche Wert.
Was ist APCA?
Der Accessible Perceptual Contrast Algorithm ist ein Kontrastverfahren, das für die WCAG-3-Entwürfe entwickelt wurde. Es modelliert den wahrgenommenen Helligkeitskontrast, behandelt Text und Hintergrund unterschiedlich und gibt einen Helligkeitskontrastwert Lc von etwa -108 bis 106 zurück. APCA gehört noch zu keinem veröffentlichten WCAG-Standard. Nutze daher die WCAG-2-Ergebnisse für die Konformität und APCA als zusätzliche Prüfung.
Warum ist der APCA-Wert manchmal negativ?
APCA berücksichtigt die Polarität: Positive Werte bedeuten dunklen Text auf hellem Hintergrund, negative Werte hellen Text auf dunklem Hintergrund. Die Hinweise verwenden den Absolutwert, daher fallen Lc -75 und Lc 75 in dieselbe Stufe.
Wie werden die APCA-Empfehlungsstufen festgelegt?
Sie folgen dem einfachen APCA-Bronze-Modus: Lc 90 wird für Fließtext bevorzugt, Lc 75 ist das Minimum für Fließtext, Lc 60 gilt für andere Inhaltstexte, Lc 45 für Überschriften und großen Text, Lc 30 für punktuell lesbaren Text wie Platzhalter und Lc 15 für Nicht-Text-Elemente. Schriftgröße und Schriftstärke spielen weiterhin eine Rolle. Betrachte die Stufen daher als Ausgangspunkt und nicht als abschließendes Urteil.
Welche APCA-Version ist implementiert?
Die APCA-W3-Konstanten der Version 0.0.98, Revision 4g, mit dem einfachen 2,4-Exponenten für sRGB-Kanäle, der sanften Schwarzbegrenzung und der Begrenzung bei niedrigem Kontrast. Schwarzer Text auf Weiß ergibt etwa Lc 106.0 und weißer Text auf Schwarz etwa Lc -107.9. Das entspricht der Referenzimplementierung.
Welche Farbformate kann ich eingeben?
Hex-Codes mit oder ohne #, CSS Farbnamen, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() Farbräume wie display-p3 und cmyk(). Farben außerhalb von sRGB werden zunächst sRGB zugeordnet, da beide Formeln für sRGB-Bildschirmfarben definiert sind.
Wie werden transparente Farben behandelt?
Eine halbtransparente Textfarbe wird vor der Messung über den Hintergrund gelegt, so wie ein Browser sie darstellt. Ein halbtransparenter Hintergrund wird zuerst über Weiß gelegt. Das Ergebnis zeigt die deckenden Text- und Hintergrundfarben, die tatsächlich verglichen wurden.
Spielt die Reihenfolge der beiden Farben eine Rolle?
Bei WCAG 2 spielt sie keine Rolle, da das Verhältnis der helleren zur dunkleren Leuchtdichte in beiden Reihenfolgen gleich ist. Bei APCA spielt sie eine Rolle, weil Text und Hintergrund unterschiedlich gewichtet werden. Gib daher die Textfarbe in das erste Feld und die Hintergrundfarbe in das zweite ein.