How to have the browser pick a contrasting color in CSS

Link: https://webkit.org/blog/16929/contrast-color/

Waar gaat de blogpost over?

In dit artikel introduceert Jen Simmons de nieuwe CSS-functie contrast-color(), die het mogelijk maakt voor de browser om automatisch een contrasterende kleur (zwart of wit) te kiezen ten opzichte van een gegeven achtergrondkleur. Dit maakt het ontwerpen van toegankelijke en leesbare interfaces makkelijker, vooral bij het gebruik van variabele achtergrondkleuren.

Wat heb ik geleerd?

• Automatische contrastkleur: Met contrast-color() kan de browser automatisch kiezen tussen zwart of wit, afhankelijk van welke kleur het beste contrasteert met de opgegeven achtergrondkleur.
• Gebruik met CSS-variabelen: Door contrast-color() te combineren met CSS-variabelen, kunnen ontwikkelaars dynamisch de tekstkleur aanpassen op basis van de achtergrondkleur.
• Integratie met Relative Color Syntax: In combinatie met de Relative Color Syntax kunnen ontwikkelaars ook hover-effecten creëren die automatisch een geschikte tekstkleur kiezen.
• Beperkte browserondersteuning: Op dit moment wordt contrast-color() alleen ondersteund in Safari (venderprefix -webkit-contrast-color), omdat het nog geen onderdeel is van een breed geaccepteerde CSS-specificatie.

Voorbeeldcode

:root {
  --button-color: purple;
  --hover-color: oklch(from var(--button-color) calc(l + .2) c h);
}

button {
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
  text-box: cap alphabetic;
}

button:hover {
  background-color: var(--hover-color);
  color: contrast-color(var(--hover-color));
}

Wat vind ik interessant?

De introductie van contrast-color() biedt een elegante oplossing voor een veelvoorkomend probleem in webdesign: het waarborgen van voldoende contrast tussen tekst en achtergrond. Het automatiseren van deze keuze vermindert de kans op menselijke fouten en draagt bij aan de toegankelijkheid van webinterfaces. Dat het op dit moment alleen in Safari werkt, toont ook hoe vooruitstrevend Safari soms is met CSS.

Wat betekent dit voor mijn ontwikkeling?

Deze functie moedigt me aan om meer gebruik te maken van dynamische CSS-functies en -variabelen om de toegankelijkheid en leesbaarheid van mijn webprojecten te verbeteren. Tegelijkertijd is het een reminder dat ik nieuwe features altijd moet controleren op browserondersteuning, zeker wanneer ik experimentele functies wil inzetten in productie.