Vérificateur de Contraste de Couleur
Vérifiez les rapports de contraste de couleur pour la conformité WCAG 2.1. Validez les normes AA et AAA instantanément.
Qu'est-ce que le rapport de contraste WCAG ?
Le rapport de contraste WCAG mesure la différence de luminance entre les couleurs de premier plan et de fond. Il va de 1:1 à 21:1.
Quels sont les exigences WCAG AA et AAA ?
WCAG AA exige un minimum de 4.5:1 pour le texte normal et 3:1 pour le texte grand. AAA exige 7:1 et 4.5:1.
Qu'est-ce qui compte comme texte grand ?
Le texte grand est défini comme 18pt (24px) ou plus, ou 14pt (18.66px) gras ou plus.
Pourquoi le contraste de couleur est-il important ?
Un contraste approprié garantit la lisibilité pour les personnes ayant des déficiences visuelles et améliore la lisibilité pour tous.
Comment calculer le rapport de contraste ?
Il est calculé en utilisant les valeurs de luminance relative. La formule est (L1 + 0.05) / (L2 + 0.05).
Quel est le contraste minimum pour les éléments UI ?
WCAG exige un minimum de 3:1 pour les composants UI et objets graphiques.
Puis-je utiliser n'importe quelle combinaison de couleurs ?
Toutes les combinaisons ne respectent pas les standards d'accessibilité. Utilisez ce vérificateur pour valider.
Qu'est-ce que la luminance relative ?
C'est la luminosité perçue d'une couleur, de 0 (noir) à 1 (blanc). Calculée avec l'espace colorimétrique sRGB.
Dois-je vérifier le contraste des images ?
Le texte dans les images doit respecter les mêmes exigences. Pour les images décoratives, cela ne s'applique pas.
Quels outils aident pour le contraste ?
Utilisez les outils de développement du navigateur, plugins de design ou vérificateurs en ligne comme celui-ci.
Comment utiliser Vérificateur de Contraste de Couleur
Vérifiez instantanément si le contraste de votre texte et de votre interface atteint les seuils AA et AAA de WCAG 2.1, entièrement dans votre navigateur. Saisissez deux couleurs : le ratio est calculé localement, rien ne quitte votre appareil.
- Saisissez ou collez la couleur du texte dans le champ Foreground Color, dans n'importe quel format pris en charge comme HEX ou RGB.
- Remplissez le champ Background Color avec la couleur située derrière le texte pour calculer le ratio de contraste.
- Lisez le ratio obtenu et les badges AA et AAA de réussite ou d'échec pour les tailles de texte normale et grande.
- Ajustez l'une des couleurs jusqu'à dépasser 4,5:1 pour le texte courant ou 3:1 pour le texte grand et les composants d'interface.
- Échangez les valeurs de Foreground Color et Background Color pour tester la combinaison inverse, par exemple du texte clair sur un thème sombre.
AAA (7:1) est un bel objectif pour la lecture longue, mais 4,5:1 (AA) est le plancher exigé par la plupart des référentiels d'accessibilité.
Outils associés
- Pipette de Couleur Prélevez n'importe quelle couleur de l'écran avec la pipette. Copiez les codes HEX, RGB, HSL instantanément. Outil gratuit.
- Générateur de Palette de Couleurs Créez de belles palettes de couleurs harmonieuses instantanément avec notre générateur en ligne gratuit. Prend en charge les modes monochromatique, analogue, complémentaire, triadique, split-complémentaire et tétradique. Ajustez les couleurs avec les curseurs HSL, verrouillez les favoris et exportez en CSS, Tailwind, JSON ou SVG. 100% basé sur le navigateur, vos données ne quittent jamais votre appareil.
- Simulateur de Daltonisme Simulateur gratuit de daltonisme en ligne. Testez vos designs pour Protanopie, Deutéranopie, Tritanopie et autres types. 100% privé, fonctionne dans le navigateur.
- GIF Extraire Images Extrayez et téléchargez des images individuelles d'animations GIF en PNG ou sprite sheet. Outil en ligne gratuit avec aperçu et exportation ZIP.
- GIF Inversé Inversez l'ordre de lecture des animations GIF gratuitement en ligne. Importez, prévisualisez et téléchargez instantanément.
- Modificateur de Vitesse GIF Modifiez la vitesse d'animation GIF en ligne. Accélérez ou ralentissez les fichiers GIF instantanément.
- Vidéo en GIF Convertissez une vidéo en GIF animé en ligne. Ajustez la qualité, le débit d'images et la résolution directement dans votre navigateur sans téléchargement.
- Créateur de Mèmes Générateur de mèmes gratuit en ligne. Ajoutez des textes classiques en haut et en bas à n'importe quelle image, déplacez-les et téléchargez votre mème en PNG ou JPEG aussitôt.