ToolStack

Vérificateur de Contraste

Vérifiez instantanément le ratio de contraste WCAG entre un texte et son arrière-plan.

100 % confidentiel — tout fonctionne dans votre navigateur

Publicité

Mode d'emploi

  1. 1

    Définissez la couleur du texte et celle de l'arrière-plan avec les sélecteurs ou en saisissant des codes hex.

  2. 2

    Le ratio de contraste WCAG est calculé instantanément.

  3. 3

    Vérifiez les quatre badges pour voir quels niveaux WCAG sont atteints.

  4. 4

    Utilisez Inverser pour tester la combinaison inverse.

Exemples

Texte foncé sur blanc

Entrée

Texte #111827 · Fond #FFFFFF

Résultat

17,74 : 1 — AA et AAA conformes pour toutes les tailles

Gris à faible contraste

Entrée

Texte #9CA3AF · Fond #FFFFFF

Résultat

2,54 : 1 — non conforme AA pour le texte normal

Questions fréquentes

Quel ratio de contraste viser ?

Le WCAG recommande au moins 4,5:1 pour le texte normal (AA) et 7:1 pour AAA. Le grand texte (18 pt, ou 14 pt gras) nécessite au moins 3:1.

Comment le ratio est-il calculé ?

Selon la formule WCAG 2.x (L1 + 0,05) / (L2 + 0,05), où L1 et L2 sont les luminances relatives des couleurs claire et foncée. Le ratio va de 1:1 à 21:1.

Le daltonisme est-il pris en compte ?

Non — le ratio mesure uniquement l'écart de luminosité. Des couleurs conformes peuvent rester difficiles à distinguer pour les personnes daltoniennes.

Outils similaires

Convertisseur de CouleurConvertissez entre les formats HEX, RGB, HSL, HSV et HWB dans les deux sens.Générateur de Couleur CSSTransformez une couleur de base en une échelle de 10 nuances exportable en variables CSS.Sélecteur de CouleurChoisissez une couleur et copiez ses valeurs HEX, RGB, HSL et HSV en un clic.HEX en RGBConvertissez des codes HEX en valeurs RGB instantanément — gratuit et privé.RGB en HEXConvertissez des valeurs RGB en code HEX instantanément — gratuit et privé.Générateur de DégradéCréez visuellement des dégradés CSS linéaires et radiaux, puis copiez le code CSS.