Vérificateur de contraste WCAG

Le convertisseur de couleur HEX / RGB / HSL affiche une couleur dans les trois notations CSS. Saisissez un code HEX (3 ou 6 chiffres, avec ou sans #), utilisez le sélecteur de couleur natif, ou entrez des canaux RGB ou des valeurs HSL : les autres formats suivent. Les nombres HSL sont arrondis au degré et au pour-cent entiers, si bien qu'un aller-retour HEX vers HSL puis retour peut arriver à un pas de son point de départ. Il ne gère que les couleurs opaques — pas de canal alpha, donc ni #RRGGBBAA, ni rgba(), ni hsla() — et pas de couleurs nommées comme « rebeccapurple », ni CMJN, LAB, LCH ou OKLCH. La sortie est un #rrggbb en minuscules, rgb(r, g, b) et hsl(h, s%, l%), chacune copiable. Pour vérifier une paire texte/fond selon WCAG, utilisez le vérificateur de contraste WCAG ; pour décliner une couleur en un ensemble, utilisez le générateur de palette.

Le générateur de palette de couleurs décline une seule couleur HEX de base en onze échantillons en faisant tourner sa teinte et en modifiant sa luminosité. La ligne d'harmonie, c'est la base, son complément (teinte +180°), deux teintes analogues (±30°) et deux teintes triadiques (±120°). La ligne de nuances reprend la teinte et la saturation de la base et fixe la luminosité à cinq valeurs fixes — 20, 35, 50, 65 et 80 — ce sont donc des paliers de luminosité absolus, pas des teintes claires ou foncées relatives à la base. La saturation n'est jamais modifiée. La sortie est des codes HEX à copier ; il n'y a aucun contrôle d'accessibilité ou de contraste sur les paires, vérifiez donc les combinaisons texte et fond séparément avec le vérificateur de contraste WCAG. Une couleur HEX de base invalide ne produit tout simplement aucune palette.

Le Générateur de dégradé CSS compose un dégradé CSS visuellement et vous donne le code à copier. Choisissez un dégradé linéaire, radial ou conique et ajoutez de deux à huit points de couleur, chacun avec une couleur HEX et une position de 0 à 100 pour cent. Pour un dégradé linéaire, vous réglez l'angle en degrés ; pour un dégradé conique, vous réglez l'angle de départ ; pour les dégradés radiaux et coniques, vous choisissez une position comme centre ou haut gauche, et un dégradé radial peut être dessiné en cercle ou en ellipse. Un grand aperçu et le CSS généré se mettent à jour en direct pendant que vous travaillez, et tout est composé dans votre navigateur à partir de valeurs validées, si bien que vos couleurs, vos points et le CSS ne sont jamais envoyés ni stockés. Les couleurs se modifient sous forme de codes HEX à côté d'un sélecteur de couleur natif. C'est différent du Générateur de palette de couleurs, qui produit un ensemble d'échantillons distincts plutôt qu'un fond continu. Les couleurs d'un dégradé ne garantissent pas automatiquement un contraste suffisant pour le texte — vérifiez le contraste texte/fond séparément avec le Vérificateur de contraste WCAG.

Prévisualisez le rendu approximatif d'une image PNG, JPEG ou WebP pour des personnes ayant une déficience de la vision des couleurs, entièrement dans votre navigateur. Chargez une image locale et comparez l'original côte à côte avec une simulation approchée de la protanopie (sensibilité au rouge réduite), de la deutéranopie (sensibilité au vert réduite), de la tritanopie (sensibilité au bleu réduite) ou de l'achromatopsie (absence de couleur, calculée à partir de la luminance perceptuelle et non d'une simple moyenne des canaux). Chaque pixel est transformé localement sur un canvas ; l'image n'est jamais téléversée et rien n'est conservé après la fermeture de l'onglet. Le canal alpha est recopié tel quel, les zones transparentes restent donc transparentes, et vous pouvez exporter la vue simulée en PNG pour vos notes de conception ou vos rapports de bogue. La simulation est une approximation destinée à la conception et à la vérification visuelle, pas un diagnostic médical, et elle ne détecte ni ne mesure la vision de qui que ce soit. Le résultat dépend aussi de votre écran : la gestion des couleurs du navigateur et le calibrage de l'affichage varient d'un appareil à l'autre. Cet outil répond à une question différente de celle du Vérificateur de contraste WCAG, qui note le rapport entre deux couleurs précises, et de celle du Sélecteur de couleur d'image, qui lit la valeur exacte d'une couleur sous un point.