CSS Contrast Checker

Kontrast messen. CSS direkt reparieren.

Geben Sie Vorder- und Hintergrundfarbe ein. Das Labor berechnet das WCAG-Verhältnis und zeigt, ob Text oder eine notwendige UI-Grenze den gewählten Messwert erreicht.

01 / Kontrast-Messkonsole

Zwei Farben eingeben, alle Grenzwerte sofort sehen.

Die Demo startet von selbst und zeigt die wichtigsten Zustände. Sobald Sie eingreifen, gehört die Messkonsole Ihnen.

CSS-A11y-Labor

Zwei Farben. Vier Grenzwerte.

5,35zu 1
Farben
Prüfkontext
Lesbarer Text beginnt mit messbarem Kontrast.

Normaler Text erreicht WCAG AA.

Text AA4,5 : 1bestanden
Text AAA7 : 1nicht bestanden
Groß AA · UI-Grenze3 : 1bestanden
Groß AAA4,5 : 1bestanden

Kontrastmessung bereit.

02 / Der Unterschied

Ein Farbpaar ist der Anfang, nicht die Website.

  • Kontrast hängt am Zustand

    Hover-, Fokus- und deaktivierte Zustände verändern das Verhältnis derselben Farben. Der Website-Check sucht die ungünstigsten Stellen pro Seite.

  • Mehr als Farbwerte

    Der Scan prüft Ihre Seiten zusätzlich auf weitere automatisch erkennbare Barrieren – etwa fehlende Alt-Texte und unbeschriftete Formularfelder.

  • Fundstellen mit nächstem Schritt

    Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Jetzt die eigene Seite prüfen.

Die Messkonsole rechnet ein Farbpaar. Der Website-Check prüft Ihre Seiten auf Kontrast- und weitere automatisch erkennbare Barrieren.

Der Website-Check ist bereit.

  1. 1URL
  2. 2Auswahl
  3. 3Prüfung
  4. 4Ergebnis
Kostenlos starten · keine Installation

Das Farbpaar steht. Jetzt die Seite dahinter prüfen.

Kostenlos starten: URL eingeben und konkrete technische Warnsignale mit Fundstellen erhalten.

Website auf Barrierefreiheit prüfen