Farbkontrastprüfer

Kostenloser WCAG-Farbkontrastprüfer. Testen Sie Text- und Hintergrundfarben mit einem Live-Kontrastverhältnis und einer Vorschau – Hex oder RGB – auf AA- und AAA-Barrierefreiheit.

Überprüfen Sie das Kontrastverhältnis zwischen Text und Hintergrundfarbe anhand der WCAG AA- und AAA-Standards mit einer Live-Vorschau und Hex- oder RGB-Eingabe.

Share
Kategorie
Entwicklertools
Inklusive
6-Funktionen
Zugang
Frei · Keine Anmeldung
Privatsphäre
Läuft in Ihrem Browser
Farbkontrastprüfer

Loading Contrast Checker......

Please wait a moment

Wie zu verwenden

So verwenden Sie Farbkontrastprüfer

  1. 01

    Wählen Sie die Textfarbe

    Wählen Sie die Vordergrundfarbe aus oder geben Sie sie ein.

  2. 02

    Wählen Sie den Hintergrund

    Wählen Sie die Hintergrundfarbe aus oder geben Sie sie ein.

  3. 03

    Lesen Sie das Verhältnis

    Sehen Sie sich das Kontrastverhältnis und die AA/AAA-Ergebnisse an.

  4. 04

    Anpassen

    Optimieren Sie die Farben, bis sie vergehen.

Anwendungsfälle

Häufige Anwendungsfälle

  • Stellen Sie sicher, dass der UI-Text der WCAG-Barrierefreiheit entspricht
  • Überprüfen Sie den Tasten- und Linkkontrast
  • Prüfen Sie die Farbpalette einer Marke
  • Korrigieren Sie kontrastarme Marketingtexte
Überblick

Machen Sie Ihren Text für jedermann lesbar

Text mit geringem Kontrast ist einer der häufigsten Fehler bei der Barrierefreiheit. Dieser Prüfer berechnet das genaue Kontrastverhältnis zwischen Ihren Text- und Hintergrundfarben mithilfe der offiziellen WCAG-Formel für die relative Leuchtdichte und sagt Ihnen dann, ob es AA (4,5:1 für normalen Text, 3:1 für großen Text) und das strengere AAA (7:1 und 4,5:1) erfüllt. Eine Live-Vorschau zeigt echten Text in den von Ihnen gewählten Farben.

Geben Sie die Farben nach Ihren Wünschen ein

Verwenden Sie die Farbauswahl oder geben Sie Hex-Codes und rgb()-Werte direkt ein – das Tool analysiert beides. Wenn Sie eine der Farben anpassen, werden das Verhältnis und die Pass/Fail-Abzeichen sofort aktualisiert, sodass Sie einen Farbton anpassen können, bis er den Anforderungen entspricht. Alles läuft lokal und ist somit ein schneller Begleiter beim Entwerfen von Benutzeroberflächen, Themes und Marketingseiten.

Merkmale
01
WCAG AA- und AAA-Ergebnisse für bestanden/nicht bestanden
02
Live-Berechnung des Kontrastverhältnisses
03
Hex- und RGB-Eingabe mit Farbwählern
04
Live-Textvorschau Ihrer Farben
05
Schwellenwerte für normale und große Texte
06
Läuft lokal in Ihrem Browser
FAQ

Häufig gestellte Fragen

Welches Kontrastverhältnis benötige ich, um die WCAG zu bestehen?+

Für AA benötigt normaler Text 4,5:1 und großer Text 3:1. Für das strengere AAA benötigt normaler Text 7:1 und großer Text 4,5:1. Großer Text ist etwa 18pt bzw. 14pt fett.

Wie wird das Kontrastverhältnis berechnet?+

Es verwendet die WCAG-Formel für die relative Leuchtdichte für beide Farben und dividiert dann die hellere Leuchtdichte (plus 0,05) durch die dunklere (plus 0,05), was einen Wert von 1:1 bis 21:1 ergibt.

Kann ich sowohl RGB als auch Hex eingeben?+

Ja – geben Sie Hex-Codes wie #1e293b oder rgb(30, 41, 59) ein oder verwenden Sie die Farbauswahl. Beide Formate werden sofort analysiert.

Ist es kostenlos?+

Ja, völlig kostenlos, ohne Anmeldung, läuft vollständig in Ihrem Browser.