Calculateur de Ratio de Contraste des Couleurs

• Calcul instantané du ratio de contraste : calculez le ratio WCAG entre deux couleurs instantanément pendant la saisie. Notre calculateur se met à jour en temps réel — sans clic — pour itérer sur votre palette sans interruption.
• Calculateur de contraste en ligne sécurisé : tous les calculs se font localement dans votre navigateur. Vos valeurs de couleur ne quittent jamais votre appareil, garantissant une confidentialité totale.
• Calculateur de ratio de contraste — sans installation : utilisez notre calculateur directement dans n'importe quel navigateur, sans téléchargement, plugin ni logiciel de design. Vérifiez la conformité WCAG depuis n'importe quel appareil instantanément.
• Vérification complète WCAG 2.1 AA et AAA : obtenez des résultats conformes/non conformes instantanés pour les niveaux WCAG 2.1 AA et AAA sur le texte normal, le grand texte et les composants d'interface. Comprend un aperçu du texte en direct.

• Conformité en accessibilité web : les designers et développeurs utilisent ce calculateur pour s'assurer que leurs sites respectent les exigences WCAG 2.1 AA avant le lancement. Détecter les échecs de contraste tôt évite des audits coûteux et des problèmes juridiques.
• Sélection des couleurs d'interface et de marque : lors de la création d'un design system ou d'une palette de marque, vérifiez chaque combinaison premier plan/fond pour la conformité WCAG. Trouvez la teinte minimale d'une couleur de marque qui passe le contraste AA sur fond blanc ou sombre.
• Design de boutons et CTA : les boutons d'appel à l'action doivent respecter le ratio de 3:1 pour les composants d'interface de WCAG 2.1. Testez la couleur du texte du bouton par rapport au fond du bouton avant de livrer en production.
• Palettes en mode sombre : le mode sombre introduit de nouveaux défis de contraste — des couleurs qui passent sur fond clair échouent souvent sur fond sombre. Vérifiez chaque paire texte/fond dans les thèmes clairs et sombres.
• Accessibilité des formulaires et champs : texte de substitution, libellés, texte d'aide et messages d'erreur nécessitent un contraste suffisant. Vérifiez chaque élément textuel par rapport à son fond pour les utilisateurs malvoyants.
• Visualisation de données et graphiques : les libellés de graphiques, le texte de légende et les annotations doivent être lisibles sur les fonds du graphique. Vérifiez que vos couleurs de visualisation respectent les normes d'accessibilité.

Le ratio de contraste des couleurs est une mesure numérique de la différence de luminance perçue entre deux couleurs — généralement une couleur de premier plan (texte) et une couleur d'arrière-plan. Il est défini par les Règles pour l'accessibilité des contenus Web (WCAG) et va de 1:1 (aucun contraste — couleurs identiques) à 21:1 (contraste maximal — noir pur sur blanc pur). Le ratio est calculé à partir de la luminance relative de chaque couleur, qui tient compte de la perception non linéaire de la luminosité par l'œil humain. Notre calculateur implémente la formule exacte WCAG 2.1, vous obtenez donc le même résultat que tout outil d'audit d'accessibilité officiel.

1. 1. Saisissez vos couleurs : tapez une couleur au format HEX (#rrggbb), RGB (rgb(r,g,b)) ou HSL (hsl(h,s%,l%)) dans les champs premier plan et arrière-plan, ou cliquez sur la pastille pour ouvrir le sélecteur natif. Le calculateur accepte le HEX abrégé (#rgb) et les variantes avec alpha. Tout se passe localement dans votre navigateur.
2. 2. Calcul instantané en temps réel : le ratio se met à jour instantanément pendant la saisie — aucun clic requis. Le calculateur convertit chaque couleur en luminance relative via la formule de linéarisation sRGB de WCAG, puis calcule le ratio (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance la plus claire et L2 la plus sombre.
3. 3. Consultez la conformité WCAG : le panneau de résultats affiche le statut conforme/non conforme pour WCAG 2.1 AA et AAA dans trois contextes : texte normal, grand texte et composants d'interface. Un aperçu du texte en direct montre le rendu de la combinaison à différentes tailles.

• AA - Texte normal (4,5:1) : ratio minimal pour le corps de texte, les libellés et tout texte inférieur à 18pt (ou 14pt gras). C'est l'exigence standard pour la conformité WCAG 2.1 niveau AA, la base légale dans la plupart des juridictions.
• AA - Grand texte (3:1) : le grand texte est défini comme 18pt (24px) ou plus, ou 14pt (environ 18,67px) gras ou plus. Il exige un ratio minimal plus faible car il est plus facile à lire à faible contraste.
• AA - Composants d'interface (3:1) : les objets graphiques et composants d'interface comme les champs de formulaire, boutons, indicateurs de focus et icônes doivent avoir un ratio de 3:1 par rapport aux couleurs adjacentes selon le critère de succès 1.4.11 de WCAG 2.1.
• AAA - Renforcé (7:1) : le niveau AAA exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. La conformité AAA est recommandée pour les contenus critiques (documents légaux, informations médicales, services publics), mais pas obligatoire pour la conformité web générale.

La formule de ratio de contraste WCAG ne s'applique qu'aux couleurs opaques — les couleurs semi-transparentes doivent être évaluées par rapport à leur fond réellement rendu. La formule ne tient pas compte du rendu des polices, de l'anticrénelage ou de la calibration des écrans, qui peuvent affecter le contraste perçu en pratique. De plus, les exigences WCAG ne s'appliquent pas au texte décoratif, au texte faisant partie d'un logo ni au texte de composants d'interface inactifs. Testez toujours vos designs avec de vrais utilisateurs et des technologies d'assistance en plus de la vérification automatisée du contraste.