Vérificateur d'accessibilité couleurs — contraste WCAG et simulation de daltonisme

Un vérificateur de contraste WCAG 2.1 gratuit pour tester toute combinaison de couleurs face aux standards d'accessibilité. Vérifiez la lisibilité du texte pour la conformité AA et AAA — essentiel pour un design web inclusif.

Comment l'utiliser

Choisissez ou saisissez les couleurs d'avant-plan et d'arrière-plan via les sélecteurs ou les saisies hex/RVB.

Consultez l'aperçu de texte en direct et les résultats de conformité WCAG AA/AAA.

Examinez la bande de simulation de daltonisme pour voir comment chaque type de DVC perçoit vos couleurs.

Si une vérification échoue, cliquez sur une alternative suggérée pour corriger instantanément la paire.

Utilisez le mode Palette en lot pour vérifier toutes les combinaisons de votre système de design.

Vérifiez les paires de couleurs pour la conformité au contraste WCAG et la distinguabilité chez les daltoniens

Choisissez deux couleurs pour vérifier le ratio de contraste et la visibilité chez les daltoniens.

Avant-plan

Arrière-plan

Grand texte (18 pt+)

Aperçu de titre

Texte normal (16 px)

Portez ce vieux whisky au juge blond qui fume.

Aperçu de texte courant — comment vos utilisateurs verront cette combinaison de couleurs dans du contenu réel.

Contraste WCAG 2.1

AA exige 4,5:1 pour le texte normal, 3:1 pour le grand. AAA exige 7:1 / 4,5:1.

12.63:1

AA normal Réussi

AA grand Réussi

AAA normal Réussi

AAA grand Réussi

Simulation de daltonisme

Comment votre paire de couleurs apparaît aux personnes ayant différents types de déficience de la vision des couleurs.

Alternatives suggérées

Alternatives accessibles qui passent WCAG AA et restent distinguables sous tous les types de DVC.

Vérification de palette en lot

Collez 3 à 10 couleurs hex (une par ligne ou séparées par virgules) pour vérifier toutes les combinaisons de paires.

Fonctionnalités

Ratio de contraste WCAG 2.1 avec badges AA/AAA réussi/échec Simulation de daltonisme pour 4 types de DVC (protanopie, deutéranopie, tritanopie, achromatopsie) Suggestion automatique d'alternatives accessibles quand une paire échoue Mode palette en lot : vérifiez toutes les paires de 3 à 10 couleurs en une fois

Questions fréquentes

Qu'est-ce que le ratio de contraste WCAG ?

Les Web Content Accessibility Guidelines (WCAG) définissent les ratios de contraste minimaux entre texte et arrière-plan. Le niveau AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt+). Le niveau AAA exige 7:1 pour le normal et 4,5:1 pour le grand. Des ratios plus élevés signifient une meilleure lisibilité.

Qu'est-ce que le daltonisme (DVC) ?

La déficience de la vision des couleurs (DVC) touche environ 8 % des hommes et 0,5 % des femmes dans le monde. Les types les plus courants sont la protanopie (cécité au rouge) et la deutéranopie (cécité au vert). Cet outil simule comment vos paires de couleurs apparaissent aux personnes de chaque type, vous aidant à concevoir pour tous.

Comment fonctionne la suggestion automatique ?

Quand votre paire échoue aux vérifications WCAG ou DVC, l'outil cherche des couleurs proches qui passent tous les critères. Il ajuste la luminosité tout en gardant la teinte similaire, pour que les couleurs suggérées correspondent à votre intention tout en étant accessibles.

Qu'est-ce que le Delta E et pourquoi est-ce important ?

Le Delta E (CIE2000) mesure la différence perceptuelle entre deux couleurs. Un Delta E inférieur à 1 signifie que deux couleurs sont virtuellement identiques pour l'œil humain. Pour l'accessibilité, nous recommandons un Delta E minimum de 10 entre avant-plan et arrière-plan sous toutes les simulations DVC pour garantir la distinguabilité.

💡 Voulez-vous que nous améliorions cet outil pour vous ?

Nous le pouvons — et c'est gratuit ! Envoyez-nous simplement un message rapide avec votre idée. Si vous voulez en discuter en détail, laissez votre e-mail et nous reviendrons vers vous. Vous pouvez rester anonyme.

Vérificateur d'accessibilité couleurs — contraste WCAG et simulation de daltonisme

Comment l'utiliser

Vérifiez les paires de couleurs pour la conformité au contraste WCAG et la distinguabilité chez les daltoniens

Fonctionnalités

Questions fréquentes

Qu'est-ce que le ratio de contraste WCAG ?

Qu'est-ce que le daltonisme (DVC) ?

Comment fonctionne la suggestion automatique ?

Qu'est-ce que le Delta E et pourquoi est-ce important ?

Comment évaluez-vous cet outil ?

Commentaires

Vérificateur d'accessibilité couleurs — contraste WCAG et simulation de daltonisme

Comment l'utiliser

Vérifiez les paires de couleurs pour la conformité au contraste WCAG et la distinguabilité chez les daltoniens

Fonctionnalités

Questions fréquentes

Qu'est-ce que le ratio de contraste WCAG ?

Qu'est-ce que le daltonisme (DVC) ?

Comment fonctionne la suggestion automatique ?

Qu'est-ce que le Delta E et pourquoi est-ce important ?

Vous aimerez peut-être aussi

Comment évaluez-vous cet outil ?

Commentaires