CSS Color Contrast

CSS Color Contrast aus einer Regel messen.

Fügen Sie eine Regel mit color und background-color ein. Das Labor berechnet den WCAG-Wert und liefert einen einsetzbaren Fix.

01 / Deklarations-Labor

Regel einfügen, Verhältnis und Fix sofort sehen.

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

Deklarations-Labor

4,01zu 1

Prüfziel

Aa · Lesen ohne Rätselraten

#777B84#FFF8E9

Kontrast zu niedrigText braucht 4.5 : 1.

Direkter CSS-Fix

Nur die Textfarbe wird verschoben.

#6F727B · 4,54 : 1

.card__meta {
  color: #6F727B;
  background-color: #FFF8E9;
}

02 / Der Unterschied

Deklariert ist nicht gerendert
Vererbung, Transparenz und Verläufe verändern Farben, bevor sie im Browser ankommen. Der Website-Check bewertet den Kontrast so, wie er tatsächlich dargestellt wird.
Mehr als ein Farbpaar
Der Scan prüft Ihre Seiten auf Kontrastprobleme bei Text und UI-Elementen und auf weitere automatisch erkennbare Barrieren – vom Alt-Text bis zur Feldbeschriftung.
Fundstellen statt Stichprobe
Jeder Befund nennt Seite, Vorkommen und den konkreten nächsten Schritt – kostenlos und ohne Installation.

03 / Auf Ihrer Website

Das Labor rechnet eine Regel. Der Website-Check prüft Ihre Seiten auf Kontrast- und weitere automatisch erkennbare Barrieren.