Couleurs des boutons : texte, fond, bordure, survol et focus

Traiter chaque état comme une paire complète

Commencez par des rôles sémantiques d’état, pas par un échantillon de marque. Un bouton principal rempli comprend un libellé, un fond, une éventuelle bordure, une icône et une surface environnante. Le survol et l’activation peuvent changer le fond ; le focus ajoute un indicateur touchant à la fois le contrôle et la page. Un bouton secondaire ou à contour crée un autre ensemble de couleurs adjacentes. Consignez chaque premier plan, fond et limite. Ne concluez pas qu’un survol plus sombre convient parce que l’état par défaut convenait : le contraste du texte, la visibilité de la limite et la relation du focus se recalculent pour l’état réellement rendu.

• Énumérez les états par défaut, de survol, actif, focalisé, désactivé, en chargement et sélectionné réellement rendus par le composant.
• Consignez libellé, icône, fond, bordure, indicateur de focus et surface environnante pour chaque variante.
• Traitez primary, secondary, destructive et quiet comme des contrats distincts, pas un échantillon recoloré.
• Gardez la sémantique button native afin que clavier et nom accessible ne dépendent pas de la palette.

Mesurer texte, limite et focus selon leur fonction

Le libellé est évalué face au fond rendu du bouton. Le critère WCAG 2.2 1.4.3 demande généralement au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte selon ses définitions et exceptions. Le contraste non textuel concerne l’information visuelle nécessaire pour identifier composants et états ; lorsque fond ou bordure apporte cette information, testez-le face aux couleurs adjacentes selon 1.4.11. Les indicateurs de focus possèdent des exigences distinctes et restent perceptibles dans l’état focalisé. Un rapport unique ne certifie pas les trois rôles, car chaque comparaison implique d’autres pixels et un autre sens.

Implémenter les états sans perdre le focus

L’exemple emploie des couleurs explicites afin de mesurer chaque paire. Il reste illustratif, pas une palette universellement conforme : propriétés de police, surfaces voisines, rendu du navigateur et variantes exigent encore des tests. :focus-visible peut présenter un indicateur de style clavier marqué dans les navigateurs compatibles, tandis que la politique de support conserve un repli adapté. Le contour est décalé pour ne pas se confondre avec la bordure, mais peut toucher plusieurs fonds dans une mise en page dense. Ne supprimez jamais le contour de l’agent utilisateur sans remplacement au moins aussi visible dans chaque état et contexte de découpage.

.button {
  color: #ffffff;
  background: #4338ca;
  border: 2px solid #4338ca;
}

.button:hover { background: #3730a3; }
.button:active { background: #312e81; }
.button:focus-visible {
  outline: 3px solid #6d28d9;
  outline-offset: 3px;
}

.button[disabled] {
  color: #64748b;
  background: #e2e8f0;
  border-color: #cbd5e1;
}

Concevoir délibérément le survol, l’activation, le chargement et la désactivation

Le survol fournit un retour au pointeur et ne remplace pas le focus clavier. L’état actif ou enfoncé peut être bref, mais le libellé ne doit pas disparaître pendant l’activation. Pendant le chargement, le contrôle conserve un nom accessible et communique la progression sans dépendre uniquement d’un changement de couleur ; l’indicateur ne devrait pas déplacer la mise en page. Certains critères prévoient des exceptions pour les contrôles désactivés, mais les rendre extrêmement pâles empêche de comprendre les actions ou les blocages. Demandez si le contrôle doit vraiment être désactivé et placez une validation ou une explication à proximité lorsqu’une condition peut être corrigée.

• Recalculez le contraste du libellé après chaque changement de fond ; plus sombre n’est pas toujours meilleur.
• Gardez le survol comme retour au pointeur et un focus séparé visible pour la navigation au clavier.
• Associez le chargement à un état programmatique et à un nom accessible stable, pas seulement à une animation colorée.
• Désactivez uniquement les actions indisponibles et expliquez à proximité les conditions qui peuvent être corrigées.
• Ajoutez une sémantique comme aria-pressed pour les états sélectionné ou enfoncé lorsque le bouton sert de bascule.

Tenir compte d’alpha, dégradés, icônes et surfaces imbriquées

Fonds et bordures translucides n’ont pas une couleur finale indépendante de la page. Composez-les sur chaque surface permise avant de calculer le contraste. Pour un bouton en dégradé, vérifiez les positions pertinentes derrière libellé et icône, pas uniquement les extrémités. Une icône portant l’action demande une visibilité suffisante et un nom accessible via du texte visible ou un autre mécanisme ; une icône décorative ne doit pas provoquer d’annonce redondante. Dans une bannière, carte, boîte de dialogue, image ou conteneur désactivé, utilisez la couleur environnante réelle pour bordure et focus. Les jetons partagés valent seulement dans leurs contextes documentés.

Exécuter une matrice de composants avant publication

Rendez chaque variante sur chaque surface avec libellés, icônes, retours à la ligne et traductions réalistes. Naviguez au clavier, pointeur, toucher et avec les technologies d’assistance adaptées. Inspectez le focus au zoom normal et augmenté, notamment près des bords où overflow coupe le contour. Activez contraste élevé ou forced-colors et vérifiez que la sémantique native expose contrôles et états. Les contrôles automatiques aident pour les paires déterministes, mais dégradés, alpha, fonds dynamiques, animation et découpage exigent une inspection rendue. Rangez la matrice auprès des jetons afin de rejouer les mêmes preuves après changement.

• Rendez les variantes primary, secondary, quiet, destructive, icon-only et toggle présentes dans le produit.
• Exercez les états par défaut, de survol, actif, focalisé, en chargement, désactivé, adjacent à une erreur et sélectionné.
• Testez toutes les surfaces, notamment cartes, dialogues, bannières, tableaux et régions sur image.
• Recommencez contraste et focus après toute modification de typographie, espace, bordure, ombre ou jeton partagé.