Was misst ein Kontrastprüfer?
Ein Kontrastprüfer vergleicht die relative Leuchtdichte einer Vordergrundfarbe und einer Hintergrundfarbe. Das Ergebnis wird als Verhältnis von 1:1 angezeigt, wenn die Farben visuell identisch sind, bis zu 21:1, wenn Schwarz und Weiß den maximalen Kontrast haben.
Dieses Tool meldet WCAG-ähnliche Bestehens- und Nichtbestehensindikatoren für normalen Text und großen Text. Es ist nützlich für frühe Designentscheidungen, Komponentenstatus, Theme-Token und schnelle Prüfungen vor einer umfassenderen Accessibility-Überprüfung.
So lesen Sie die Ergebnisse
| Check | Mindestverhältnis | Meaning |
|---|---|---|
| AA normaler Text | 4,5:1 | Gängiges Ziel für normalen Fließtext. |
| AA großer Text | 3:1 | Gilt für größere oder fettere Texte, bei denen die Buchstabenformen leichter zu lesen sind. |
| AAA normaler Text | 7:1 | Strengere Vorgabe für normalen Text in hochgradig zugänglichen Kontexten. |
| AAA großer Text | 4,5:1 | Strengere Vorgabe für großen Text. |
Was dieses Tool nicht beweist
Ein Verhältnis ist ein starkes Signal, aber kein vollständiges Accessibility-Audit. Die tatsächliche Lesbarkeit hängt auch von Typografie, Schriftstärke, Hover-/Fokuszuständen, deaktivierten Zuständen, umliegenden Farben, Bildschirmqualität und davon ab, ob Text über Bildern oder Verläufen erscheint.
- Transparenz und Verläufe benötigen eine separate Prüfung.
- Kleine Symbole und feine Striche können stärkeren Kontrast benötigen als nahegelegener Text.
- Markenfarben können in einer Kombination bestehen und in einer anderen nicht.
- QR-Scan-Kontrast und Lesbarkeitskontrast von Text sind verwandt, aber nicht dieselbe Prüfung.
Möglichkeiten zur Verbesserung schwachen Kontrasts
Vordergrund abdunkeln
Bei hellen Hintergründen bringen Sie die Textfarbe näher an einen dunkleren Neutralton oder einen stärkeren Markenfarbton.
Hintergrund aufhellen
Geringe Hintergrundverschiebungen können eine Markenfarbe bestehen lassen, ohne das Vordergrund-Token zu ändern.
Textgröße oder -stärke erhöhen
Großer oder stärkerer Text hat eine niedrigere AA-Schwelle, benötigt aber dennoch ausreichend visuelle Trennung.
Prüfen Sie jeden Zustand
Hover-, Fokus-, deaktivierte, ausgewählte und Fehlerzustände verwenden oft unterschiedliche Farbkombinationen.
Häufig gestellte Fragen
Ist dies ein vollständiges WCAG-Konformitätsaudit?
Nein. Es berechnet WCAG-ähnliche Kontrastschwellen für Farbpaare. Eine vollständige Überprüfung umfasst auch Layout, Tastaturverhalten, Semantik, Fokuszustände, Textalternativen und die tatsächlich gerenderte Typografie.
Was zählt als großer Text?
Die WCAG-Richtlinien betrachten großen Text als etwa 18 pt normalen Text oder 14 pt fetten Text und größer. Im Web sollten Sie die tatsächlich gerenderte Größe und Schriftstärke überprüfen, nicht nur die Designbezeichnung.
Kann ich dies für transparente Farben verwenden?
Dieser kompakte Prüfer verwendet undurchsichtige sRGB-Farben. Wenn Ihre UI Transparenz verwendet, mischen Sie zuerst den final gerenderten Vordergrund und Hintergrund und prüfen Sie dann das resultierende Paar.
Bedeutet das Bestehen von AA, dass das Design immer lesbar ist?
Nicht unbedingt. Sehr dünne Schriften, kleine UI-Beschriftungen, unruhige Hintergründe und Displays von geringer Qualität können Text dennoch schwer lesbar machen. Betrachten Sie das Verhältnis als ein wichtiges Signal.
Ist das dasselbe wie der Kontrast von QR-Codes?
Nein. Der Kontrast von QR-Codes beeinflusst die Zuverlässigkeit des Scanners, während dieses Tool sich auf die Lesbarkeit von Text konzentriert. Die Mathematik ist verwandt, aber die praktische Entscheidung ist unterschiedlich.