Couleur

Couleur accessible

N'utilisez pas uniquement la couleur pour indiquer la présence d'un composant d'interface utilisateur ou son état : utilisez l'iconographie et/ou la forme pour faciliter la différenciation. N'indiquez pas la réussite ou les erreurs UNIQUEMENT avec de la couleur. Utilisez des icônes ou du texte.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Contraste

• Normes de contraste minimales : maintenez un rapport de 4,5:1 pour le texte normal et de 3:1 pour le texte de grande taille ou les icônes.
• Respectez les normes de contraste pour les éléments non textuels : maintenez un rapport de contraste minimal de 3:1 pour les limites et les états des composants de l'interface utilisateur.
  • Cela inclut les éléments visuels (bordures, arrière-plans, ombres de boîte, soulignements) qui forment la limite ou indiquent la présence d'un composant d'interface utilisateur (par exemple, les bordures d'un champ de saisie).
  • Cela inclut également les éléments visuels indiquant les états actifs d'un composant (par exemple, les coches des cases à cocher ou les curseurs des boutons d'activation).
  • Inconvénient : Atteindre un contraste de 3:1 pour les éléments non textuels peut s'avérer difficile pour les conceptions minimalistes. Les dégradés doux ou les ombres subtiles en relief ou en creux peuvent adoucir les limites visuelles tout en respectant les exigences d'accessibilité.
• N'utilisez prefers-contrast que lorsque cela est nécessaire : utilisez @media (prefers-contrast: more) lorsque la conception utilise des accents à faible contraste (par exemple, des bordures subtiles, du texte secondaire atténué) qui doivent être renforcés. La plupart des sites qui respectent déjà le contraste de base n'en auront pas besoin.

Jeux de couleurs clairs et sombres

• Prendre en charge les jeux de couleurs clairs et sombres : respectez @media (prefers-color-scheme: dark) et associez-le à la propriété CSS color-scheme pour que les commandes de formulaire, les barres de défilement et les autres surfaces affichées par l'agent utilisateur correspondent. Pour en savoir plus, consultez Mode sombre.

Mode Couleurs forcées

• Prise en charge du mode Couleurs forcées : en mode Couleurs forcées (contraste élevé sous Windows), le navigateur remplace les couleurs de l'auteur par des mots clés système et supprime background-image, box-shadow et border-image. Définissez des couleurs de remplacement du système pour les jetons de couleur à l'aide de @media (forced-colors: active).
• N'utilisez forced-color-adjust: none que lorsque la couleur est une information essentielle (mise en surbrillance de la syntaxe, échantillon du sélecteur de couleur). À ÉVITER : Utiliser forced-color-adjust: none uniquement pour préserver l'esthétique.
• Ne vous fiez pas à background-image, box-shadow ou border-image pour transmettre des bordures, des séparateurs ou un état : ils disparaissent dans les couleurs forcées (et souvent aussi à l'impression). Si vous devez le faire, assurez-vous qu'il existe une alternative en mode Couleurs forcées, comme outline ou border avec des mots clés de couleur système (CanvasText, LinkText, ButtonText, Highlight, GrayText, etc.).

Génération des teintes…

Avant de générer des teintes de manière dynamique, vérifiez si vous pouvez utiliser un jeton de conception prédéfini existant. Cela permet au concepteur d'avoir un contrôle beaucoup plus précis et d'assurer la cohérence.

Si vous devez générer des couleurs plus claires ou plus sombres de manière dynamique :

• NE vous contentez PAS d'ajuster le canal de luminosité dans oklch/oklab ou lch/lab, par exemple oklab(from var(--primary) 0.9 a b). Bien que ce soit théoriquement la bonne méthode, les navigateurs n'implémentent pas encore le mappage de gamut. La couleur obtenue est donc imprévisible.
• Vous pouvez utiliser color-mix() pour mélanger avec du blanc ou du noir (de préférence dans oklab). Cela permet de conserver la couleur dans la gamme, mais a tendance à trop désaturer les couleurs et à produire des teintes et des nuances délavées.
• Vous POUVEZ combiner l'ajustement de la luminosité avec l'une des autres méthodes (par exemple, color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) pour trouver un équilibre entre les deux, mais évitez de dépasser 30 % pour l'ajustement de la luminosité.