Accent-color - Propriété CSS

Schéma de la syntaxe de accent-color.

Description des termes utilisés sur le schéma :

• color-name est le nom d'une couleur. 140 couleurs environ ont reçu un om standardisé : voir Nuancier.
• #xxxx est le code hexadécimal d'une couleur, sur 3 ou 6 digits, ou 8 pour indiquer une transparence.
• color est une couleur spécifiées par l'une des fonctions rgb() ou rgba(), hsl() ou hsla(), hwb(), lab(), oklab(), lch(), oklch(), color(), color-mix().

Description de la propriété accent-color.

La propriété accent-color définit la couleur des éléments sélectionnés. Elle s'applique essentiellement aux éléments suivants :

• Case à cocher lorsqu'elle est cochée.  
• Bouton radio lorsqu'il est sélectionné.  
• Partie gauche des zones de saisie du type range.  
• Partie gauche des barres de progression.  

Les navigateurs peuvent être amenés à modifier les autres couleurs des contrôles afin de maintenir un contraste élevé, par exemple la coche des cases à cocher. Ils peuvent également générer des différences minimes dans les couleurs pour permettre les gradients. Les modes d'affichage dark et light (sélectionnables par color-scheme) sont également pris en compte.

Valeurs pour accent-color.

• accent-color: auto;

  Le navigateur décide quelle sera la couleur des éléments sélectionnés ou cochés (formulaire). En général la couleur est choisie pour maximiser le contraste avec les éléments non sélectionnés ou non cochés.

  
  accent-color:auto;

• accent-color: currentColor;

  Les éléments sélectionnés ou cochés d'un formulaire seront de la même couleur que le texte.

  
  accent-color:currentColor;

• accent-color: #00AA00;

  Une couleur exprimée dans n'importe laquelle des syntaxes reconnues par CSS (voir Les couleurs). Le navigateur peut éventuellement adapter les autres couleurs pour maintenir le contraste.

  
  accent-color:#00AA00;

• accent-color: initial; (auto) accent-color: inherit; accent-color: revert; accent-color: revertLayer; accent-color: unset;

  Les valeurs communes sont présentées sur ces pages : initial, inherit, revert, revert-layer, unset.

Exemple d'animation de accent-color.

Comme toutes les propriétés relatives aux couleurs, accent-color peut être animée de façon très fluide. On voit que certains navigateur (Chrome  , Edge  , etc.) maintiennent le contraste avec les autres parties des contrôles, ce qui donne l'impression d'une animation qui passe brutalement d'une valeur à l'autre. Dans notre exemple, les couleurs ont été définies avec la fonction hsl().

Accéder à la propriété accent-color par programme.

Avec Javascript, modifier la valeur de accent-color.

Voici comment modifier la valeur de accent-color avec Javascript. On voit que Javascript propose une syntaxe avec la notation typique de CSS, en kebab-case (un tiret pour séparer les mots), et une autre syntaxe avec la notation en camel-case (une majuscule pour séparer les mots).

let el = document.getElementById('id'); el.style['accent-color'] = 'cyan'; // ou let el = document.getElementById('id'); el.style.accentColor = 'cyan';

Avec Javascript, lire la valeur de accent-color.

Ce code récupère la valeur de la propriété accent-color affectée directement à l'élément lui-même via son attribut style, ou par le code précédent, mais non pas la valeur affectée via un sélecteur CSS.

let el = document.getElementById('id'); let value = el.style['accent-color']; // ou let el = document.getElementById('id'); let value = el.style.accentColor;

Avec Javascript, lire la valeur calculée de accent-color.

La valeur calculée est celle qui résulte de l'évaluation des différentes syntaxes pour exprimer une couleur.
la couleur est retournée sous la forme rgb(r,g,b), ou rgba(r,g,b,a) si l'opacité n'est pas totale.

let el = document.getElementById('id'); let value = window.getComputedStyle(el).getPropertyValue('accent-color');

Avec JQuery, modifier la valeur de accent-color.


$('#id').css('accent-color', 'cyan');
// ou
$('#id').css('accentColor', 'cyan');


Avec JQuery, lire la valeur calculée de accent-color.

let value = $('#id').css('accent-color');

Autres exemples de code.

D'autres exemples de code Javascript et JQuery sont donnés sur la page Javascript et CSS.

Testez vous-même.

Les boutons ci-dessous appliquent la valeur saisie à la propriété accent-color et affichent ensuite, pour le premier bouton la valeur telle qu'elle a été appliquée, et pour le deuxième bouton, la valeur calculée. Cette dernière permet de voir comment est mémorisée (sérialisée) la valeur de accent-color. On constate que la couleur est sérialisée sous la forme rgb(...) ou rgba(...).

Exemple interactif avec la propriété accent-color.

En manipulant le simulateur, vous remarquerez que la partie droite des curseurs ou celle des barres de défilement sont également impactées par la valeur de accent-color. En effet lorsqu'une couleur claire est demandée pour la partie gauche, la partie droite est forcée dans une couleur foncée pour maintenir un contraste très net entre la partie droite et la partie gauche.

Compatibilité des navigateurs avec accent-color.

La propriété accent-color est bien prise en charge par les navigateurs actuels, comme le montre le tableau de compatibilité ci-dessous (à part une particularité avec Safari  ).

Remarques :

(1) Ne maintient pas un contraste minimum.

1

Propriété
accent-color

Estimation de la prise en charge globale.

78%

Navigateurs sur ordinateurs :

Navigateurs sur mobiles :

Navigateurs obsolètes ou marginaux :

Internet Explorer

UC Browser pour Androïd

Opéra Mobile

1

QQ Browser

Baidu Browser

Safari

1

Samsung Internet

1

Chrome

Edge

Firefox

Opéra

Chrome pour Androïd

1

Safari sur IOS

1

Androïd Brower

1

Firefox pour Androïd

KaiOS Browser

Opéra mini

Voir le site Caniuse.com pour plus d'informations de compatibilité.

Caniuse

Histoire de la propriété accent-color.

• Module CSS - Interface utilisateur de base - Niveau 4

  Concernant accent-color. Première définition de la propriété accent-color.
  

  22 Septembre 2015

  Document de travail.

  

  

  

Voir aussi, au sujet de la stylisation de l'interface utilisateur.

Les possibilités de personnalisation ou de stylisation de l'interface utilisateur (UI) sont décrites dans la spécification module CSS - Interface utilisateur de base du W3C.

Propriétés :