Convertisseur de couleur HEX / RGB / HSL

Vérifiez le ratio de contraste WCAG entre une couleur de texte et une couleur de fond, avec un aperçu en direct et un résultat clair de réussite ou d'échec selon les seuils WCAG 2.2 AA et AAA, pour le texte normal comme pour le texte large. C'est l'outil à utiliser pour choisir des combinaisons de couleurs accessibles sur un site, une application ou un document, car un texte à faible contraste est l'une des défaillances d'accessibilité les plus fréquentes et peut rendre un contenu illisible pour les personnes malvoyantes ou daltoniennes, ou en plein soleil sur un écran de téléphone. Le ratio est calculé localement avec la formule exacte de luminance relative de la spécification WCAG, si bien que les résultats correspondent à ceux d'un audit d'accessibilité automatisé, sans jamais rien envoyer à un serveur.

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.