Welche Kontrastpflichten gelten für deutsche Webseiten?
Die Barrierefreie-Informationstechnik-Verordnung (BITV 2.0) gilt für Bundesbehörden und öffentliche Stellen in Deutschland. Sie setzt WCAG 2.1 Stufe AA um und schreibt ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text vor. Seit dem 28. Juni 2025 ist zudem der European Accessibility Act (EAA) in Kraft getreten, der private Unternehmen im Bereich digitaler Produkte und Dienstleistungen einschließt.
Neben den Behördenseiten fallen in Deutschland Websites öffentlicher Unternehmen (z.B. ÖPNV-Portale) unter die Regelung. Der BITV-Test, entwickelt von der Aktion Mensch in Zusammenarbeit mit dem BIK-Projekt, bietet eine strukturierte Prüfmethodik, die Farbenblindheits-Simulationen und Kontrastmessungen einschließt.
Ein grauer Text #767676 auf weißem Hintergrund liegt genau bei 4,5:1, gerade noch bestanden. Eine Nuance heller und das Mindestkriterium ist verfehlt.
Was sind die WCAG-Kontraststufen und was bedeuten sie?
- Stufe AA (gesetzlicher Mindeststandard): 4,5:1 für Fließtext, 3:1 für große Schrift (ab 18pt / 14pt fett) und UI-Komponenten
- Stufe AAA (erweitertes Ziel): 7:1 für Fließtext, 4,5:1 für große Schrift
Der Kontrast-Checker berechnet das Verhältnis zweier Farben, zeigt die erreichte WCAG-Stufe an und rendert eine Textvorschau auf dem Hintergrund in Echtzeit. Eingabe als HEX, RGB oder HSL möglich.
Wie konvertiere ich Farben zwischen HEX, RGB, HSL und OKLCH?
Die vier Formate haben unterschiedliche Stärken im CSS-Alltag:
- HEX (
#1d70b8) ist der Standard in Design-Dateien und Browser-Devtools - RGB (
rgb(29, 112, 184)) ist lesbar, wenn einzelne Kanäle per JavaScript angepasst werden - HSL (
hsl(210, 73%, 42%)) trennt Farbton, Sättigung und Helligkeit, nützlich, um Abstufungen einer Farbe zu berechnen, ohne den Farbton zu verschieben - OKLCH ist der moderne wahrnehmungsbasierte Farbraum hinter CSS Color Level 4; alle Browser unterstützen
oklch()inzwischen nativ
Die Umrechnung zwischen diesen Formaten erfordert Trigonometrie. Der Farbkonverter nimmt jeden der vier Formate als Eingabe und gibt die anderen sofort aus.
Wie erstelle ich Dark-Mode-Farbpaletten?
Dark Mode ist in deutschsprachigen Märkten besonders beliebt, Studien zeigen, dass über 60 % der Nutzer in der DACH-Region Dark Mode aktiv nutzen. Die Herausforderung: eine Palette, die im hellen Modus WCAG AA erfüllt, tut das im dunklen Modus nicht automatisch.
Vorgehen für eine BITV-konforme Dark-Mode-Palette:
- Definiere eine Basisfarbe (z.B. Markenblau
#1d70b8) - Generiere eine zehnstufige Skala mit dem Palette-Generator
- Im hellen Modus: dunkle Stufen (700-900) für Text, helle Stufen (50-100) für Hintergrund
- Im dunklen Modus: helle Stufen (100-300) für Text auf dunklem Hintergrund (z.B.
#1a1a2e) - Jeden Schritt mit dem Kontrast-Checker verifizieren, Ziel: mindestens 4,5:1 in beiden Modi
Die bevorzugte Designsprache im DACH-Raum ist Sachlichkeit und Klarheit: wenig Dekorationsfarben, starke Typografie, hoher Kontrast.
Wie erstelle ich einen CSS-Verlauf ohne Probieren?
Ein CSS-Verlauf wird als background: linear-gradient(Winkel, Stopp1, Stopp2, ...) geschrieben. Den richtigen Winkel und die Stoppposition von Hand zu finden kostet mehrere Edit-Reload-Zyklen.
Der CSS-Verlaufsgenerator ermöglicht die visuelle Auswahl von Farben, Stoppposition und Winkel. Die Ausgabe ist fertiges, kopierbares CSS, für lineare und radiale Verläufe, mit Herstellerpräfixen wo nötig.
Ein praktischer Hinweis: Verläufe nie als einziges Mittel einsetzen, um Informationen zu übermitteln. Nutzer mit Rot-Grün-Schwäche (ca. 8 % der Männer) unterscheiden betroffene Farbtöne nicht zuverlässig.
Wie extrahiere ich Farben aus einem Bild oder einer Vorlage?
Wenn ein Kunde nur ein PNG-Logo ohne Quelldateien liefert, ist die Farbextraktion der erste Schritt. Der Farbpaletten-Extraktor lädt das Bild und analysiert die dominanten Farben per Canvas-API, kein Upload, keine Serveranfrage.
Die Ausgabe enthält HEX, RGB und HSL für jede erkannte Farbe. Von dort aus jeden Kandidaten im Kontrast-Checker prüfen, bevor er in die Design-Token des Projekts übernommen wird.
Wie lese ich eine genaue Farbe aus einem Screenshot ab?
Wenn eine Maquette oder ein Screenshot vorliegt, aber kein Design-Token-Export, hilft der Bildfarbwähler. Bild laden, Pixel anklicken, Ausgabe in HEX, RGB und HSL.
Kombination mit dem Kontrast-Checker: Textfarbe aufnehmen, Hintergrundfarbe aufnehmen, Paar prüfen. So lässt sich eine bestehende Implementierung auf BITV-Konformität testen, ohne Zugang zur Original-Design-Datei.