Verificateur de Contraste de Couleur

Testez la conformite de contraste WCAG 2.1 AA/AAA pour un design web accessible

Verificateur de Contraste de Couleur

Couleur de Premier Plan (Texte)

Couleur d'Arriere-plan

Rapport de Contraste

21:1

AA Texte Normal

Reussi

AA Grand Texte

Reussi

AAA Texte Normal

Reussi

AAA Grand Texte

Reussi

Apercu en Direct

Apercu Grand Texte (18pt+) Voici a quoi ressemblera le texte normal (14px) avec votre combinaison de couleurs choisie. Assurez un contraste suffisant pour la lisibilite.

Alternatives Accessibles

Tous les niveaux de contraste sont reussis ! Aucune suggestion necessaire.

Exigences WCAG 2.1

Niveau	Normal	Grand
AA	4.5:1	3:1
AAA	7:1	4.5:1

Tout le traitement se fait dans votre navigateur. Aucune donnee nest envoyee a un serveur.

Fonctionnalites

Conformite WCAG 2.1

Teste les niveaux AA et AAA pour le texte normal et grand selon les directives officielles WCAG 2.1

Apercu en Direct

Voyez votre combinaison de couleurs en temps reel avec du texte exemple a differentes tailles

Suggestions Intelligentes

Obtenez automatiquement des alternatives de couleurs accessibles lorsque votre combinaison echoue aux exigences de contraste

Confidentialite Prioritaire

Tous les calculs sont effectues localement dans votre navigateur, aucune donnee envoyee aux serveurs

Comment Utiliser ?

Choisir les Couleurs

Entrez les couleurs de premier plan (texte) et arriere-plan en utilisant le selecteur de couleurs ou les champs HEX.

Verifier les Resultats

Consultez le rapport de contraste et le statut de conformite WCAG AA/AAA pour le texte normal et grand.

Appliquer les Suggestions

Si le contraste echoue, cliquez sur une alternative de couleur accessible suggeree pour appliquer instantanement.

Questions Frequentes

Le WCAG (Web Content Accessibility Guidelines) est la norme internationale pour l'accessibilite du web, publiee par le W3C. Les exigences de rapport de contraste garantissent que le texte est lisible pour les utilisateurs malvoyants, daltoniens ou ayant des deficiences cognitives. Ne pas respecter WCAG 2.1 est egalement un probleme de conformite juridique dans de nombreux pays, notamment sous la loi ADA (Etats-Unis), EN 301 549 (UE) et l'Equality Act (Royaume-Uni).

Niveau AA (minimum) : le texte normal requiert 4.5:1, le grand texte 3:1. Niveau AAA (ameliore) : le texte normal requiert 7:1, le grand texte 4.5:1. Le grand texte est defini comme 18pt (24px) ou plus en graisse normale, ou 14pt (environ 18.67px) ou plus en gras. La plupart des organisations ciblent le niveau AA ; AAA est recommande pour les contenus critiques comme les textes medicaux ou juridiques.

La formule WCAG est : (L1 + 0.05) / (L2 + 0.05), ou L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre. La luminance relative est calculee a partir des valeurs RGB avec correction gamma. Le blanc pur (1.0) contre le noir pur (0.0) donne le rapport maximum de 21:1. Cet outil effectue le calcul complet instantanement.

Un texte d'au moins 18pt (24px) en graisse normale, ou d'au moins 14pt (environ 18.67px) en gras. Le grand texte a une exigence de contraste plus souple (3:1 pour AA) car les caracteres plus grands sont plus faciles a lire a faible contraste. Une police en gras de 16px est consideree comme du grand texte.

Lorsque vos couleurs ne respectent pas les exigences de contraste, l'outil suggere automatiquement des couleurs alternatives de premier plan ou d'arriere-plan qui conservent une teinte similaire mais ajustent la luminosite pour respecter WCAG AA. Cliquez sur une suggestion pour l'appliquer instantanement, sans avoir a deviner manuellement les valeurs de luminosite HSL.

La plage va de 1:1 (aucun contraste — couleurs identiques) a 21:1 (maximum — noir pur sur blanc pur). Un rapport de 4.5:1 signifie que la couleur la plus claire est 4.5 fois plus lumineuse que la plus sombre. Exemples courants : noir sur blanc = 21:1, gris fonce sur blanc = 7-15:1, gris moyen sur blanc = 3-5:1 (limite), gris clair sur blanc = souvent sous 3:1 (echec).

L'outil utilise des couleurs HEX opaques, ce qui est l'approche correcte pour les tests de conformite WCAG. Le WCAG requiert de tester la couleur finale rendue telle que percue par l'utilisateur. Si vous utilisez la transparence rgba, testez la couleur reellement melangee (ce a quoi ressemble le texte sur son fond reel), et non le code de couleur transparent lui-meme.

Non. Tous les calculs s'effectuent localement dans votre navigateur via JavaScript. Aucune valeur de couleur n'est transmise a un serveur.

Quest-ce que le Verificateur de Contraste ?

Un outil qui vous dit si vos couleurs de texte et de fond respectent les standards daccessibilite WCAG 2.1. Choisissez deux couleurs et voyez instantanement si elles passent les niveaux AA et AAA. En cas dechec, loutil suggere des alternatives accessibles applicables en un clic.

Pourquoi le contraste compte

Le mauvais contraste des couleurs est lun des problemes daccessibilite les plus courants sur le web. Il touche les personnes malvoyantes, daltoniennes et meme les utilisateurs en plein soleil. Respecter les WCAG nest pas seulement une bonne pratique, cest souvent une obligation legale.

Comment lutiliser

Entrez vos couleurs de premier plan et darriere-plan en code HEX ou via le selecteur. Loutil calcule instantanement le rapport de contraste et affiche reussi ou echoue pour chaque niveau WCAG. Si le contraste est insuffisant, consultez les suggestions.

Conseils pour les designers

Testez votre palette tot dans le processus de design, pas une fois le site construit. Le texte fonce sur fond clair fonctionne generalement bien. Evitez de transmettre des informations uniquement par la couleur.

Confidentialite

Tout sexecute dans votre navigateur. Aucune donnee de couleur nest envoyee a un serveur. Pas de compte, pas de suivi.

Sécurité et Confidentialité

La sécurité de vos données est notre priorité

Traitement Local

Tout le traitement se fait dans votre navigateur

Aucun Transfert de Données

Vos données ne sont pas envoyées à nos serveurs

Aucun Stockage de Données

Aucune donnée n'est stockée ou partagée

Chiffrement SSL

Chiffrement SSL pour une connexion sécurisée

Étape Suivante

Sélecteur de Couleur

Sélecteur de couleur avancé avec conversions HEX, RGB, HSL, HSV, CMYK et vérificateur de contraste

Convertisseur HEX en RGB

Convertir entre les formats de couleur HEX, RGB et HSL

Cet outil vous a-t-il été utile ?

Verificateur de Contraste de Couleur