Mach jedes Wort besser lesbar

Funktionen und Einsatzmöglichkeiten

Der Kontrastprüfer vergleicht Vorder- und Hintergrundfarben mit den WCAG-AA- und AAA-Grenzwerten für normalen und großen Text. Farbwähler und HEX-, RGB- oder HSL-Eingaben ermöglichen schnelle Anpassungen.

Probiere eigenen Text aus, wähle Schrift, Größe und Stärke und berücksichtige transparente Farben über einer Seitenfarbe. Tausche Farben, finde eine AA-konforme Textfarbe, kopiere CSS oder lade einen PNG-Bericht mit Vorschau und Ergebnissen herunter.

Formate, Optionen und Grenzen

Farbfelder akzeptieren 3-, 4-, 6- oder 8-stellige HEX-Werte mit oder ohne # sowie RGB/RGBA- und HSL/HSLA-Schreibweisen. Alphawerte steuern die Transparenz. Nutze die visuelle Farbauswahl für schnelle Änderungen oder gib einen präzisen Wert ein.

• Prüfe bis zu 300 eingegebene Zeichen mit einer Schrift aus der Website-Bibliothek, in 12–96 px und normaler oder fetter Stärke. Transparenter Text und Hintergründe werden über der gewählten deckenden Seitenfarbe bewertet. Der AA-Farbvorschlag zielt auf mindestens 4,5:1 für normalen Text.
• Kopiere CSS mit Textfarbe, Hintergrundfarbe und Kontrastverhältnis. Der PNG-Bericht ist 1200 px breit und passt seine Höhe an den Text an. Er enthält die Vorschau, AA/AAA-Ergebnisse, Schrifteinstellungen und Farbwerte. So kannst du ein gewähltes Farbpaar dokumentieren.

Arbeite ohne Konto: Text und Fotos werden in deinem Browser verarbeitet. Speichere ein Projekt auf diesem Gerät oder lade eine Sicherung herunter, um es später wieder zu öffnen.

Gut zu wissen

WCAG AA verlangt 4,5:1 für normalen und 3:1 für großen Text. AAA verlangt 7:1 beziehungsweise 4,5:1. Großer Text beginnt bei 24 px oder etwa 18,67 px in Fettschrift. Es wird der ungerundete Wert verwendet.

Transparente Farben werden über der Seitenfarbe zusammengesetzt. Ein bestandener Kontrastwert prüft die gewählten Farben, nicht die Barrierefreiheit des gesamten Designs. WCAG-Leitfaden zum Kontrast lesen