CSS color-contrast() Funktion

Von: Felix, Jonas

Barrierefreiheit und das Kontrastverhältnis von Text- und Hintergrundfarbe sind untrennbar. Die CSS-Funktion color-contrast() findet automatisch die kontrastreichste Farbkombination.

Aktualisiert von 2022 – 2023

Mit der nativen CSS-Funktion color-contrast() kann eine Liste von Farbwerten und ein Vergleichswert angegeben werden. Die Funktion gibt den Farbwert mit dem höchsten Kontrast zum Vergleichswert zurück. Dieser wird dann vom Browser verwendet.

Verwendung von color-contrast()

color-contrast(<Vergleichs-Farbe> vs <Farbe 1>, <Farbe 2>, <Farbe 3>, ...)

Die Syntax ist mehr oder weniger selbsterklärend: Innerhalb der Klammern der Funktion geben wir zuerst den Vergleichswert an, gefolgt von vs (versus, deu. gegen(übergestellt)) und der kommaseparierten Liste von Farbwerten. Es können alle im Web validen Farbcodes verwendet werden (#d0e5e7, rgb(20, 124, 133), lightseagreen, var(--kb--color), etc.).

Anwendungsbeispiel

Wir haben einen Bereich mit Boxen. Die Hintergrundfarbe der jeweiligen Box variiert in der Helligkeit und wird via CSS-Klasse gesteuert. Die Textfarbe der Boxen bestimmen wir mit color-contrast(var(--background-color) vs black, white).

Die Funktion prüft, zwischen welcher angebotenen Textfarbe und der aktuellen Hintergrundfarbe der Kontrast größer ist, und verwendet dann die jeweils kontrastreichere Farbkombination. In unserem Beispiel führt das dazu, dass die Textfarbe der letzten Box auf Schwarz wechselt.

.box {
    background-color: var(--background-color);
    color: color-contrast(var(--background-color) vs black, white);
}

.box--cat1 {
    --background-color: #125e65;
}

.box--cat2 {
    --background-color: #147c85;
}

.box--cat3 {
    --background-color: #1b98a3;
}

Der Kontrast zwischen Hintergrund und Textfarbe trägt stark zur Lesbarkeit von Texten bei und ist damit ein wesentlicher Bestandteil von Barrierefreiheit im Web. Wir sehen einer Entwicklung zu nativen CSS-Funktionen, die dies unterstützen, mit Freude entgegen.

Die color-contrast()-Funktion ist Teil der CSS Spezifikation Color Module Level 5 und muss zum Zeitpunkt des Verfassens dieses Artikels explizit im Browser aktiviert werden.

Geschrieben von:

Felix Lehmann

Als Team Lead für Design und Code bei kulturbanause verantwortet Felix die Konzeption, Gestaltung und Entwicklung komplexer Websites und Designsysteme. Er begleitet den gesamten Prozess – vom ersten Workshop bis zum Launch. Wenn er nicht selbst maßgeblich an der Umsetzung beteiligt ist, unterstützt er das Team bei der Umsetzung moderner, funktionaler Lösungen mit aktuellsten Browser-Technologien und ist die Schnittstelle zum Kundenteam.

Jonas Hellwig

Jonas ist Gründer der Agentur kulturbanause und des kulturbanause Blogs. Er arbeitet an der Schnittstelle zwischen UX/UI Design, Frontend und Redaktion und hat zahlreiche Fachbücher und Video-Trainings veröffentlicht. Jonas Hellwig ist regelmäßig als Sprecher auf Fachveranstaltungen anzutreffen und unterstützt mit Seminaren und Workshops Agenturen und Unternehmen bei der Planung, der Gestaltung und der technischen Umsetzung von Web-Projekten.

Jonas Hellwig bei Xing