CSS/Funktionen/contrast-color()

Browserunterstützung
caniuse.com

Die CSS-Funktion contrast-color() vergleicht einen Farbwert mit einer Liste von anderen Farbwerten und wählt den Wert mit dem höchsten Kontrast aus der Liste aus.

anwendbar auf

alle Farbangaben

Parameter

• gültige Farbangabe
• Schlüsselwort vs
• kommaseparierte Liste von mind. 2 Farbwerten

Beispiel

contrast-color(#008080 vs olive, var(--myColor), #d2691e)

Der Hexwert #008080 wird mit 3 Farbangaben verglichen - der Wert mit dem höchsten Kontrast wird verwendet.

Beachten Sie: Der „Wert mit dem höchsten Konstrast“ kann bei Hintergrundfarben wie rot oder grün oft trotzdem nicht ausreichen.
Wähle für den Hintergrund eine helle oder dunkle Farbe aus.

Siehe auch

• Dark Mode

  Lass' die Nutzer entscheiden:

  
   

Weblinks

• CSSWG: contrast-color() function
• MDN: contrast-color()
• Automated accessible text with contrast-color() Una Kravets
• Browser-Support: caniuse.com