Un convertisseur de couleurs où seul le HEX commande
Les champs RGB et HSL ont l'air modifiables, mais y taper quelque chose ne change rien. Seuls le champ HEX et le sélecteur pilotent la conversion. Le convertisseur de couleurs démarre sur #3b82f6, un bleu moyen, qui donne rgb(59, 130, 246), hsl(217, 91%, 60%) et cmyk(76%, 47%, 0%, 4%). Un contrôle de contraste WCAG 2.1 se trouve à côté.
Le champ HEX se réécrit tout seul
Dès que son contenu est un code valide, le champ HEX se réécrit. Tapez #ff0 en route vers #ff0000 et il saute à #ffff00 : collez plutôt le code entier. Les codes à huit chiffres (alpha), les noms comme « tomato » et les notations comme OKLCH ou HSV ne sont pas pris en charge. Une saisie invalide est ignorée, sans message d'erreur.
Bleu de marque, gris de formulaire et blanc sur bleu
Un bleu de marque arrive sous la forme #003366. En CSS, on veut des variantes plus claires et plus sombres, et HSL simplifie cela : l'outil donne hsl(210, 100%, 20%), et il suffit d'augmenter le dernier nombre. Pour un flyer, le même bleu s'écrit cmyk(100%, 50%, 0%, 60%), une première valeur à donner à l'imprimeur.
Un gris clair de texte indicatif comme #999999 sur blanc donne 2.85 : 1. C'est insuffisant pour AA, même en grand texte. Du blanc sur le #2563eb par défaut donne 4.68 : 1, ce qui passe AA pour le texte courant mais pas AAA.
Quatre étapes, du carré de couleur au rapport de contraste
- Cliquez sur le carré de couleur pour ouvrir le sélecteur de votre navigateur, ou collez un code dans le champ HEX. Les six chiffres et la forme courte à trois (#0af) fonctionnent, avec ou sans #.
- Lisez les champs RGB, HSL et CMJN (impression). Le bouton de copie au-dessus d'un champ envoie sa valeur dans le presse-papiers.
- Dans le panneau de droite, réglez Couleur du texte et Arrière-plan.
- Le rapport et les quatre pastilles (AA Normal, AAA Normal, AA Grand, AAA Grand) changent à chaque choix.
Arrondis, CMJN sans profil ICC et taille du texte
Le rapport s'affiche avec deux décimales, mais le test de réussite utilise la valeur exacte. Ainsi 4.496 s'affiche 4.50 : 1 et échoue quand même à AA. HSL et CMJN sont arrondis à des nombres entiers. Le CMJN est la conversion mathématique simple depuis RGB, sans profil ICC : un imprimeur peut donc obtenir un autre résultat.
Les deux sélecteurs du contraste fonctionnent séparément du convertisseur et n'acceptent que des couleurs du sélecteur. L'outil ne connaît pas la taille de votre texte. WCAG appelle grand un texte à partir de 18 pt, ou 14 pt en gras.
Ce qui reste dans le navigateur
La conversion et le calcul du contraste s'exécutent en JavaScript dans votre navigateur. Choisir ou saisir une couleur n'envoie aucune requête, ce que montre l'onglet Réseau des outils de développement. Les boutons de copie écrivent dans votre presse-papiers. Le code de l'outil ne conserve pas vos couleurs.