ToolStack

Kontrast-Prüfer

Prüfen Sie das WCAG-Kontrastverhältnis zwischen Text- und Hintergrundfarbe sofort.

100 % privat — alles läuft in Ihrem Browser

Werbung

So funktioniert's

  1. 1

    Legen Sie Text- und Hintergrundfarbe über die Wähler oder per Hex-Code fest.

  2. 2

    Das WCAG-Kontrastverhältnis wird sofort berechnet.

  3. 3

    Prüfen Sie die vier Abzeichen, welche WCAG-Stufen erfüllt sind.

  4. 4

    Mit Tauschen prüfen Sie die umgekehrte Kombination.

Beispiele

Dunkler Text auf Weiß

Eingabe

Text #111827 · Hintergrund #FFFFFF

Ausgabe

17,74 : 1 — AA und AAA für alle Größen bestanden

Kontrastarmes Grau

Eingabe

Text #9CA3AF · Hintergrund #FFFFFF

Ausgabe

2,54 : 1 — AA für Normaltext fehlgeschlagen

Häufige Fragen

Welches Kontrastverhältnis sollte ich anstreben?

Die WCAG empfiehlt mindestens 4,5:1 für Normaltext (AA) und 7:1 für AAA. Großer Text (18 pt oder 14 pt fett) benötigt mindestens 3:1.

Wie wird das Verhältnis berechnet?

Nach der WCAG-2.x-Formel (L1 + 0,05) / (L2 + 0,05), wobei L1 und L2 die relative Leuchtdichte der helleren und dunkleren Farbe sind. Das Verhältnis reicht von 1:1 bis 21:1.

Wird Farbenblindheit berücksichtigt?

Nein — das Verhältnis misst nur den Helligkeitsunterschied. Bestandene Farbkombinationen können für Menschen mit Farbsehschwäche dennoch schwer unterscheidbar sein.

Ähnliche Tools

FarbkonverterKonvertieren Sie zwischen den Formaten HEX, RGB, HSL, HSV und HWB in jede Richtung.CSS-FarbgeneratorWandeln Sie eine Basisfarbe in eine 10-stufige Farbpalette um und exportieren Sie sie als CSS-Variablen.FarbwählerWählen Sie eine Farbe und kopieren Sie ihre HEX-, RGB-, HSL- und HSV-Werte mit einem Klick.HEX zu RGBRechnen Sie HEX-Farbcodes sofort in RGB-Werte um — kostenlos und privat.RGB zu HEXRechnen Sie RGB-Werte sofort in einen HEX-Farbcode um — kostenlos und privat.VerlaufsgeneratorErstellen Sie CSS-Verläufe (linear und radial) visuell und kopieren Sie den CSS-Code.