Eingabe
Dein Arbeitsbereich wird vorbereitet…
Anleitung
- Deckende Text- und Hintergrundfarben eingeben.
- Vorschau, Verhältnis und einzelne Bewertungen prüfen.
- Farben anpassen oder Farben tauschen verwenden; anschließend das Verhältnis kopieren.
Ein Kontrastergebnis lesen
Eine Textfarbe kann auf einem Hintergrund klar und auf einem anderen kaum sichtbar sein. Das Tool unterscheidet Anforderungen für normalen Text, großen Text und Oberflächengrafiken.
Die Vorschau liefert visuellen Kontext; die Bewertung nutzt das berechnete Verhältnis. Schriftgröße, Gewicht und das fertige Design müssen zusätzlich geprüft werden.
Das Verhältnis verstehen
Relative Leuchtdichte wird aus linearisierten sRGB-Kanälen berechnet. Das Verhältnis teilt die hellere Leuchtdichte plus 0,05 durch die dunklere plus 0,05.
Schwarz auf Weiß erreicht 21:1. Tauschen erhält das Verhältnis, verändert aber die visuelle Wirkung.
#000000 on #ffffff21.00:1 · AA and AAA passSchwarzer Text auf Weiß erreicht den maximalen WCAG-Kontrast von 21:1.
Grenzwerte und Rundung
Normaler Text benötigt 4,5:1 für AA und 7:1 für AAA. Für großen Text gelten 3:1 und 4,5:1, für Oberflächengrafiken gegebenenfalls 3:1.
Die Anzeige hat zwei Dezimalstellen, die Prüfung verwendet den ungerundeten Wert. Transparente Farben werden abgelehnt, weil ihre wirksame Farbe vom Hintergrund abhängt.
Die fertige Oberfläche prüfen
Berücksichtige Schriftgröße, Gewicht und Komponentenzustände. Ein bestandener Farbtest prüft weder Fokusdarstellung noch Tastaturbedienung, Beschriftungen oder den Rest der Seite.
Texteingabe bis 1 MiB. CSS- und HTML-Umwandlungen laufen in einem Worker mit einem Zeitlimit von 30 Sekunden. Farbtools verwenden sRGB; generierte Styles sind Vorschauen und müssen im eigenen Layout getestet werden.
Häufige Fragen
Warum kann ein angezeigter Grenzwert trotzdem durchfallen?
Die Anzeige kann aufrunden. Geprüft wird mit dem vollständigen Wert; knapp unter der Grenze bleibt unzureichend.
Kann ich transparente Farben verwenden?
Nein. Gib die fertig mit dem Hintergrund verrechneten deckenden Farben ein.
Ändert Tauschen das Verhältnis?
Nein. Das Leuchtdichteverhältnis ist symmetrisch. Die Vorschau zeigt dadurch die umgekehrte Gestaltung.
Bedeutet AA, dass die ganze Seite barrierefrei ist?
Nein. Nur dieses Farbpaar wird gegen die angezeigten Grenzen geprüft. Der passende Text- oder Komponententest und weitere Anforderungen sind gesondert zu prüfen.
Kann ich das Ergebnis speichern?
Mit Kopieren übernimmst du das angezeigte Verhältnis. Das Tool erstellt weder einen Barrierefreiheitsbericht noch eine Zertifizierung.