Vérificateur et simulateur de contraste WCAG

tools.accessibility-contrast-simulator.meta_desc

Aperçu en Direct

Le Design Accessible Compte

Ceci est un paragraphe d'exemple pour démontrer comment vos couleurs sélectionnées s'affichent ensemble. Un bon contraste garantit la lisibilité pour tous.

En savoir plus sur les WCAG

Select a simulation mode below to apply filters to the live preview area.

Vision Normale

Protanopie (Pas de Rouge)

Deutéranopie (Pas de Vert)

Tritanopie (Pas de Bleu)

Achromatopsie (Sans Couleur)

Basse Vision (Flou)

Lumière du Soleil (Faible Contraste)

If your current colors fail the WCAG checks, use the auto-fix suggestions below to find the closest compliant colors while keeping your original brand aesthetics.

Current colors pass WCAG AA. No fixes needed!

Export your selected colors as CSS variables, Tailwind configuration, or design tokens.

CSS Variables

:root {
  --color-foreground: #000000;
  --color-background: #ffffff;
  
  /* Usage */
  color: var(--color-foreground);
  background-color: var(--color-background);
}

Couleur du Texte (Premier plan)

Couleur de Fond (Arrière-plan)

Texte Normal

21.00:1

AAA

Grand Texte

AAA

Composants UI

AAA

FAQ Simulateur de Contraste d'Accessibilité

Simulateur de Contraste.

Le rapport de contraste WCAG est une mesure mathématique de la différence de luminance (clarté) perçue entre deux couleurs, exprimée sous la forme d'un chiffre de 1:1 à 21:1. Il s'assure que le texte et les éléments d'interface utilisateur sont suffisamment distinguables de leurs arrière-plans pour être lisibles par les utilisateurs ayant des capacités visuelles variées.

Pour la conformité WCAG AA, le texte normal nécessite un rapport minimum de 4.5:1, tandis que le grand texte (18pt ou 14pt gras) et les composants UI nécessitent 3.0:1. Pour la stricte conformité AAA, le texte normal doit être de 7.0:1, et le grand texte de 4.5:1.

Oui, l'onglet Simulation Visuelle applique des filtres de matrice SVG en temps réel à votre aperçu en direct. Il reproduit avec précision la Protanopie (cécité au rouge), la Deutéranopie (cécité au vert), la Tritanopie (cécité au bleu) et l'Achromatopsie (monochromatisme), ainsi que des simulations de flou et de lumière du soleil.

Non. Ce simulateur PRO est entièrement construit côté client en utilisant JavaScript. Tous les calculs de couleurs, le traitement d'images et la génération de rapports se produisent directement dans votre navigateur, garantissant une confidentialité absolue et aucun stockage de données sur serveur.

Si vos couleurs sélectionnées échouent au test WCAG, vous pouvez utiliser notre fonction Auto-Correction (Auto-Fix). Elle calcule mathématiquement et suggère la nuance de couleur la plus proche conforme AA ou AAA, vous permettant de maintenir l'esthétique de votre marque tout en respectant les normes d'accessibilité.

Comment utiliser le vérificateur de contraste

Définir les couleurs d'avant-plan et d'arrière-plan
Entrez la couleur de votre texte (premier plan) et la couleur d'arrière-plan à l'aide des sélecteurs de couleur ou en saisissant les valeurs HEX, RGB ou HSL. Le rapport de contraste s'actualise instantanément.
Lisez vos résultats WCAG
L'outil affiche le rapport de contraste (par exemple 5,2:1) et indique s'il est conforme aux normes WCAG AA (4,5:1 pour le texte normal) et AAA (7:1). Le texte en gros caractères (18 pt+) a des seuils moins élevés.
Simuler le daltonisme
Passez à l'onglet Simulateur pour prévisualiser l'apparence de votre combinaison de couleurs pour les utilisateurs atteints de deutéranopie, protanopie, tritanopie ou d'autres types de déficience visuelle.
Utilisez la correction automatique si nécessaire.
Si vos couleurs ne conviennent pas, cliquez sur Correction automatique. L'outil calcule la nuance la plus proche conforme aux normes AA ou AAA tout en préservant autant que possible votre teinte et votre saturation.

Référence du rapport de contraste

Exigences minimales de contraste WCAG 2.1 pour différentes catégories de texte :

