Toolora

Farbkontrast-Prüfer

Prüfe WCAG-Kontrastverhältnisse für barrierefreien Text und UI.

Der Farbkontrast-Prüfer misst das WCAG-Kontrastverhältnis zwischen zwei Farben, zeigt AA- und AAA-Badges für normalen und großen Text und schlägt dunklere oder hellere Vordergrundfarben vor, die AA erreichen.

Vorschau

Franz jagt im komplett verwahrlosten Taxi quer durch Bayern

Kontrastverhältnis: 17.72:1

AA BestandenAA Groß BestandenAAA BestandenAAA Groß Bestanden

AA-Vorschläge

#0a0a0b

Kontrastverhältnis 19.79:1 · dunkler

#000000

Kontrastverhältnis 21:1 · dunkler

#26262b

Kontrastverhältnis 15.06:1 · heller

#35353b

Kontrastverhältnis 12.18:1 · heller

#43434c

Kontrastverhältnis 9.79:1 · heller

So wird's genutzt

  1. Gib eine Vordergrundfarbe ein oder wähle sie aus.
  2. Gib eine Hintergrundfarbe ein oder wähle sie aus.
  3. Prüfe Verhältnis, Badges und die vorgeschlagenen AA-konformen Alternativen.

Häufig gestellte Fragen

Was ist ein gutes Kontrastverhältnis?

Für normalen Text verlangt WCAG AA mindestens 4.5:1 und AAA mindestens 7:1.

Was gilt als großer Text?

Großer Text ist meist 18pt oder 14pt fett, mit einem niedrigeren AA-Schwellenwert von 3:1.

Wie werden die Vorschläge erzeugt?

Das Tool passt die Vordergrundhelligkeit Richtung Weiß oder Schwarz an, bis das Verhältnis 4.5:1 erreicht.