Guide developpeur

Couleurs de boutons accessibles pour interfaces WCAG

Les boutons demandent un bon contraste car ils portent les actions importantes. Testez le texte et la limite du bouton par rapport au fond.

Etats de bouton accessibles

.button-primary {
  background: #1d4ed8;
  color: #ffffff;
}

.button-danger {
  background: #b91c1c;
  color: #ffffff;
}

.button-disabled {
  background: #e5e7eb;
  color: #6b7280;
}

Checklist developpeur

  • Verifiez le contraste du texte pour chaque etat.
  • Ne communiquez pas seulement par la couleur.
  • Gardez les boutons desactives visibles mais clairement inactifs.

Outils lies

Autres guides developpeur

Formats CSSVariables CSSClasses TailwindCouleurs ReactGradients CSSDesign tokens