Content Type	WCAG AA	WCAG AAA	Example Ratio
Normal text (<18pt)	4.5:1 ✓	7:1 ✓	#000 on #fff → 21:1
Large text (≥18pt bold)	3:1 ✓	4.5:1 ✓	#333 on #fff → 12.6:1
UI components & icons	3:1 ✓	N/A	#767676 on #fff → 4.5:1
Decorative elements	No req.	No req.	Background images exempt

Cas d'utilisation courants

Révision de l'interface utilisateur / conception visuelle

Testez toutes les combinaisons de texte et d'arrière-plan dans votre système de conception avant de passer au développement, afin de détecter rapidement les erreurs.

Audits d'accessibilité

Fournir des rapports documentés sur les rapports d'accessibilité des clients et les certifications de conformité WCAG 2.1 / 2.2.

Test de daltonisme

Simulez la façon dont 8 % des utilisateurs masculins perçoivent votre palette afin de vous assurer qu'aucune information essentielle n'est perdue pour les personnes daltoniennes.

Conformité juridique

Respectez les exigences en matière d'accessibilité numérique ADA (États-Unis), EAA (Union européenne) et EN 301 549 avant le lancement d'un produit ou un appel d'offres public.

Contrôle qualité développeur

Vérifiez rapidement le contraste des variables de couleur CSS lors de la révision du code, sans passer par un outil de conception.

Comment ça marche

Tous les calculs sont effectués dans votre navigateur à l'aide de la formule de luminance WCAG 2.1, sans qu'aucun contact avec le serveur ne soit nécessaire.

Luminance relative

Les WCAG définissent la luminance comme la somme pondérée des canaux RVB linéarisés : L = 0,2126R + 0,7152G + 0,0722B. Le rapport de contraste est alors (L1 + 0,05) / (L2 + 0,05), où L1 est la couleur la plus claire.

Simulation du daltonisme

Le simulateur applique des matrices de daltonisation standard (Machado et al., 2009) pour transformer les valeurs sRGB telles qu'elles sont perçues par chaque type de déficience de la vision des couleurs.

Algorithme de correction automatique

La fonction Auto-Fix itère sur le canal de luminosité dans l'espace HSL, en recherchant le réglage minimal qui atteint le rapport cible (AA ou AAA) tout en conservant la teinte et la saturation inchangées.

À qui s'adresse cet outil ?

Concepteurs UI/UX

Testez les combinaisons de couleurs avant la remise du design et maintenez un système de conception conforme.

Spécialistes en accessibilité

Produire des preuves contrastées pour les audits WCAG, les rapports clients et les certifications de conformité.

Développeurs front-end

Vérifiez rapidement les variables de couleur CSS pendant le développement et la révision du code sans quitter le navigateur.

Chefs de produit

Assurez-vous de la conformité légale en matière d'accessibilité (ADA, EAA) avant le lancement du produit ou la soumission d'un appel d'offres public.

Créateurs de contenu

Vérifiez que le texte superposé sur des images ou des arrière-plans colorés est lisible pour tous les publics.

Conseils pour une conception plus accessible

Visez toujours la norme WCAG AA (4,5:1) comme référence et visez la norme AAA (7:1) pour le corps du texte, en particulier sur les sites consacrés à la santé, aux administrations publiques et aux finances.
Exécutez la simulation du daltonisme pour les 8 types, pas seulement pour la deutéranopie. Chaque type affecte différemment les différentes paires de couleurs.
Ne vous fiez jamais uniquement à la couleur pour transmettre des informations — associez toujours les repères de couleur à des icônes, des motifs ou des étiquettes de texte.
Utilisez HSL pour régler le contraste : augmentez la différence de luminosité entre le premier plan et l'arrière-plan plutôt que de modifier la teinte.
Testez sur un appareil mobile physique en plein soleil : les conditions réelles révèlent des problèmes de contraste que les écrans ne permettent pas de détecter.

Pourquoi le contraste est-il important en matière d'accessibilité ?

