Le vérificateur de contraste de couleurs mesure le rapport de contraste entre une couleur de premier plan (texte) et une couleur de fond et vous indique si cette paire répond aux directives d'accessibilité du contenu Web. Il signale un nombre unique compris entre 1:1 et 21:1 et le classe par rapport aux seuils WCAG 2.2 pour AA et AAA aux formats de texte normaux et grands, ainsi que le seuil 3:1 séparé pour les composants et les graphiques d'interface utilisateur.
Le contraste est la différence de luminosité relative entre deux couleurs, et non seulement leur apparence différente. Deux couleurs peuvent sembler distinctes tout en échouant pour les lecteurs ayant une mauvaise vision, une déficience en vision des couleurs ou pour toute personne utilisant un téléphone en plein soleil. Le rapport est calculé avec la formule de luminance relative sRGB définie par WCAG, de sorte que le résultat correspond à ce que les outils d'audit et les utilisateurs de lecteurs d'écran connaissent plutôt qu'une estimation visuelle approximative.
Tout fonctionne dans votre navigateur. Tapez ou collez des couleurs comme un mot clé HEX, RGB, HSL ou CSS, regardez une mise à jour de l'aperçu de texte en direct et, si une paire échoue, vous pouvez appliquer une couleur suggérée qui passe. Rien n'est téléchargé, il n'y a pas d'inscription et l'outil continue de fonctionner hors connexion une fois la page chargée.
Tapez ou collez la couleur de premier plan dans n'importe quel format commun — #1A1A1A, RGB(26,26,26), HSL (0,0%,10%) ou un mot-clé comme la marine. Un échantillon de couleur et un sélecteur natif vous permettent de l'affiner.
Définir l'arrière-plan sur lequel le texte est placé. Si la couleur de votre texte est transparente, elle est mélangée sur cet arrière-plan avant que le rapport ne soit mesuré, ce qui correspond à ce que les utilisateurs voient réellement.
Le rapport de contraste exact apparaît avec les badges Pass ou Fail pour AA et AAA à des tailles normales et grandes, ainsi que la vérification des composants UI 3:1, le tout à côté d'un échantillon de texte en direct sur votre arrière-plan.
Si une combinaison échoue, appliquez la couleur accessible suggérée. L'outil donne un coup de pouce au texte plus clair ou plus sombre jusqu'à ce qu'il efface votre niveau cible, vous pouvez alors copier la valeur fixe.
Utilise les formules officielles de luminosité relative et de contraste sRGB de WCAG 2.2. Le nombre correspond donc aux audits formels jusqu'à deux décimales plutôt que de se rapprocher.
Chaque résultat est noté par rapport à AA (4,5:1), AAA (7:1), les seuils de grand texte (3:1 et 4,5:1) et la règle 3:1 pour les composants d'interface utilisateur et les objets graphiques non textuels
Un exemple réel de rendus normaux et volumineux sur l'arrière-plan que vous avez choisis lors de la saisie, afin que vous puissiez juger de la lisibilité à côté de la partition numérique.
Lorsqu'une paire échoue, l'outil avance la couleur du texte plus claire ou plus sombre en HSL jusqu'à ce qu'il respecte votre rapport cible et offre une valeur de passage que vous pouvez appliquer en un seul clic.
Pick colors and convert between HEX, RGB, and HSL formats
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!