Vérificateur gratuit de contraste des couleurs

Testez vos combinaisons de couleurs de texte et d'arrière-plan pour la conformité à l'accessibilité WCAG 2.1. Obtenez des résultats instantanés réussite/échec pour les normes AA et AAA — sans inscription.

94,217+ vérifications de contraste effectuées

Ratio de Contraste

17.06:1

Aperçu Grand Texte (24px)

Aperçu du texte normal (16px). Le vif renard brun saute par-dessus le chien paresseux. Cet exemple montre votre combinaison de couleurs à la taille habituelle du corps du texte.

Petit texte (14px) — souvent utilisé pour les légendes, notes de bas de page et métadonnées.

Inversé : arrière-plan sur couleur du texte (17.06:1 — même ratio)

AA Texte Normal

Requiert 4,5:1

RÉUSSI

AA Texte Large

Requiert 3:1

RÉUSSI

AAA Texte Normal

Requiert 7:1

RÉUSSI

AAA Texte Large

Requiert 4,5:1

RÉUSSI

Prêt à créer un site web accessible avec ces couleurs ?

Créer avec ces couleurs

Qu'est-ce qu'un Vérificateur de Contraste des Couleurs ?

Un vérificateur de contraste des couleurs est un outil qui mesure la différence de luminance entre deux couleurs — généralement le texte de premier plan et son arrière-plan — et calcule un ratio de contraste selon les Web Content Accessibility Guidelines (WCAG). Ce ratio détermine si votre combinaison de couleurs est lisible pour les personnes souffrant de déficiences visuelles, notamment le daltonisme et la malvoyance.

Le vérificateur de contraste de Kleap calcule instantanément le ratio de contraste WCAG 2.1 et le teste sur les quatre niveaux de conformité : AA Texte Normal (4,5:1), AA Texte Large (3:1), AAA Texte Normal (7:1) et AAA Texte Large (4,5:1). Si vos couleurs échouent, l'outil suggère l'alternative accessible la plus proche pour corriger les problèmes d'accessibilité sans repenser toute votre palette.

Niveaux de Contraste WCAG Expliqués

AA Texte Normal

Minimum 4,5:1

Requiert un ratio de contraste minimum de 4,5:1. C'est la cible de conformité la plus courante et s'applique au corps du texte sous 18pt (ou 14pt gras).

AA Texte Large

Minimum 3:1

Requiert un ratio de contraste minimum de 3:1. S'applique au texte d'au moins 18pt (24px) ou 14pt gras (18,66px gras).

AAA Texte Normal

Minimum 7:1

La norme la plus élevée, requérant un ratio de contraste de 7:1. Assure la lisibilité pour les utilisateurs ayant une malvoyance modérée (environ 20/80).

AAA Texte Large

Minimum 4,5:1

Requiert 4,5:1 pour le grand texte au niveau AAA. Fournit une lisibilité améliorée pour les en-têtes et le texte d'affichage.

Conseils pour un Design de Couleurs Accessible

1

Commencez par le contraste

Choisissez vos couleurs de texte et d'arrière-plan en pensant au contraste dès le début. Intégrer l'accessibilité après coup est beaucoup plus difficile que de l'intégrer dès le départ.

2

Ne misez pas uniquement sur la couleur

Utilisez des icônes, motifs, soulignements ou étiquettes aux côtés des couleurs pour transmettre du sens. Environ 8 % des hommes ont une forme de daltonisme.

3

Testez sur de vrais appareils

Les couleurs paraissent différentes sur les moniteurs, téléphones et en plein soleil. Testez vos ratios de contraste sur des appareils réels, pas seulement dans votre outil de design.

4

Pensez aussi au mode sombre

Si votre site supporte le mode sombre, vérifiez les ratios de contraste pour les deux thèmes. Une paire de couleurs qui passe en mode clair peut échouer en mode sombre.

5

Faites attention à la graisse de la police

Les graisses fines et légères des polices réduisent le contraste perçu. Si vous utilisez des graisses inférieures à 400, visez un ratio de contraste plus élevé que le minimum.

6

Vérifiez les états interactifs

Les états de survol, focus et actif utilisent souvent des couleurs différentes. Assurez-vous que tous les états interactifs satisfont les exigences de contraste, pas seulement l'état par défaut.

Comparatif des Vérificateurs de Contraste

FonctionnalitéKleapWebAIMCoolorsAdobe Color
PrixGratuitGratuitFreemiumGratuit (avec compte Adobe)
Aperçu en Temps RéelOui, texte en direct sur arrière-planOui, basiqueOuiOui
Couleur Accessible la Plus ProcheOui, suggestion automatiqueNonNonPartiel
Niveaux WCAG TestésAA + AAA (normal + large)AA + AAAAA uniquementAA + AAA
Créateur de Site Web IntégréOui, propulsé par IANonNonNon
Bouton Inverser les CouleursOuiNonNonNon
Paire Accessible AléatoireOuiNonNonNon

Questions Fréquentes

