Kids> farben
Farben
Farbwerte umrechnen, Kontrast prüfen und Abstufungen erzeugen, für Website, Vorlage und Druckerei.
HEX (#C6FF3D), rgb(198, 255, 61), hsl(78, 100%, 62%) oder ein Name wie türkis.
Das lässt sich nicht als Farbe lesen. Beispiele: #C6FF3D, rgb(198, 255, 61), hsl(78, 100%, 62%), türkis.
CMYK ist hier eine einfache Umrechnung ohne Farbprofil. Was aus der Druckmaschine kommt, hängt vom Profil und vom Papier ab. Gib der Druckerei im Zweifel den HEX- oder RGB-Wert und lass sie umrechnen.
Das lässt sich nicht als Farbe lesen, zum Beispiel #333333 oder rgb(51, 51, 51).
Das lässt sich nicht als Farbe lesen, zum Beispiel #FFFFFF oder rgb(255, 255, 255).
Warum das zählt: Zu wenig Kontrast liest sich am Handy in der Sonne, mit älteren Augen oder auf einem billigen Bildschirm einfach nicht mehr. Und für viele Online-Shops und gewerbliche Dienstleistungen ist Barrierefreiheit seit Juni 2025 auch gesetzlich gefordert.
Gib zwei Farben ein.
Großer Text: ab 24 px
Auch groß: ab 19 px, wenn er fett ist
Normaler Text in 16 px. Lies diesen Satz einmal ganz durch: Wenn du dabei die Augen zusammenkneifst oder näher rangehst, ist der Kontrast zu schwach, egal was die Zahl oben sagt.
Für den Kontrast wird mit voller Deckkraft gerechnet. Bei durchsichtigen Farben zählt, was am Ende wirklich darunter liegt.
Das lässt sich nicht als Farbe lesen, zum Beispiel #4169E1 oder königsblau.
Heller und dunkler heißt hier: der Farbton und die Sättigung bleiben stehen, nur die Helligkeit geht anteilig Richtung Weiß oder Schwarz. Die Komplementärfarbe liegt auf dem Farbkreis genau gegenüber.
Gerechnet wird nur auf deinem Gerät. Nichts wird hochgeladen oder gespeichert.
So funktioniert's
- 01Farbe eintippen oder über das kleine Farbfeld auswählen: HEX, rgb(), hsl() oder ein Name wie türkis.
- 02Alle Schreibweisen stehen sofort daneben, jede mit einem Knopf zum Kopieren.
- 03Die Adresse merkt sich den Reiter, zum Beispiel bnkz.de/farben/#kontrast.
Der Kontrast wird nach WCAG 2.1 gerechnet: aus der relativen Leuchtdichte beider Farben entsteht ein Verhältnis von 1:1 (gleich) bis 21:1 (Schwarz auf Weiß). Normaler Text braucht 4,5:1 für AA und 7:1 für AAA. Großer Text braucht nur 3:1 für AA und 4,5:1 für AAA. Groß heißt ab 24 px oder ab 18,66 px fett. Bei durchsichtigen Farben ist die Zahl nur ein Anhaltspunkt: gerechnet wird mit voller Deckkraft, weil sonst zählt, was darunter liegt.
Die Namensliste ist klein und selbst gemacht: die gängigen CSS-Farbnamen und deutsche Namen dafür. Umlaute kannst du schreiben wie du magst, türkis und tuerkis gehen beide. HSL wird beim Anzeigen auf ganze Zahlen gerundet. Rechnest du den gerundeten Wert zurück, kann jeder Farbkanal um ein bis drei Stufen abweichen. CMYK ist eine Näherung ohne Farbprofil und ersetzt keine Umrechnung durch die Druckerei.