Farbkontrast-Prüfer

Prüfe Text- und Hintergrundfarben anhand der WCAG-2.1-Kontrastverhältnisse, mit APCA Lc als zweiter Meinung.

So prüfst du den Farbkontrast

  1. Gib die Textfarbe und die Hintergrundfarbe ein. Nutze den Farbwähler oder tippe einen Hex-Code mit 3 oder 6 Stellen.
  2. Lies das Kontrastverhältnis und das Ergebnis bestanden oder nicht bestanden ab, für kleinen Text (AA und AAA), großen Text (AA) und UI-Komponenten wie Icons und Rahmen.
  3. Sieh dir den APCA-Lc-Wert als zweite Meinung an. Er beschreibt, wie gut der Text lesbar ist, und ist eine Orientierung statt eines Bestanden-Ergebnisses.
  4. Fällt das Paar durch, verschiebt Auto-Fix die Textfarbe auf die nächste Helligkeit, die 4,5:1 erreicht, oder du tauschst die Farben, um die Gegenrichtung zu testen. Die Live-Vorschau zeigt das Paar auf einer Überschrift, Fließtext und Buttons.

Das kannst du tun

  • WCAG-2.1-Kontrastverhältnis

    Erhalte das genaue Verhältnis und die AA- und AAA-Ergebnisse für normalen Text, großen Text und UI ohne Text.

  • APCA Lc

    Sieh den APCA-Helligkeitskontrast mit einer verständlichen Einordnung, von „Bevorzugt für Fließtext“ bis „Nicht lesbar“.

  • Auto-Fix

    Schiebe eine durchgefallene Textfarbe auf die nächste Helligkeit, die AA mit 4,5:1 erreicht.

  • Live-Vorschau

    Sieh dein Paar auf einer Überschrift, Fließtext und Buttons, bevor du dich festlegst.

  • Verständliche Hinweise

    Ein kurzer Hinweis erklärt, was das Ergebnis für Fließtext und für großen Text bedeutet.

Häufige Fragen

Wie kann ich den Farbkontrast prüfen?

Gib deine Textfarbe und Hintergrundfarbe in den Prüfer ein. Er berechnet das WCAG-Kontrastverhältnis und zeigt, ob das Paar AA und AAA für kleinen Text, großen Text und UI-Komponenten besteht. Du kannst Hex-Codes eintippen oder die Farbwähler nutzen.

Welches Kontrastverhältnis verlangt WCAG?

WCAG 2.1 Level AA verlangt mindestens 4,5:1 für normalen Text und 3:1 für großen Text und für UI-Komponenten wie Eingabefeld-Rahmen und Icons. Level AAA verlangt 7:1 für normalen Text und 4,5:1 für großen Text.

Was gilt in WCAG als großer Text?

Text ab 24 CSS-Pixeln (18 Punkt) oder ab 18,66 Pixeln (14 Punkt), wenn er fett ist. Großer Text braucht ein niedrigeres Verhältnis, weil größere Buchstaben leichter zu lesen sind.

Was ist APCA und sollte ich es verwenden?

APCA ist eine wahrnehmungsbasierte Kontrastmethode aus den Entwürfen zu WCAG 3. Sie liefert einen Lc-Wert, und der Prüfer wertet Lc 75 und mehr als ausreichend für Fließtext und Lc 45 und mehr als Untergrenze für großen oder fetten Text. Die WCAG-2-Verhältnisse verlangen die meisten Standards und Audits weiterhin, also prüfe beides.

Spielt die Reihenfolge der beiden Farben eine Rolle?

Nicht beim WCAG-Verhältnis, das ist gleich, egal welche Farbe der Text ist. Bei APCA schon, denn das Ergebnis hängt davon ab, welche Farbe Text und welche Hintergrund ist. Mit Tauschen vergleichst du beide Richtungen.

Welches Kontrastverhältnis hat Schwarz auf Weiß?

Es sind 21:1, das höchste mögliche Verhältnis. Das niedrigste ist 1:1, also dieselbe Farbe auf sich selbst.