Aller au contenu principal
Tooletto

Vérificateur de contraste de couleur

Un préréglage de Sélecteur et convertisseur de couleur

Vérifiez si une couleur de texte est lisible sur son fond selon les seuils WCAG 2.1. Le contraste est l'échec d'accessibilité le plus courant sur le web, et c'est aussi le plus facile à corriger — généralement en assombrissant légèrement une couleur.

  • Les fichiers ne quittent jamais votre appareil
  • Gratuit, sans inscription
  • Aucun filigrane
  • Fonctionne hors ligne une fois chargé
Loading tool…

Comment utiliser Sélecteur et convertisseur de couleur

  1. 1

    Choisissez une couleur

    Utilisez l'échantillon, ou tapez directement une valeur HEX ou RGB.

  2. 2

    Copiez n'importe quel format

    HEX, RGB, HSL, HSV et CMJN sont tous affichés à la fois.

  3. 3

    Vérifiez le contraste

    Définissez un fond pour voir si le texte passe WCAG AA et AAA.

Pourquoi le contraste est l'échec d'accessibilité le plus courant sur le web

Les audits d'accessibilité automatisés trouvent systématiquement un contraste de couleur insuffisant comme la violation individuelle la plus fréquente sur les sites web scannés, devant toutes les autres catégories de problèmes d'accessibilité combinées — et contrairement à de nombreux problèmes d'accessibilité nécessitant des changements structurels ou de balisage sémantique pour se corriger, un échec de contraste se résout généralement en assombrissant ou éclaircissant légèrement une couleur, sans avoir besoin d'aucun changement à la structure, au balisage ou au design de la page. Cette combinaison — extrêmement courante, mais comparativement bon marché à corriger une fois identifiée — est précisément pourquoi cela vaut la peine d'utiliser un vérificateur de contraste dédié directement sur une association de couleurs précise avant de la publier, plutôt que de compter sur un audit d'accessibilité complet pour la détecter après coup.

Les seuils AA et AAA, et lequel s'applique réellement

WCAG définit deux niveaux de conformité avec des seuils numériques différents, et lequel s'applique dépend à la fois du niveau auquel un projet s'est engagé et de la taille du texte précis en cours de vérification. Le niveau AA — le niveau auquel se réfèrent la plupart des exigences légales d'accessibilité et politiques organisationnelles — exige un ratio de 4,5:1 pour le texte de taille normale mais se détend à 3:1 pour le grand texte, défini comme 18pt ou 14pt en gras et plus, les glyphes plus grands restant lisibles avec un contraste moindre que les petits. Le niveau AAA, un standard plus strict, élève ces mêmes seuils à 7:1 et 4,5:1 respectivement. La plupart des projets visent AA comme référence pratique ; AAA est réservé au contenu spécifiquement destiné aux utilisateurs ayant une déficience visuelle plus importante, où le seuil plus strict vaut la contrainte de design supplémentaire qu'il impose.

Questions fréquentes

Quelle est la différence entre HEX, RGB et HSL ?

HEX et RGB décrivent la même chose en notation différente — combien de rouge, vert et bleu mélanger. HSL la reformule en teinte, saturation et luminosité, ce qui est bien plus facile à raisonner : pour éclaircir une couleur vous changez un nombre plutôt que d'en deviner trois.

Que signifie le ratio de contraste ?

Il compare la luminance relative de deux couleurs sur une échelle de 1 (identique) à 21 (noir sur blanc). WCAG exige au moins 4,5:1 pour le texte normal et 3:1 pour le grand texte au niveau AA, montant à 7:1 et 4,5:1 en AAA.

Pourquoi ma couleur échoue-t-elle au contraste alors qu'elle me paraît bien ?

Parce que le ratio est calculé à partir de la luminance relative, pas de la différence apparente entre deux couleurs. Deux couleurs vives de luminosité similaire — orange sur rouge, disons — paraissent différentes mais portent presque aucun contraste de luminance, et deviennent illisibles pour quiconque a une basse vision ou un écran au soleil.

La conversion en CMJN est-elle précise pour l'impression ?

C'est la conversion arithmétique standard, un point de départ plutôt qu'un résultat avec gestion de la couleur. Le vrai travail d'impression a besoin d'un profil ICC pour l'imprimante et le papier précis, car le CMJN ne peut pas du tout reproduire de nombreuses couleurs RGB vives.