Environ 1 homme sur 12 et 1 femme sur 200 souffrent d'une forme de déficience de la vision des couleurs. Un contraste insuffisant exclut directement ces utilisateurs.
L'ADA (États-Unis) et la loi européenne sur l'accessibilité (UE 2025) exigent la conformité WCAG 2.1 AA pour les produits numériques destinés au grand public.
Le contraste insuffisant est l'un des trois principaux manquements aux WCAG les plus fréquemment constatés lors des audits d'accessibilité à l'échelle mondiale (rapport WebAIM Million).
Une conception des couleurs accessible améliore la lisibilité pour tous les utilisateurs, que ce soit en plein soleil, sur des écrans de mauvaise qualité ou à mesure que les utilisateurs vieillissent.

Performance et confidentialité

Chaque calcul de contraste, simulation de daltonisme et correction automatique s'effectue entièrement dans votre navigateur à l'aide de JavaScript. Aucune valeur de couleur, capture d'écran ou donnée d'utilisation n'est transmise à un serveur. L'outil répond en moins de 5 ms par calcul et fonctionne hors ligne après le premier chargement de la page.

Note pédagogique : WCAG et vision des couleurs

WCAG 2.1 vs 2.2

La version WCAG 2.2 (2023) a introduit de nouveaux critères de succès (2.4.11 Apparence du focus, 3.2.6 Aide cohérente), mais a conservé les exigences fondamentales en matière de contraste (1.4.3, 1.4.6) identiques à celles de la version 2.1.

Luminance vs luminosité

Les WCAG utilisent la luminance relative, une mesure pondérée en fonction de la perception. Un jaune vif (#ffff00) a une luminance très élevée (0,93), tandis qu'un bleu marine foncé (#003366) a une luminance faible (0,02), ce qui donne un rapport de 9,8:1.

Types de daltonisme

La deutéranopie (rouge-vert, la plus courante) touche environ 6 % des hommes. La protanopie (cécité rouge) environ 2 %. La tritanopie (bleu-jaune) environ 0,01 %. L'achromatopsie (cécité totale) environ 0,003 %.

APCA — La norme du futur

L'algorithme avancé de contraste perceptuel (APCA) est proposé pour les WCAG 3.0. Il évalue le contraste différemment en fonction de la taille, de l'épaisseur et de la polarité de la police. Restez à l'écoute.

Dépannage

Oui. La norme WCAG AA est le minimum légalement requis dans la plupart des juridictions. La norme AAA est ambitieuse et n'est pas toujours réalisable pour toutes les combinaisons de texte et d'arrière-plan. Visez la norme AAA pour le corps du texte dans la mesure du possible.

Les textes en gros caractères (18 pt normal ou 14 pt gras) ont un seuil inférieur (3:1 pour AA). Si vos petits caractères ne satisfont pas au critère de 4,5:1, assombrissez le texte ou éclaircissez l'arrière-plan jusqu'à ce que le rapport soit respecté.

Essayez de modifier uniquement la couleur de l'arrière-plan plutôt que celle du texte. En assombrissant légèrement un arrière-plan blanc (par exemple, en le transformant en gris clair), vous pouvez obtenir la conformité AA avec un changement visuel minimal.

De légères différences peuvent apparaître selon la manière dont les outils arrondissent les valeurs de luminance à virgule flottante. Les deux résultats doivent être compris dans une fourchette de ±0,1 l'un par rapport à l'autre. Utilisez la valeur la plus prudente (la plus basse) pour garantir la conformité.

Le saviez-vous ?

La formule du rapport de contraste WCAG a été introduite pour la première fois dans la version WCAG 1.0 (1999) sous la forme d'un simple contrôle de la différence de luminosité. Elle a été considérablement révisée dans la version WCAG 2.0 (2008) afin d'utiliser la luminance relative, un modèle basé sur l'espace colorimétrique CIE 1931 et la manière dont le système visuel humain traite la lumière. Le seuil actuel de 4,5:1 a été choisi car il compense approximativement la perte de contraste de 3:1 subie par les utilisateurs ayant une vision de 20/80 (faible vision sans technologie d'assistance).

Concevez des produits que tout le monde peut utiliser

Le contraste des couleurs accessible n'est pas seulement une case à cocher pour se conformer aux normes, c'est une qualité fondamentale de conception qui profite à tous les utilisateurs. Cet outil gratuit vous offre une vérification WCAG en temps réel, une simulation du daltonisme et une correction automatique intelligente en un seul endroit, sans que les données ne quittent votre navigateur. Testez votre palette dès maintenant, corrigez les erreurs et commercialisez un produit qui fonctionne pour tout le monde.