- En CSS,
contrast-color() permet au navigateur de choisir une couleur de texte noire ou blanche adaptée à une couleur qui change souvent, comme l’arrière-plan d’un bouton, ce qui réduit la charge de gestion des paires de couleurs
- En passant une couleur de référence, par exemple
color: contrast-color(var(--button-color));, l’option produisant le contraste le plus élevé est recalculée lorsque la couleur d’arrière-plan change
- Actuellement, Safari Technology Preview utilise l’algorithme de contraste WCAG 2 et choisit du texte noir sur un arrière-plan
#317CFF, même si, du point de vue de la perception humaine, le blanc peut sembler plus naturel
- Cette fonctionnalité ne garantit pas automatiquement l’accessibilité ; une validation du design reste nécessaire, notamment pour la palette, la taille du texte, la graisse de la police et
prefers-contrast
- Le CSS Working Group limite pour l’instant la fonctionnalité au choix entre noir et blanc, en attendant la fin des discussions sur l’algorithme de contraste de WCAG 3 ; des outils de sélection de couleurs plus complexes pourraient être ajoutés par la suite
La charge de gestion des couleurs allégée par contrast-color()
- Lorsqu’on crée des boutons avec plusieurs couleurs d’arrière-plan dans un site ou une application web, il faut associer un texte blanc aux arrière-plans sombres et un texte noir aux arrière-plans clairs
- Jusqu’ici, il fallait définir
--button-color et --button-text-color ensemble pour gérer des paires de couleurs, et dans les grands projets ou les environnements impliquant plusieurs équipes, il est difficile de maintenir en permanence les bonnes combinaisons
- Avec
contrast-color(), lorsqu’on lui passe une couleur de référence en CSS, le navigateur choisit entre noir et blanc la couleur offrant le contraste le plus élevé
color: contrast-color(purple);
- Pour un bouton, on peut appliquer à la fois une variable de couleur d’arrière-plan et
contrast-color()
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
}
- Avec cette approche, il suffit de définir une seule couleur d’arrière-plan : le navigateur détermine la couleur du texte en conséquence
Dériver les couleurs des différents états à partir d’une seule variable
- En l’associant à la Relative Color Syntax, on peut créer une couleur de hover à partir de la couleur de base du bouton, puis calculer aussi la couleur du texte de chaque état avec
contrast-color()
: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; /* vertically centers the text */
}
button:hover {
background-color: var(--hover-color);
color: contrast-color(var(--hover-color));
}
Les résultats parfois étranges des calculs basés sur WCAG 2
contrast-color() ne résout pas automatiquement tous les problèmes de contraste liés à l’accessibilité- Certaines couleurs d’arrière-plan peuvent ne pas offrir un contraste suffisant avec le noir comme avec le blanc ; une vérification par les designers, développeurs et testeurs reste nécessaire
- En mai 2025, l’implémentation de Safari Technology Preview utilise l’algorithme WCAG 2
- Sur un arrière-plan bleu
#317CFF, WCAG 2 calcule un contraste de 5.45:1 avec du texte noir
- Sur ce même arrière-plan, le contraste avec du texte blanc est calculé à 3.84:1
contrast-color() choisit donc le noir, qui correspond au chiffre le plus élevé
- Du point de vue de la perception humaine, le blanc peut sembler meilleur dans cette combinaison, et l’algorithme de contraste des couleurs de WCAG 2 fait l’objet de critiques depuis longtemps
Les discussions sur les algorithmes de contraste avec APCA et WCAG 3
- L’Accessible Perceptual Contrast Algorithm (APCA) est l’un des candidats susceptibles d’être inclus dans WCAG 3
- L’APCA Contrast Calculator évalue le texte noir sur un arrière-plan
#317CFF à Lc 38.7, et le texte blanc à Lc -70.9
- Dans le score APCA, une valeur négative signifie que le texte est plus clair que l’arrière-plan
- L’ampleur du contraste se compare avec 38.7 et 70.9, sans tenir compte du signe
- Dans ce résultat, le contraste du texte blanc est plus élevé
- APCA met l’accent sur le contraste fondé sur la perception, plutôt que sur un simple ratio mathématique, et reflète le fait que les humains ne perçoivent pas le contraste de façon linéaire selon la couleur et la luminosité
- La norme CSS impose encore l’utilisation de l’algorithme existant, mais inclut une note indiquant que d’autres algorithmes de contraste pourront être ajoutés à l’avenir
- Le choix de l’algorithme à utiliser dans WCAG 3 et la manière de gérer les licences des algorithmes candidats restent en discussion
Les conditions à vérifier dans un design réel
- Le fait que
contrast-color() choisisse une meilleure couleur ne signifie pas qu’un contraste suffisant est garanti
- Sur les couleurs de tons moyens en particulier, les résultats peuvent varier fortement selon l’algorithme
- Pour les utilisateurs qui souhaitent un contraste plus élevé, on peut aussi utiliser la media query
prefers-contrast
@media (prefers-contrast: more) {
/* styling with more contrast */
}
- Dans l’exemple, la couleur d’arrière-plan du bouton de marque pour le site web d’une pépinière est
#2DAD4E
- Selon APCA, le contraste avec du texte blanc est de Lc -60.4
- Le caractère suffisant de cette valeur dépend de la taille du texte et de la graisse de la police
- APCA utilise un score unique allant de Lc -108 à 106, au lieu du ratio de WCAG 2
- L’APCA Readability Criterion propose des objectifs de niveaux Bronze, Silver et Gold afin d’aider au choix de la taille et de la graisse du texte
- Dans l’exemple de calcul, la combinaison texte blanc et
#2DAD4E fonctionne avec du texte de 24 px en font-weight 400 ou plus ; pour utiliser font-weight 300, il faut au minimum 41 px
- Pour les utilisateurs qui demandent un contraste plus élevé, on peut définir des couleurs distinctes en mode clair et en mode sombre
- Mode clair : vert plus sombre et texte blanc, Lc -76.1
- Mode sombre : vert plus clair et texte noir, Lc 75.2
--button-color: #2DAD4E; /* brand green background */
@media (prefers-contrast: more) {
@media (prefers-color-scheme: light) {
--button-color: #419543; /* darker green background */
}
@media (prefers-color-scheme: dark) {
--button-color: #77CA8B; /* lighter green background */
}
}
button {
background-color: var(--button-color);
color: contrast-color(var(--button-color));
font-size: 1.5rem; /* 1.5 * 16 = 24px at normal zoom */
font-weight: 500;
}
- Dans l’environnement actuel, l’algorithme WCAG 2 pilote
contrast-color(), ce qui peut rendre son usage difficile pour ce site d’exemple
- Dans les projets où la couleur de marque est un vert plus sombre et où le choix noir/blanc donne le bon résultat, la fonctionnalité peut déjà être utile
contrast-color() est particulièrement utile lorsqu’il faut définir les couleurs de plusieurs états ou options, comme enabled/disabled, light/dark mode ou prefers-contrast
Pourquoi le choix a d’abord été limité au noir et au blanc
- La version actuelle de
contrast-color() est beaucoup plus simple que color-contrast(), qui figurait dans Safari Technology Preview 122
- Le CSS Working Group a choisi d’avancer d’abord avec un outil sélectionnant uniquement le noir ou le blanc en contraste avec une couleur de référence, alors que les discussions sur l’algorithme de contraste de WCAG 3 ne sont pas terminées
- En limitant les choix au noir et au blanc, le risque de casser des sites web si l’algorithme WCAG 2 change plus tard est réduit
- À l’avenir, des outils plus puissants pourraient permettre au navigateur de choisir dans une liste de couleurs personnalisée, ou de spécifier un niveau de contraste souhaité
contrast-color() peut être utilisé non seulement pour la couleur du texte, mais aussi pour plusieurs propriétés définissant des couleurs, comme l’arrière-plan ou les bordures
Aucun commentaire pour le moment.