Lesbar gestaltet

Vorschau des Farbpaars in einem Textblock.

Kontrastverhältnis

17.32:1

Normaler Text AA

Bestanden

Normaler Text AAA

Bestanden

Großer Text AA

Bestanden

Großer Text AAA

Bestanden

UI-Komponenten AA

Bestanden

Farbkontrast prüfen

Überprüfen Sie den WCAG-Farbkontrast und konvertieren Sie Farben zwischen HEX, RGB und HSL.

Kontrast prüfen

Beide Farben eingeben, WCAG-Ergebnisse prüfen und Werte kopieren.

Kontrast prüfen

Wie wird das Kontrastverhältnis berechnet?

Das Verhältnis vergleicht die relative Leuchtdichte der Vordergrund- und Hintergrundfarben mithilfe der Kontrastformel WCAG. Der Maßstab reicht von 1:1 für identische Leuchtdichte bis 21:1 für den stärksten Schwarz-Weiß-Unterschied. Die Berechnung verwendet die eingegebenen Farbwerte und berücksichtigt daher nicht automatisch Transparenz, Farbverläufe, Hintergrundbilder, Schatten, Anti-Aliasing, Anzeigebedingungen oder eine andere Farbe, die in einem interaktiven Zustand angezeigt wird. Testen Sie die tatsächlich gerenderten Farben für die Zustände „Normal“, „Hover“, „Fokus“, „Aktiv“, „Deaktiviert“ und „Besucht“, wenn sie unterschiedlich sind.

Was bedeuten die Kontrastergebnisse WCAG AA und AAA?

Für gewöhnlichen Text verwendet WCAG AA ein Mindestverhältnis von 4,5:1 und AAA 7:1. Bei großem Text werden niedrigere Schwellenwerte verwendet, da größere, ausreichend fette Zeichen leichter zu unterscheiden sind: 3:1 für AA und 4,5:1 für AAA. Ob Text als groß gilt, hängt von seiner gerenderten Größe und seinem Gewicht ab, nicht nur von einem Designetikett. Ein Paar kann daher für eine große Überschrift gelten, für den Fließtext jedoch nicht. Überprüfen Sie die Anforderung, die mit dem tatsächlichen Typografie- und Konformitätsziel übereinstimmt.

Müssen Symbole, Bedienelemente und Fokusanzeigen auf Kontrast überprüft werden?

Ja. Der Textkontrast ist nur ein Teil der Farbzugänglichkeit. Visuelle Informationen, die zur Identifizierung von Benutzeroberflächensteuerelementen, Komponentenzuständen, grafischen Objekten und Tastaturfokusindikatoren erforderlich sind, erfordern im Allgemeinen einen Kontrast von mindestens 3:1 gegenüber benachbarten Farben gemäß WCAG-Kontrastrichtlinien für Nichttexte. Für dekorative Elemente und inaktive Steuerelemente gelten unterschiedliche Überlegungen. Testen Sie Rahmen, Symbole, Diagramme, ausgewählte Zustände, Validierungsmeldungen und Fokusumrisse im Kontext. Ein Textpaar, das AA übergibt, beweist nicht, dass auf jedes interaktive oder grafische Element auf demselben Bildschirm zugegriffen werden kann.

Wie soll ich Transparenz, Farbverläufe und Bildhintergründe testen?

Geben Sie die effektiven Vordergrund- und Hintergrundfarben an der Stelle ein, an der Text oder eine wesentliche Grafik erscheint. Halbtransparente Schichten verschmelzen mit dem, was sich dahinter befindet, und Farbverläufe oder Fotos erzeugen unterschiedliche Kontrastverhältnisse im selben Element. Probieren Sie den schwächsten relevanten Bereich aus und testen Sie dann andere wahrscheinliche Positionen und reaktionsfähige Pflanzen. Wenn der Kontrast von einem Schatten, einer Kontur oder einer Überlagerung abhängt, beziehen Sie den tatsächlich gerenderten Effekt in die manuelle Überprüfung ein. Bevorzugen Sie eine stabile, feste Unterlage hinter wichtigem Text, wenn sich das darunter liegende Bild ändern kann.

Garantiert das Bestehen der Kontrastprüfung ein barrierefreies Design?

Nein. Kontrast ist eine messbare Anforderung. Barrierefreies Design erfordert außerdem lesbare Schrift, ausreichende Abstände, semantische Struktur, Beschriftungen, Tastaturbedienung, sichtbaren Fokus, sinnvolle Alternativen, nutzbaren Zoom und Reflow, kontrollierte Bewegung und Anweisungen, die nicht nur von der Farbe abhängen. Farbpaare können mathematisch passen, sind aber bei dünnen Schriftarten, kleinen Größen, Blendung, Farbsehunterschieden oder dichten Layouts immer noch schwierig. Nutzen Sie das Ergebnis als eine Überprüfung in einer umfassenderen Überprüfung und testen Sie die tatsächliche Schnittstelle mit repräsentativen Inhalten und Zuständen.

Ähnliche Werkzeuge