Die Welt der Farben im Web – warum HSL ehrlicher ist als Hex
Sie halten Ihre Visitenkarte neben den Bildschirm, auf dem Ihre Website geöffnet ist – und der Blauton ist nicht derselbe. Das ist kein Einbildung. Die Welt der Farben am Bildschirm spielt nach eigenen Regeln, mit eigener Sprache und einem Kriterium, das in der Druckwelt kaum eine Rolle spielt: Lesbarkeit. Wer das einmal verstanden hat, trifft bessere Entscheidungen für die eigene Website – und erkennt sofort, woran erstaunlich viele Unternehmensseiten scheitern.
Drei Sprachen für ein und dieselbe Farbe
Im Web-Browser lassen sich Farben auf mindestens drei Arten beschreiben. Sie meinen jeweils dieselbe Farbe, aber sie unterscheiden sich darin, wie nützlich sie beim Arbeiten sind.
Hex – die Kurzschreibweise. Sechs Zeichen hinter einer Raute, etwa #1A2E44. Die ersten beiden Stellen stehen für Rot, die mittleren für Grün, die letzten für Blau, jeweils auf einer Skala von 00 bis FF. Hex ist kompakt und überall lesbar – aber niemand kann auf den ersten Blick sagen, ob #1A2E44 ein dunkles Blau, ein Anthrazit oder ein Marineton ist. Man muss es ausprobieren.
RGB – das Gleiche in Klartext. rgb(26, 46, 68) ist exakt dieselbe Farbe wie #1A2E44, nur mit dezimalen Zahlen statt Hex-Werten. Etwas leichter zu lesen, aber genauso wenig intuitiv. Wenn Sie aus diesem Blau ein leicht helleres machen wollen, müssen Sie alle drei Werte gleichmäßig anheben – und hoffen, dass die Mischung trotzdem stimmt.
HSL – die Sprache, die wie ein Mensch denkt. hsl(213, 45%, 18%) bedeutet: Farbton 213 Grad (im Blaubereich), Sättigung 45 Prozent, Helligkeit 18 Prozent. Drei Regler statt drei Mischfarben. Wer den Wert für die Helligkeit von 18 auf 30 hebt, bekommt exakt dasselbe Blau in heller. Wer die Sättigung von 45 auf 20 senkt, bekommt einen gedämpften Ton derselben Farbfamilie. Genau so, wie man es im Kopf erwarten würde.
Browser akzeptieren alle drei Schreibweisen seit Jahren. Sie können in derselben CSS-Datei Hex, RGB und HSL mischen. Welche Sprache Sie wählen, ist eine Frage des Komforts beim Arbeiten – und HSL ist beim Komfort uneinholbar voraus.
Drei Schreibweisen – exakt dieselbe Farbe.
Warum HSL für Markenfarben das ehrlichere Werkzeug ist
Eine Website besteht selten aus genau einer Markenfarbe. Sie braucht den Hauptton für das Logo und Überschriften, eine etwas hellere Variante für Hintergründe, eine dunklere für Hover-Zustände, dazu Akzente für Buttons, Links und Warnhinweise. In Hex bedeutet das oft: stundenlanges Probieren mit dem Farbwähler, bis die Töne harmonieren. In HSL bleibt der Farbton konstant, und nur die Helligkeit wandert.
Ein Beispiel aus der Praxis. Die Primärfarbe sei hsl(28, 92%, 56%) – ein warmes Orange. Eine Variante für den Hover-Zustand soll dunkler sein. In HSL: einfach die Helligkeit von 56 auf 46 absenken. Fertig. In Hex müsste man den Farbwähler bemühen oder mit Tools rechnen. Eine Variante für einen leicht ausgegrauten, weil deaktivierten Button? Sättigung von 92 auf 35 reduzieren. Auch fertig.
Hinzu kommt: Wenn Sie später beschließen, dass das Orange einen Tick mehr Richtung Rot soll, ändern Sie nur den Farbton von 28 auf 22. Alle Varianten ziehen mit, weil sie auf demselben Farbton basieren. In Hex müssten Sie jeden einzelnen Wert neu berechnen.
Designer und Entwickler, die mit modernen CSS-Variablen arbeiten, definieren ihre Markenfarben deshalb in HSL und leiten alle Varianten daraus ab. Das Ergebnis ist eine Palette, die in sich stimmig bleibt, auch wenn man später daran dreht.
Regler 1: Farbton (Hue)
hsl(0°→315°, 70%, 50%) – nur der Farbton wandert
Regler 2: Sättigung (Saturation)
hsl(28°, 100%→0%, 56%) – aus Orange wird Schritt für Schritt Grau
Regler 3: Helligkeit (Lightness)
hsl(28°, 85%, 90%→10%) – derselbe Orange-Ton, von ganz hell bis ganz dunkel
Hellgrau auf Weiß sieht edel aus – aber niemand kann es lesen
Es gibt einen Designtrend, der seit Jahren nicht verschwindet: helle, zarte Schriftfarben auf weißem Untergrund. Hellgrauer Text in #999 oder noch heller, weil das ruhig und elegant wirken soll. Auf Designer-Bildschirmen mit perfekter Helligkeit und großen Augen sieht das gut aus. Auf einem Bürorechner mit verschmierter Anzeige, in der Mittagssonne, mit fünfzig Jahren Lebenserfahrung in den Augen – ist dieser Text praktisch unsichtbar.
Es gibt eine messbare Größe dafür: das Kontrastverhältnis. Es vergleicht die Helligkeit von Text und Hintergrund und liefert einen Wert zwischen 1:1 (gleich, also unleserlich) und 21:1 (Schwarz auf Weiß). Die internationale Norm WCAG 2.1 verlangt für gewöhnlichen Fließtext mindestens 4,5:1, für große Schrift ab 18 Punkt oder fett ab 14 Punkt mindestens 3:1.
Was das in der Praxis bedeutet, zeigt ein Vergleich. Hier sind drei Schriftfarben auf Weiß und ihr jeweiliges Kontrastverhältnis:
| Schriftfarbe | Kontrast auf Weiß | WCAG-Bewertung |
|---|---|---|
| Beispieltext in #CCC | 1,6:1 | Durchgefallen, auch für große Schrift |
| Beispieltext in #999 | 2,8:1 | Durchgefallen für Fließtext |
| Beispieltext in #767676 | 4,54:1 | Bestanden für Fließtext (knapp) |
| Beispieltext in #444 | 9,7:1 | Bestanden, auch für AAA |
Die Faustregel: Wenn Sie Ihre Schriftfarbe mit drei oder mehr 9er-Hex-Stellen schreiben, ist sie zu hell. #777 ist die untere Grenze für Fließtext, #444 bis #222 sind die sichere Wahl.
Seit 28. Juni 2025 ist Lesbarkeit Pflicht – das BFSG
Bis Mitte 2025 war Farbkontrast eine Frage des guten Geschmacks. Seitdem ist er für viele Unternehmen Gesetz. Das Barrierefreiheitsstärkungsgesetz (BFSG) setzt eine europäische Richtlinie in deutsches Recht um und gilt seit 28. Juni 2025 verbindlich.
Wer betroffen ist. Unternehmen, die digitale Produkte oder Dienstleistungen für Verbraucher anbieten – also Online-Shops, Buchungsplattformen, Bank-Apps, E-Books, Personenverkehr. Kleinstunternehmen mit weniger als zehn Beschäftigten und höchstens zwei Millionen Euro Jahresumsatz sind bei Dienstleistungen ausgenommen. Reine B2B-Anbieter ebenso. Alles dazwischen muss liefern.
Was konkret verlangt wird. Die WCAG 2.1 auf Konformitätsstufe AA. Für Farben heißt das: 4,5:1 Kontrast für Fließtext, 3:1 für große Schrift, 3:1 auch für Bedienelemente und Grafiken, die Information tragen. Außerdem: Information darf nicht ausschließlich über Farbe vermittelt werden. Ein roter Pflichtfeld-Hinweis ohne zusätzliches Sternchen oder Text reicht nicht.
Was bei Verstößen droht. Die Marktüberwachungsbehörden der Länder können Mängel bemängeln, Fristen setzen und Bußgelder bis 100.000 Euro verhängen. Wettbewerber können bei klaren Verstößen abmahnen. In den ersten Monaten ist die Praxis noch milde, aber die rechtliche Grundlage steht – und Verbraucherverbände werten Stichproben aus.
Der Praxiseffekt ist eindeutig: Hellgrau auf Weiß ist nicht nur unhöflich gegenüber Lesern – es ist auf vielen Websites jetzt rechtlich angreifbar.
Der Fünf-Minuten-Kontrast-Check für Ihre eigene Website
Sie brauchen kein Spezialwissen, um die größten Schwachstellen zu finden. Der folgende Ablauf liefert in fünf Minuten ein belastbares Bild.
Schritt 1: WebAIM Contrast Checker öffnen. Die Adresse webaim.org/resources/contrastchecker ist das gängige Werkzeug. Sie geben zwei Hex-Codes ein – Vordergrund und Hintergrund – und sehen sofort das Verhältnis und ob es WCAG AA und AAA besteht.
Schritt 2: Die typischen Verdächtigen prüfen. Auf den meisten Websites kommen drei Stellen häufig durchgefallen daher: erstens helle Fließtexte mit Werten um #999, zweitens Bilduntertitel und Datumsangaben in dezentem Grau, drittens Footer-Links und Disclaimer-Hinweise, die niemand lesen können soll.
Schritt 3: Browser-Tools nutzen. In Chrome und Edge öffnen Sie die Entwickler-Werkzeuge mit F12, klicken auf einen Text und sehen das Kontrastverhältnis direkt im Stil-Bereich. Firefox bietet im Inspektor einen eigenen Reiter für Barrierefreiheit, der die ganze Seite auf Kontrastprobleme prüft. Beides braucht keine Installation.
Schritt 4: Buttons gegen ihren Hintergrund testen. Ein orangefarbener Button mit weißer Schrift erreicht oft nur 2,8:1 Kontrast – durchgefallen. Die Lösung ist meistens nicht eine andere Markenfarbe, sondern dunkler werden: aus dem hellen Orange einen Ton mit niedrigerer Helligkeit machen oder die Schrift schwarz statt weiß setzen.
Schritt 5: Lighthouse oder axe DevTools laufen lassen. Lighthouse ist in Chrome und Edge eingebaut (F12, Reiter „Lighthouse"). Die Erweiterung axe DevTools ist kostenarm und liefert eine vollständige Liste der Kontrastfehler einer Seite, mit Klickziel direkt auf das Element. Wer sich nicht auf einzelne Stichproben verlassen will, läuft hiermit über alle Hauptseiten und hat die Liste der Baustellen.
Drei Prinzipien für eine belastbare Farbpalette
Erstens: Eine Hauptfarbe, ein Akzent, eine Grauskala. Mehr braucht eine Unternehmens-Website fast nie. Hauptfarbe für Logo und Überschriften, Akzent für Buttons und Verlinkungen, Grau in vier oder fünf Helligkeitsstufen für Text, Hintergründe und Trennlinien. Wer mit diesen Bausteinen arbeitet, baut Konsistenz fast nebenbei.
Zweitens: HSL als Werkzeug, Hex als Ausgabe. Definieren Sie Ihre Markenfarbe einmal in HSL und leiten Sie alle Varianten – heller, dunkler, gedämpft – aus dem gleichen Farbton ab. Im Code-Editor steht dann am Ende meist Hex, weil es kompakter ist. Aber die Logik dahinter ist HSL.
Drittens: Immer gegen Weiß und Schwarz testen. Jede Farbe muss in beiden Richtungen funktionieren. Ein Mittelblau, das auf Weiß zu hell ist und auf Schwarz zu dunkel, ist als Akzentfarbe unbrauchbar – egal wie schön es als Hex-Code aussieht. Der Kontrast-Test gegen Weiß und gegen den dunkelsten Hintergrund-Ton der Seite ist Pflicht, bevor eine Farbe ins Stylesheet wandert.
So sieht eine kompakte Markenpalette aus
Primär dunkel · Primär hell · Akzent · Akzent hell · Text · Text mittel · Sekundär · Trennlinie
Verwandte Themen
Website wird bei Google nicht gefunden – sieben Ursachen, eine Lösung
KI statt Homepage-Baukasten – warum die nächste Generation Websites anders entsteht
WordPress-Fehler „Datenbankverbindung" – Erste Hilfe ohne Datenverlust
Barrierefreiheit nach BFSG – Audit und Umsetzung in der Manufaktur
Häufig gestellte Fragen
Warum sieht meine Markenfarbe auf dem Bildschirm anders aus als auf gedrucktem Briefpapier?
Bildschirme arbeiten mit Licht (RGB), Druck mit Pigmenten (CMYK oder Pantone). Beide Welten können nicht jede Farbe der jeweils anderen exakt darstellen. Ein leuchtendes Orange am Bildschirm wird im Druck zwangsläufig matter, ein satter Druck-Blauton am Bildschirm oft kühler. Saubere Markenarbeit definiert deshalb für jeden Kanal einen eigenen verbindlichen Wert: Pantone für Druck, Hex oder HSL für Web, RGB für Office-Vorlagen.
Reicht es, wenn meine Hauptseite WCAG-AA-konform ist?
Nein. Das BFSG verlangt Konformität für die gesamte Customer Journey, also auch Produktseiten, Warenkorb, Checkout, Bestätigungs-Mails, AGB- und Impressum-Seiten. Footer-Links, Cookie-Banner und Newsletter-Anmeldung gehören dazu. Eine Website, deren Startseite tadellos ist und deren Footer in #bbb verschwindet, ist nicht konform.
Was, wenn meine Markenfarbe selbst zu hell für ausreichenden Kontrast ist?
Sie behalten die Markenfarbe für Logo und Akzente, verwenden für Schrift und Bedienelemente aber eine dunklere Variante derselben Farbfamilie. In HSL ist das eine Sache von Sekunden – Helligkeit absenken, Sättigung leicht reduzieren, fertig. Die Markenidentität bleibt erhalten, der Kontrast stimmt.
Sind dunkle Hintergründe mit hellem Text immer ein Problem?
Im Gegenteil – Schwarz auf Weiß und Weiß auf Schwarz erreichen beide das Maximum von 21:1. Dunkle Hintergründe sind also unkritisch, solange der Text hell genug ist. Problematisch wird es erst bei mittleren Tönen: dunkelgrauer Text auf mittelgrauem Hintergrund, helles Blau auf hellem Grau. Das Kontrast-Werkzeug zeigt das in jedem Einzelfall.
Wie weiß ich, ob mein Webdesigner Farben sauber definiert hat?
Drei Anzeichen: Erstens, es gibt eine Stilvorgabe oder ein „Style Guide"-Dokument mit benannten Farben (Primärfarbe, Akzent, Graustufen) und nicht nur eine Liste von Hex-Codes ohne Kontext. Zweitens, im CSS finden sich Variablen wie --color-primary oder --text-mid, nicht überall hartkodierte Hex-Werte. Drittens, die Website besteht den WCAG-Test ohne Nacharbeit. Wer keinen Style Guide vorweisen kann, hat das Thema nicht systematisch bearbeitet.