Vérifiez ensuite deux couleurs par rapport à WCAG AA et AAA et voyez le texte à l'écran. Convertissez une couleur entre HEX, RVB, TSL, TSV et OKLCH, et testez si le texte se lit facilement sur son arrière-plan. C'est gratuit et cela s'exécute dans votre navigateur.
Comment convertir une couleur
- Utilisez Choisir pour sélectionner une couleur, ou saisissez ou collez une valeur dans N'importe quelle couleur.
- Lisez la même couleur en HEX, RVB, TSL, TSV, OKLCH et son nom CSS quand il existe.
- Appuyez sur Copier à côté du format voulu, ou Copier le HEX.
Comment vérifier le contraste
- Choisissez une Couleur du texte et une Couleur d'arrière-plan, ou utilisez Utiliser la couleur principale comme texte ou Utiliser comme arrière-plan.
- Lisez le rapport de contraste et s'il passe AA et AAA pour le texte normal, le Grand texte à 24 px, le Texte en gras à 19 px et un Contour de bouton.
- Si la paire échoue, utilisez la couleur proche suggérée qui passe.
Quel format utiliser
HEX et RVB décrivent la lumière rouge, verte et bleue d'une couleur et fonctionnent partout. TSL et TSV décrivent la teinte, la saturation et la luminosité ou la brillance, ce qui facilite l'ajustement à la main d'une couleur. OKLCH est le format CSS le plus récent : sa luminosité correspond à la clarté perçue des couleurs, de sorte que deux couleurs de même L paraissent vraiment aussi claires, ce qui le rend idéal pour les palettes et thèmes. Tous les navigateurs modernes prennent en charge oklch() en CSS.
Comment fonctionne le rapport de contraste
Le rapport compare la luminance relative des deux couleurs, de 1:1 pour des couleurs identiques à 21:1 pour du noir sur du blanc. Les résultats ne sont jamais arrondis à la hausse : 4,49:1 échoue donc à AA. Si la couleur du texte est transparente, elle est d'abord mélangée avec l'arrière-plan. Quand une paire échoue, une couleur proche qui passe est suggérée pour l'un ou l'autre côté.
WCAG AA demande 4,5:1 pour le texte normal et 3:1 pour le grand texte. AAA demande 7:1 pour le texte normal et 4,5:1 pour le grand texte. Les respecter aide les personnes malvoyantes et toute personne qui lit sur un écran lumineux.
Entrées que cet outil comprend
HEX à trois, quatre, six et huit chiffres avec ou sans #, rgb() et rgba() avec virgules ou espaces, hsl() avec deg, turn ou rad, hsv(), oklch() et oklab(), les 148 noms de couleur CSS et des nombres simples comme 59, 130, 246. L'alpha après une barre oblique ou comme quatrième valeur est conservé.
Qui l'utilise
Concepteurs et développeurs web qui construisent un thème, chefs de petites entreprises qui vérifient que leurs couleurs de marque sont lisibles, étudiants qui font des diapositives, et toute personne qui a une couleur dans un format et en veut un autre. Pour trouver une couleur dans une photo, utilisez le sélecteur de couleur d'image.
Questions
Qu'est-ce qu'un bon rapport de contraste ?
Visez au moins 4,5:1 pour du texte normal. Plus c'est haut, mieux c'est, et 7:1 atteint le niveau AAA.
Pourquoi les mêmes valeurs de couleur semblent-elles légèrement différentes selon les écrans ?
Les écrans varient en luminosité et en couleur. Les valeurs sont les mêmes, mais l'affichage change leur apparence.
Quelque chose est-il envoyé ?
Non. La conversion se fait dans votre navigateur.