Quel est le vérificateur de contraste de couleur ?
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.
La formule de contraste WCAG 2 est un rapport de luminance relative, et ses seuils sont ce par rapport auquel les audits d'accessibilité et la plupart des exigences légales sont mesurés, c'est donc le bon numéro pour concevoir. Il est également connu pour être imparfait : il peut être généreux pour éclairer le texte sur des arrière-plans sombres et dur sur certaines paires de tonalité moyenne, c'est pourquoi l'algorithme successeur, APCA, existe et est testé pour les versions futures. Le grand texte a une barre inférieure et les grands moyens 18 pt, ou 14 pt en gras, ce qui est d'environ 24 px et 18,66 px. Les éléments non textuels sont couverts séparément par 11 à 3 :11 et 1000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000000
Comment utiliser le vérificateur de contraste de couleurs ?
Entrez la couleur de votre texte
Tapez ou collez la couleur de premier plan dans n'importe quel format courant - #1a1a1a, rgb (26,26,26), hsl (0,0 %,10 %) ou un mot-clé comme navy. Un échantillon de couleur et un sélecteur natif vous permettent de l'affiner.
Entrez votre couleur d'arrière-plan
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.
Lire le ratio et les notes
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.
Résoudre les échecs instantanément
Si une combinaison échoue, appliquez la couleur accessible suggérée - l'outil pousse le texte plus clair ou plus sombre jusqu'à ce qu'il efface votre niveau cible, vous pouvez alors copier la valeur fixe.
Principales caractéristiques
Rapport WCAG exact
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.
AA, AAA et UI
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
Aperçu du texte en direct
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.
Suggestions de couleurs accessibles
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.
Frequently Asked Questions
Related Tools
Color Converter
Convert color codes between HEX, RGB, HSL, HWB, and CMYK instantly
Color Palette Generator
Generate harmonious color palettes from any base color - shades and tints, complementary, analogous, triadic, and monochromatic - with HEX codes you can copy and a CSS variables export.
Color Picker & Converter
Pick colors and convert between HEX, RGB, and HSL formats
Color Shades Generator
Generate tints, shades, and tones from any base color
Comments
0 comments
No comments yet. Be the first to share your thoughts!