Vérificateur de contraste
Vérifie le rapport de contraste WCAG et la conformité AA/AAA entre deux couleurs.
Les valeurs de couleur que vous saisissez sont traitées localement dans votre navigateur et rien n'est envoyé à un serveur.
Vous travaillez avec des codes de couleur ? Essayez le Convertisseur de couleurs CSS.
À propos de Vérificateur de contraste
Ce vérificateur de contraste mesure le ratio de contraste de couleur WCAG entre deux couleurs et vous indique instantanément si elles passent les niveaux d'accessibilité AA ou AAA. Saisissez une couleur de premier plan (texte) et une couleur d'arrière-plan en hex ou rgb/rgba, ou choisissez-les avec les échantillons de couleur intégrés, et l'outil calcule le ratio exact ainsi que les verdicts réussite/échec pour le texte normal et grand. Conçu pour les développeurs, designers et ingénieurs QA qui ont besoin d'une vérification rapide du ratio de contraste de couleur en construisant des interfaces accessibles, des systèmes de design ou des pages marketing. Un aperçu en direct affiche un texte d'exemple dans vos couleurs choisies pour juger la lisibilité d'un coup d'œil et détecter tôt les problèmes de contraste d'accessibilité. Tout s'exécute localement dans votre navigateur, vos valeurs de couleur sont traitées sur votre appareil et rien n'est envoyé à un serveur.
Fonctionnalités
- Calcule le ratio de contraste WCAG 2.x exact entre deux couleurs
- Accepte les formats de couleur hex (3 ou 6 chiffres), rgb() et rgba()
- Affiche la réussite/échec AA pour le texte normal (4.5:1) et grand (3:1)
- Affiche la réussite/échec AAA pour le texte normal (7:1) et grand (4.5:1)
- Échantillons de sélecteur de couleur natif pour premier plan et arrière-plan
- Aperçu en direct affichant un texte d'exemple dans vos couleurs sélectionnées
- Message de validation clair quand une valeur de couleur ne peut être analysée
Comment utiliser Vérificateur de contraste
- Saisissez votre couleur de texte dans le champ Premier plan (texte), ou choisissez-la avec l'échantillon de couleur.
- Saisissez votre couleur d'arrière-plan dans le champ Arrière-plan, ou utilisez son échantillon.
- Lisez le ratio de contraste affiché au-dessus des badges de verdict.
- Vérifiez les badges de réussite/échec AA et AAA pour le texte normal et grand.
Exemple
Entrée
Premier plan (texte) : #777777
Arrière-plan : #ffffff
Sortie
ratio de contraste : 4.48
AA · texte normal (4.5:1) : Échec
AA · texte grand (3:1) : Réussite
AAA · texte normal (7:1) : Échec
AAA · texte grand (4.5:1) : Échec
Le gris moyen sur blanc échoue de peu au niveau AA pour le texte de corps de taille normale.
Erreurs courantes et dépannage
- Coller un nom de couleur CSS comme « red » ou « rebeccapurple » renvoie une erreur de couleur invalide. — Utilisez une valeur hex (par ex. #ff0000), ou rgb()/rgba() au lieu de noms de couleur.
- Un hex à 8 chiffres avec alpha (#rrggbbaa) est rejeté comme couleur invalide. — Retirez le canal alpha et fournissez un hex à 6 chiffres ; le vérificateur ne lit que les couleurs opaques.
- Le texte réussit AA grand mais échoue AA normal, et vous ne savez pas lequel s'applique. — Le texte grand signifie environ 18pt+ (ou 14pt+ en gras) ; le corps de texte doit atteindre le seuil normal plus strict de 4.5:1.
- Une valeur alpha rgba() ne change pas le ratio de contraste. — Le ratio est calculé uniquement sur les canaux RGB, aplatissez donc la transparence sur la vraie couleur d'arrière-plan avant de vérifier.
Foire aux questions
- Qu'est-ce qu'un vérificateur de contraste et pourquoi le ratio WCAG importe-t-il ?
- Un vérificateur de contraste compare deux couleurs et signale le ratio de contraste WCAG entre elles, qui prédit la lisibilité du texte. Le Vérificateur de contraste d'ArrayKit affiche le ratio exact ainsi que les verdicts AA et AAA pour confirmer que le texte est lisible pour les utilisateurs malvoyants.
- Quel ratio de contraste me faut-il pour passer le WCAG ?
- Le WCAG AA exige au moins 4.5:1 pour le texte normal et 3:1 pour le texte grand, tandis que AAA exige 7:1 pour le texte normal et 4.5:1 pour le texte grand. Le Vérificateur de contraste affiche les quatre verdicts à la fois.
- Comment vérifier le ratio de contraste de mon texte et arrière-plan ?
- Saisissez votre couleur de texte dans le champ Premier plan et votre couleur d'arrière-plan dans le champ Arrière-plan (hex, rgb ou rgba), ou utilisez les échantillons. Le Vérificateur de contraste met à jour le ratio et les badges AA/AAA en direct à mesure que vous tapez.
- Qu'est-ce qui compte comme texte grand pour le seuil 3:1 ?
- Le texte grand fait généralement environ 18pt et plus, ou 14pt et plus en gras. Tout ce qui est plus petit est traité comme texte normal et doit atteindre le ratio plus élevé de 4.5:1.
- Le ratio de contraste tient-il compte de l'opacité ?
- Non. Le ratio repose sur les valeurs RGB solides, aplatissez donc toute couleur semi-transparente sur son arrière-plan réel avant de la vérifier dans le Vérificateur de contraste.
- Les couleurs que je saisis dans le Vérificateur de contraste sont-elles envoyées quelque part ?
- Non. Le Vérificateur de contraste s'exécute entièrement dans votre navigateur, les couleurs que vous saisissez restent sur votre appareil et rien n'est envoyé à un serveur.
Outils associés
- Convertisseur de couleurs CSS — Convertit entre HEX, RGB et HSL avec un échantillon en direct.
- Formateur CSS / SCSS — Embellit ou minifie CSS/SCSS/LESS, trie les propriétés et supprime les doublons.
- Optimiseur SVG — Minifie le SVG : supprime commentaires, métadonnées et résidus d’éditeur, et réduit les espaces.
- Formateur HTML — Embellit ou minifie le HTML, met en forme le CSS/JS en ligne et prévisualise le résultat.
- Optimiseur d’images — Réencode et réduit les images (JPEG/WebP/PNG), avec redimensionnement optionnel.
- Générateur Open Graph — Génère des balises meta Open Graph et Twitter avec aperçu de carte sociale.
- Aperçu Markdown — Rend le Markdown en HTML avec un aperçu en direct.
Tous les outils ArrayKit