Qu'est-ce qu'un ratio de contraste des couleurs ?+
Un ratio de contraste des couleurs est une valeur numérique qui représente la différence de luminance (luminosité perçue) entre deux couleurs. Il va de 1:1 (aucun contraste, couleurs identiques) à 21:1 (contraste maximum, noir sur blanc). Le ratio est calculé en utilisant la formule de luminance relative WCAG 2.1, qui tient compte de la façon dont l'œil humain perçoit différentes longueurs d'onde de la lumière.
Quel ratio de contraste WCAG ai-je besoin ?+
Pour la conformité WCAG 2.1 Niveau AA (la norme la plus souvent requise), le texte de corps normal nécessite au moins 4,5:1 de contraste, et le grand texte (18pt+ ou 14pt+ gras) nécessite au moins 3:1. Pour le Niveau AAA (la norme la plus élevée), le texte normal nécessite 7:1 et le grand texte 4,5:1. La plupart des exigences légales d'accessibilité font référence au Niveau AA.
Qu'est-ce qui compte comme grand texte dans WCAG ?+
Le grand texte dans WCAG est défini comme du texte d'au moins 18 points (24 pixels CSS) ou 14 points gras (environ 18,66 pixels CSS gras). Cela correspond approximativement à du texte de taille titre. Le grand texte a des exigences de contraste plus faibles car sa grande taille le rend intrinsèquement plus facile à lire.
WCAG s'applique-t-il aux images et icônes ?+
Oui, le Critère de Succès WCAG 2.1 1.4.11 exige que les composants UI (comme les icônes, bordures de formulaires et indicateurs de focus) et les objets graphiques aient au moins 3:1 de contraste par rapport aux couleurs adjacentes. C'est distinct des exigences de contraste du texte et a été introduit dans WCAG 2.1.
Comment le ratio de contraste est-il calculé ?+
Le ratio de contraste utilise la formule de luminance relative : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance de la couleur la plus claire et L2 la plus foncée. La luminance relative est calculée en convertissant les valeurs sRGB en lumière linéaire (avec correction gamma) et en les pondérant : 0,2126*R + 0,7152*G + 0,0722*B. Les poids reflètent la sensibilité de l'œil humain — nous percevons le vert comme le plus lumineux.
WCAG AA est-il suffisant pour mon site web ?+
WCAG AA est la norme référencée par la plupart des lois sur l'accessibilité dans le monde, incluant l'ADA (États-Unis), l'EAA (UE) et EN 301 549 (Europe). Pour la plupart des sites web et applications, la conformité AA est à la fois légalement suffisante et fournit une bonne lisibilité. AAA est recommandé pour les sites gouvernementaux, de santé et d'éducation, mais n'est généralement pas exigé par la loi.
Que faire si les couleurs de ma marque échouent le contraste ?+
Vous avez plusieurs options : ajustez légèrement la teinte de votre couleur de marque (souvent un petit changement de luminosité suffit), utilisez votre couleur de marque pour les éléments décoratifs uniquement et une couleur à fort contraste pour le texte, augmentez la taille de police pour satisfaire le seuil de grand texte, ou ajoutez une superposition semi-transparente derrière le texte placé sur des arrière-plans colorés. Notre outil suggère automatiquement la couleur accessible la plus proche.
Le contraste est-il important pour le mode sombre ?+
Absolument. Les mêmes exigences de contraste WCAG s'appliquent quel que soit le schéma de couleurs. En fait, le mode sombre introduit des défis uniques : un texte blanc pur (#FFFFFF) sur un arrière-plan très sombre peut provoquer un halo (effet lumineux) pour les utilisateurs souffrant d'astigmatisme. Un blanc légèrement cassé (#E0E0E0 à #F0F0F0) sur un gris foncé (#1A1A1A à #2D2D2D) offre souvent une meilleure lisibilité tout en satisfaisant les normes AA.
Les utilisateurs daltoniens peuvent-ils voir suffisamment de contraste ?+
Les hauts ratios de contraste aident considérablement les utilisateurs daltoniens, mais le contraste seul ne suffit pas. WCAG exige aussi que la couleur ne soit pas le seul moyen de transmettre de l'information (1.4.1). Par exemple, n'utilisez pas uniquement le rouge/vert pour indiquer erreur/succès — ajoutez des icônes ou étiquettes textuelles. La formule du ratio de contraste tient compte de la luminance, pas de la teinte, ce qui aide pour tous les types de daltonisme.
Comment tester le contraste sur mon site web existant ?+
Vous pouvez utiliser les DevTools du navigateur (l'audit Lighthouse de Chrome inclut des vérifications de contraste), des extensions de navigateur comme axe ou WAVE, ou coller vos valeurs HEX/RGB exactes dans cet outil. Pour des tests complets, utilisez des outils automatisés comme Lighthouse pour un scan de page entière, puis vérifiez manuellement les éléments signalés. N'oubliez pas de tester les états de survol, les styles de focus et le texte de placeholder — ceux-ci sont souvent oubliés.

Créez un Site Web Accessible avec l'IA

Utilisez vos combinaisons de couleurs accessibles pour créer un site web complet et conforme WCAG avec le créateur de site web IA de Kleap.

Commencer Gratuitement

Related Free Tools

CSS Gradient Generator

Color Picker

Color Palette Generator

Button Generator

Vérificateur de Contraste des Couleurs | Outil d'Accessibilité WCAG 2026