Aller au contenu
ToolFarmToolFarm
Design

Vérifier le Contraste de Couleur (WCAG)

Vérifiez le contraste de couleur WCAG entre texte et fond, avec aperçus en direct, verdict réussite ou échec et suggestions accessibles.

2 min de lecture
Rapport de contraste9.99:1
Contraste excellent

Résultats WCAG

  • AA Texte grandRéussi
  • AAA Texte grandRéussi
  • AA Texte normalRéussi
  • AAA Texte normalRéussi
  • Composants d'UIRéussi

AA demande 4.5:1 pour le texte normal et 3:1 pour le texte grand. AAA demande 7:1.

Aperçu en direct

Mise en page
Style d'aperçu
Vision
AcmeLire les règles
Accessible

Un design lisible par tous

Un bon contraste garde votre contenu lisible pour les personnes malvoyantes, en plein soleil ou sur des écrans bas de gamme.

CommencerEn savoir plus

Sans inscription. Fonctionne dans votre navigateur.

Exemples accessibles

Exemples qui échouent

Exporter

:root {
  --tf-contrast-fg: #4c1d95;
  --tf-contrast-bg: #f5f3ff;
  --tf-contrast-ratio: 9.99:1;
}

À quoi sert cet outil

Vérificateur de contraste de couleur qui évalue n'importe quelle paire texte et fond selon les règles d'accessibilité WCAG. Choisissez deux couleurs et vous voyez aussitôt le rapport de contraste, s'il passe AA et AAA pour le texte grand et normal, et le rendu sur du vrai texte et des boutons. Tout s'exécute dans votre navigateur.

Besoin de préparer les couleurs d'abord ? Convertissez n'importe quelle valeur avec convertisseur de couleurs ou créez un ensemble avec générateur de palettes.

À quoi ça vous sert

  • Vérifier que le texte courant est lisible sur son fond avant de livrer une maquette.
  • Trouver une couleur de texte accessible quand une couleur de marque échoue en AA sur blanc.
  • Comparer le texte et le remplissage d'un bouton pour respecter la règle de contraste non textuel.
  • Partager une paire de couleurs avec votre équipe via l'URL et garder un historique local de vos vérifications.

Comment l'utiliser

  1. Saisissez une couleur de texte et une couleur de fond en HEX, RGB, HSL ou par nom.
  2. Lisez le rapport de contraste et le verdict réussite ou échec pour chaque niveau WCAG.
  3. Utilisez une suggestion pour ajuster la couleur jusqu'à ce qu'elle passe, ou inversez la paire.
  4. Copiez les valeurs, les variables CSS ou le rapport complet en un clic.

Tout le travail se passe dans votre navigateur. Aucun fichier n'est envoyé à un serveur. Voir plus d'outils dans le même champ.

D'autres outils qu'on utilise souvent dans le même flux.

Design
Populaire
Design

Convertisseur de Couleur: HEX, RGB

Convertissez des couleurs entre HEX, RGB et HSL en ligne. Collez un format et obtenez les autres au passage. Gratuit et dans votre navigateur.

Design

Générateur de Palettes de Couleurs

Générez des palettes harmonieuses à partir de n'importe quelle couleur de base: analogues, complémentaires et plus. Gratuit et prêt à copier.

Design

Générateur de Dégradés CSS

Créez des dégradés CSS en ligne avec un aperçu en direct: linéaire, radial et conique. Copiez le code de votre fond, gratuit et sans envoi.

Questions fréquentes

Quel rapport de contraste me faut-il ?

WCAG demande au moins 4,5:1 pour le texte normal et 3:1 pour le texte grand (18pt ou 24px, ou 14pt en gras) afin d'atteindre AA. AAA porte ces seuils à 7:1 et 4,5:1. Les icônes, les bordures de champs et les autres éléments non textuels demandent 3:1.

Comment le rapport de contraste est-il calculé ?

Il provient de la luminance relative de chaque couleur, selon la formule WCAG 2.1. La couleur la plus claire passe au-dessus, donc le résultat va de 1:1 pour deux couleurs identiques à 21:1 pour du noir sur blanc. Inverser les deux couleurs ne change jamais le rapport.

Comment fonctionnent les suggestions accessibles ?

Quand une paire est insuffisante, l'outil garde la teinte et la saturation de votre couleur et ne modifie que sa luminosité jusqu'à atteindre la cible, en retenant la valeur la plus proche. Si le texte ne peut pas y arriver seul, il propose plutôt d'ajuster le fond.

Mes données sont-elles envoyées quelque part ?

Non. Tous les calculs se font dans votre navigateur. Les couleurs que vous testez, l'historique et le lien de partage restent sur votre appareil.

Vérifier le Contraste de Couleur (WCAG) · ToolFarm