Farbkontrast-Prüfer

Prüfen Sie den Kontrast von normalem und großem Text zwischen Vordergrund- und Hintergrundfarben.

Farbkontrast-Prüfer

Ein browsergestütztes Ergebnis zur Planung und als Referenz.

VordergrundHintergrund

CSS / HEX

RATGEBER

Was vor der Verwendung zu prüfen ist

Wann dieses Tool sinnvoll ist

Nutze dieses Tool, bevor du Vordergrund- und Hintergrundfarben für Fließtext, Beschriftungen oder Schaltflächen bereitstellst. Gib zwei HEX-Farben ein, um deren Kontrastverhältnis sowie die Ergebnisse der Schwellen für Normaltext und großen Text zu sehen.

Wie das Ergebnis berechnet wird

Die Berechnung linearisiert die sRGB-Kanäle, leitet die relative Leuchtdichte ab und teilt die hellere Leuchtdichte plus 0.05 durch die dunklere Leuchtdichte plus 0.05. Anschließend wird der Quotient mit den Text-Schwellen 3:1, 4.5:1 und 7:1 verglichen.

Praxisbeispiel und Interpretation

Wenn du Vordergrund #111111 auf dem Hintergrund #FFFFFF eingibst, entsteht ein hoher Wert. Prüfe zuerst AA normal für kleinen Fließtext; für eine Kombination, die für große Überschriften vorgesehen ist, lies auch das AA large-Ergebnis.

Anwendungsbereich und Einschränkungen

Das Erreichen eines Verhältnisses beendet keine Barrierefreiheitsprüfung. Teste echte Schriftgröße und -gewicht, Interaktionszustände, Text über Bildern sowie jegliche ausschließlich durch Farbe vermittelte Information.

Häufig gestellte Fragen

Wie verschiebe ich eine Farbe vom Farbkontrast-Checker in eine andere App?

Verwende die Schaltfläche „Kopieren“ unter dem Ergebnis, um CSS-, HEX- oder HSL-Text zu kopieren. Bestätige, dass die Ziel-App dasselbe Farbformat interpretiert.

Stimmt eine Bildschirmfarbe aus dem Farbkontrast-Checker mit dem Druck überein?

Nicht automatisch. Emittierende RGB-Bildschirme sowie reflektierende Papier und Tinte nutzen unterschiedliche Farbräume und Mischmodelle, daher werden weiterhin Druckprofile und Proofs benötigt.

Kann ich ein Design-Token nur mit dem Farbkontrast-Checker freigeben?

Nutze es als Kandidat, und teste dann den echten Hintergrund, den Dark Mode, Interaktionszustände und den Textkontrast, bevor du ein Token benennst und freigibst.