Vorschlag
Normaler Text (16 px)
Großer Text (24 px)
So liest sich diese Farbkombination auf Ihrer Website. Prüfen Sie auch Buttons und Icons.
Worauf es bei Kontrast ankommt
- Nicht nur Farbe: Fehlermeldungen oder Status sollten zusätzlich durch Text oder Symbol erkennbar sein, nicht nur durch Rot und Grün.
- Graue Texte prüfen: Hellgrauer Text auf Weiß ist der häufigste Fehler.
- Text auf Bildern: Hier hilft eine halbtransparente dunkle Fläche hinter dem Text.
- Auch Buttons: Der Rand oder die Fläche eines Buttons braucht 3 : 1 zum Hintergrund.
Passende Farben finden Sie mit dem Farbpaletten-Generator.
Häufige Fragen
Welches Kontrastverhältnis ist Pflicht?
Nach WCAG 2.2 Stufe AA mindestens 4,5 : 1 für normalen Text und 3 : 1 für großen Text (ab ca. 24 px oder 19 px fett) sowie für Bedienelemente und Icons. Stufe AAA verlangt 7 : 1 bzw. 4,5 : 1.
Gilt das für meine Website auch rechtlich?
Seit dem Barrierefreiheitsstärkungsgesetz (BFSG, 28. Juni 2025) müssen bestimmte Angebote wie Online-Shops barrierefrei sein, Maßstab ist meist WCAG 2.1/2.2 AA. Ob Ihr Angebot betroffen ist, sollten Sie im Einzelfall prüfen. Gute Lesbarkeit ist unabhängig davon sinnvoll.
Was ist großer Text?
Nach WCAG gilt Text ab 18 pt (ca. 24 px) oder 14 pt fett (ca. 18,7 px) als groß. Dafür reicht ein geringerer Kontrast.
Wie berechnet sich der Kontrast?
Aus der relativen Helligkeit beider Farben nach der WCAG-Formel: (hellere + 0,05) geteilt durch (dunklere + 0,05). Das Ergebnis liegt zwischen 1 : 1 (kein Kontrast) und 21 : 1 (Schwarz auf Weiß).
Werden meine Eingaben gespeichert?
Nein, alles läuft in Ihrem Browser.
Weitere Tools
Das könnte Ihnen auch helfen.
Bild-Komprimierer & WebP-Konverter
Verkleinert Fotos und wandelt sie in WebP um. Alles auf Ihrem Gerät, die Bilder werden nicht hochgeladen.
Farbpaletten-Generator
Erzeugt aus einer Farbe passende Paletten: komplementär, analog, Triade und mehr. Mit HEX-Codes zum Kopieren.
Website-Check
URL eingeben und in Sekunden sehen, wie es um Technik, SEO, Sicherheit und Pflichtseiten Ihrer Website steht.
Kontakt
Finden wir heraus, ob Ihre Website für Sie arbeitet.
Im kostenlosen Erstgespräch sehen wir uns Ihre Website, Ihre Ziele und Ihre Möglichkeiten an. Ehrlich und konkret – auch wenn die Antwort lautet, dass weniger mehr ist.