Kontrast-Checker für WCAG 2.2.

Gib eine Textfarbe und eine Hintergrundfarbe ein und sieh ihr Kontrastverhältnis und ob sie WCAG 2.2 AA und AAA erfüllen. Das Tool läuft in deinem Browser, und nichts, was du eingibst, wird hochgeladen.

So prüfst du den Farbkontrast

1. Gib die Textfarbe ein, als HEX-Code wie #1F2A22 oder #333, oder wähle sie über das Farbfeld aus.
2. Gib die Hintergrundfarbe ein, genauso. Der Button zwischen den beiden Feldern tauscht die Farben.
3. Lies das Ergebnis ab. Das Verhältnis aktualisiert sich beim Tippen, die Vorschau zeigt deine Farben in 24px und in 15px, und jede WCAG-Stufe zeigt „Bestanden“ oder „Nicht bestanden“.

Die Felder akzeptieren dreistellige und sechsstellige HEX-Codes, mit oder ohne #. Bei einer halbtransparenten Farbe gibst du die deckende Farbe ein, die sich auf deinem Hintergrund ergibt. Das Verhältnis wird abgerundet: Eine Kombination, die 4,50:1 anzeigt, besteht also wirklich.

Kontrastanforderungen nach WCAG 2.2

Für Text gelten die Erfolgskriterien 1.4.3 (AA) und 1.4.6 (AAA). Icons, Rahmen von Eingabefeldern, Fokusindikatoren und andere Teile von Bedienelementen fallen unter 1.4.11, das nur eine AA-Stufe hat. Logos und der Text deaktivierter Bedienelemente sind ausgenommen. Die Verhältnisse reichen von 1:1 (kein Kontrast) bis 21:1 (Schwarz auf Weiß) und werden mit der Formel für die relative Leuchtdichte aus WCAG 2 berechnet.

Ein barrierefreies Designsystem mit Codex aufbauen

Einzelne Farbpaare zu prüfen reicht, solange du Farben auswählst. Damit ein ganzes Produkt lesbar bleibt, prüf die Kombinationen, auf denen dein Designsystem aufbaut, und mach die Regel zu etwas, woran sich Codex hält:

1. Prüf die zentralen Kombinationen: Text auf dem Seitenhintergrund, Text auf Karten, Button-Text auf deiner Hauptfarbe und das gedämpfte Grau für Sekundärtext, die Kombination, die am häufigsten durchfällt.
2. Schreib die Regel in die DESIGN.md. Der DESIGN.md-Generator warnt dich, wenn on-primary auf primary oder on-surface auf surface oder neutral unter 4,5:1 fällt, und ergänzt die Datei um „Halte den Textkontrast bei WCAG AA (4,5:1) oder besser.“
3. Prüf die Datei per Linter. npx @google/design.md lint DESIGN.md prüft auch Kontrastverhältnisse, wie die Anleitung zu DESIGN.md erklärt.
4. Lass Codex fertige Screens prüfen, denn dort entstehen neue Kombinationen: Text auf Bildern, Badges und Platzhaltertext.

Prüfe jedes Paar aus Text- und Hintergrundfarbe in [screen.html] gegen WCAG 2.2 AA: 4,5:1 für normalen Text, 3:1 für Text ab 24px (oder 18,66px fett) und 3:1 für Icons, Rahmen von Eingabefeldern und Fokusringe. Liste jedes Paar, das durchfällt, mit seinem Verhältnis auf und schlag die nächstliegende Farbe vor, die besteht und den Farbton beibehält. Verwende nur Farben aus der DESIGN.md, oder sag mir, welches Token sich ändern muss.

Häufige Fragen

Was ist ein gutes Kontrastverhältnis?

Mindestens 4,5:1 für normalen Text und 3:1 für großen Text, Icons und Teile von Bedienelementen. Das ist WCAG AA, die Stufe, die die meisten Vorgaben zur Barrierefreiheit verlangen. Normaler Text mit 7:1 oder mehr erfüllt AAA, und 21:1 ist das höchstmögliche Verhältnis.

Was zählt als großer Text?

Text ab 24px (18pt) oder, wenn er fett ist, ab 18,66px (14pt).

Verwendet das Tool APCA?

Nein. Es verwendet die Kontrastformel aus WCAG 2, mit der die Konformität zu WCAG 2.2 gemessen wird. APCA, eine andere Methode, die für ein künftiges WCAG 3 diskutiert wird, ist nicht Teil von WCAG 2.2.

Ist das Tool kostenlos?

Ja. Es ist kostenlos, braucht keine Anmeldung, und die Farben, die du eingibst, bleiben in deinem Browser.

Weiterlesen

• Farbpalette aus Bild erstellenDie Hauptfarben eines beliebigen Bildes als HEX-Codes, fertig zum Kopieren.
• DESIGN.md-GeneratorMach aus deinen Farben, Schriften und Abständen eine DESIGN.md für Codex.
• DESIGN.md: dein Designsystem für CodexDas DESIGN.md-Format, ein vollständiges Beispiel und wie du Codex dazu bringst, sich daran zu halten.
• Die besten Codex-Skills für UI-DesignSkills, die Codex Geschmack geben, und wie du einen für dein eigenes Designsystem schreibst.