Calculateur de rapport de contraste

Le contraste des couleurs décrit la différence de luminance relative entre le premier plan et l'arrière-plan. Un contraste suffisant aide les personnes ayant une basse vision, une perception différente des couleurs ou une vision vieillissante, ainsi que celles gênées par des reflets ou un écran médiocre, à lire et utiliser les interfaces numériques. Ce calculateur convertit deux couleurs HEX ou RGB en luminances relatives définies par les Règles pour l'accessibilité des contenus Web, puis affiche un rapport allant de 1:1 pour des luminances identiques à 21:1 pour du noir sur blanc. Le calcul ne compare pas simplement les valeurs brutes des canaux rouge, vert et bleu. Chaque canal sRGB est normalisé et linéarisé pour tenir compte du gamma d'affichage. Les valeurs linéaires rouge, verte et bleue reçoivent les pondérations 0.2126, 0.7152 et 0.0722, car la vision humaine est plus sensible à la lumière verte. Le rapport final divise la luminance la plus claire augmentée de 0.05 par la plus sombre augmentée de 0.05. Cette méthode standard donne un résultat constant quel que soit l'ordre de saisie. Le critère de succès 1.4.3 des WCAG 2.x impose au niveau AA au moins 4.5:1 pour le texte courant et 3:1 pour le grand texte. Le niveau AAA porte ces seuils à 7:1 et 4.5:1. Le grand texte correspond généralement à au moins 18 points en graisse normale ou 14 points en gras, soit environ 24 pixels CSS ou 18.66 pixels CSS dans les conditions habituelles des navigateurs. Les composants d'interface et les objets graphiques porteurs de sens ont des exigences distinctes, souvent 3:1 par rapport aux couleurs adjacentes. Respecter un rapport est important, mais ne garantit pas un design accessible. Les polices fines ou inhabituelles, dégradés, images, états au survol, transparences, anticrénelage et arrière-plans variables peuvent modifier la lisibilité réelle. Les textes indicatifs et les commandes désactivées méritent aussi une vérification attentive, même lorsqu'un critère les traite différemment. Ne transmettez pas un état uniquement par la couleur : ajoutez libellés, icônes, motifs ou autres indices. Testez les indicateurs de focus et tous les états interactifs, pas seulement la capture par défaut. Saisissez un code HEX à six ou trois chiffres, ou une notation RGB standard séparée par des virgules. Le calculateur vérifie les canaux de zéro à 255 et évalue exactement les couleurs saisies. Si le résultat manque de peu un seuil, foncez le premier plan ou éclaircissez le fond, puis recommencez. Le contrôle automatique doit être suivi de tests au clavier, de zoom et de redistribution du contenu, d'une revue avec lecteur d'écran et de retours de personnes handicapées. Utilisez cet outil pendant la conception et l'intégration pour repérer tôt les défauts de couleur, puis vérifiez l'interface finale en conditions réelles.