Vérificateur de contraste des couleurs

Comparez les couleurs du texte et du fond aux seuils WCAG AA et AAA. Essayez un ajustement ou enregistrez la paire.

Texte

Fond

px

Exemple de titre

Comparez ici les couleurs du texte et du fond. Vérifiez les seuils selon la taille et la graisse réelles de votre texte.

Petit texte : vérifiez la lisibilité de vos couleurs à différentes tailles.
Rapport de contraste
21:1
AA texte normal
4.5:1
AA grand texte
3:1
AAA texte normal
7:1
AAA grand texte
4.5:1

Vos statistiques

0
Couleurs choisies
0
Palettes exportées
0
Dégradés créés
0
Contrastes vérifiés
Sélecteur de couleur
Mode le plus utilisé
0%
Score d’activité

Comment vérifier le contraste des couleurs

Guides

La vidéo présente l’interface en anglais.

Saisissez les valeurs HEX avec le signe # ou utilisez les échantillons de couleur. Vérifiez que les deux champs sont valides. L’aperçu et le rapport se mettent à jour à chaque changement de couleur.

Vérifiez une paire texte et fond

Seuils AA et AAA

Le texte courant nécessite un rapport de 4,5:1 pour AA et de 7:1 pour AAA. Pour le grand texte, les seuils sont respectivement de 3:1 et 4,5:1.

Rapport et aperçu en direct

Modifiez une couleur pour actualiser le rapport et le texte d’exemple. Le réglage de taille change l’aperçu, tandis que les quatre résultats restent visibles.

Essayez un ajustement

Les commandes Ajuster à AA et Ajuster à AAA tentent de modifier la couleur du texte. Cela peut échouer avec le fond choisi. Vérifiez le rapport obtenu.

En afficher 3 de plusAfficher moins

Filtres de couleur approximatifs

Les commandes Protanopie, Deutéranopie et Tritanopie appliquent des filtres visuels simples. Elles ne prouvent pas la lisibilité pour les personnes ayant un trouble de la vision des couleurs.

Enregistrez une paire de couleurs

Nommez un préréglage pour enregistrer les couleurs du texte et du fond dans ce navigateur. Retrouvez-les dans Préréglages.

Autres outils de couleur

Les liens de mode ouvrent des pages dédiées au sélecteur, aux palettes, aux dégradés ou à l’extraction de couleurs d’une image.

Questions fréquentes

Comment vérifier le contraste des couleurs ?

Choisissez les couleurs du texte et du fond ou saisissez des valeurs HEX à six chiffres. Consultez le rapport et les quatre résultats AA et AAA. Un résultat conforme concerne cette paire de couleurs et ce seuil de texte, pas l’ensemble d’un site.

Quel rapport de contraste exige WCAG ?

Pour le texte courant, AA exige au moins 4,5:1 et AAA 7:1. Le grand texte nécessite 3:1 pour AA et 4,5:1 pour AAA. Il existe des exceptions, notamment pour les logos et les commandes inactives.

Le contraste peut-il être ajusté automatiquement ?

Ajuster à AA et Ajuster à AAA tentent d’éclaircir ou d’assombrir le texte en modifiant ses canaux RGB. La teinte peut changer et l’ajustement peut échouer selon le fond. Vérifiez le rapport après chaque essai.

Les aperçus simulent-ils fidèlement les troubles de la vision des couleurs ?

Ils utilisent de simples filtres de sépia, de saturation et de teinte. Considérez-les comme des aperçus approximatifs. Ce ne sont pas des modèles validés de la vision des couleurs et ils ne confirment pas l’accessibilité d’un design.

En afficher 4 de plusAfficher moins

Qu’est-ce qu’un grand texte ?

Selon WCAG, il s’agit d’un texte d’au moins 18 pt en graisse normale ou 14 pt en gras, soit environ 24 px ou 18,67 px en CSS. La taille de l’aperçu ne détermine pas le seuil applicable à votre design réel.

Le vérificateur de contraste est-il gratuit ?

Oui. MORELESS propose cet outil gratuitement et sans compte. Les calculs de couleurs s’effectuent dans ce navigateur.

Puis-je vérifier les couleurs de ma marque ?

Oui. Saisissez directement les couleurs HEX du texte et du fond. Vous pouvez enregistrer la paire comme préréglage nommé dans ce navigateur. Testez séparément chaque combinaison réellement utilisée.

Comment ouvrir les autres outils de couleur ?

Utilisez les liens de mode au-dessus du vérificateur. Ils ouvrent des pages dédiées au sélecteur, à l’extraction depuis une image, aux palettes et aux dégradés.

Détails techniques

Luminance relative

Le rapport utilise la luminance relative des deux couleurs sRGB. Il va de 1:1 pour des couleurs identiques à 21:1 pour le noir et le blanc. L’outil compare deux couleurs unies, pas une capture de page.

Seuils de contraste du texte

Les quatre résultats sont calculés à partir du rapport non arrondi. AA exige 4,5:1 pour le texte courant et 3:1 pour le grand texte. AAA exige 7:1 et 4,5:1. Réussir ces contrôles ne suffit pas à établir la conformité WCAG.

En afficher 2 de plusAfficher moins

Filtres d’aperçu approximatifs

Les trois aperçus de vision des couleurs appliquent des filtres CSS de sépia, de saturation et de rotation de teinte à la zone d’exemple. Ils ne modifient pas le rapport de contraste et ne constituent pas un modèle validé de la vision des couleurs.

Ajustement et stockage

L’ajustement modifie progressivement les trois canaux RGB du texte jusqu’à atteindre la cible ou terminer la tentative. Il ne garantit ni la réussite ni la conservation de la teinte. Les paires nommées sont stockées localement dans IndexedDB.