Aller au contenu principal
ImagesProcessado no seu navegador

Vérificateur de Contraste WCAG

Vérifiez le contraste des couleurs et la conformité WCAG AA/AAA avec aperçu et export.

0 sur 3 utilisations aujourd'hui · 3 restantes. Passez à Pro et supprimez la limite.

Mettre à niveau

Vérificateur de Contraste WCAG

WCAG 2.1Traitement local

Conformité WCAG 2.1 avec aperçu en direct et suggestion de couleur accessible.

Algorithme
Premier plan
Ajuster le premier plan0
Arrière-plan
Ajuster l'arrière-plan0
Aperçu en direct
Exemple de contenu

Ce paragraphe montre la paire de couleurs en texte courant pour une validation visuelle rapide du contraste.

Petit texte d'aide nécessitant le niveau de contraste le plus élevé.

Résultat

Diagnostic de contraste

Lien partageable
Ratio
9.7:1
Niveau
AAA
Texte normal
AA · Conforme
AAA · Conforme
Texte large
AA · Conforme
AAA · Conforme
Éléments d'interface
AA · Conforme
APCA Lc
Lc
92.1
Polarité
Texte foncé / fond clair
Bande
Contraste élevé
Verdicts par taille (APCA Bronze/Silver)
Légende 12px· normal · Lc min 90
Bronze · ConformeSilver · Échec
Corps petit 14px· normal · Lc min 75
Bronze · ConformeSilver · Conforme
Corps 16px· normal · Lc min 60
Bronze · ConformeSilver · Conforme
Sous-titre 20px· moyen · Lc min 60
Bronze · ConformeSilver · Conforme
Titre 32px· gras · Lc min 45
Bronze · ConformeSilver · Conforme
Simulation des déficiences visuelles des couleurs
Portée estimée: 100%
Normale
Aa
9.7:1Conforme AA
~92.987% de la population
Deutéranopie
Aa
16.1:1Conforme AA
~6% de la population
Protanopie
Aa
14.7:1Conforme AA
~1% de la population
Tritanopie
Aa
11.1:1Conforme AA
~0.01% de la population
Achromatopsie
Aa
12.1:1Conforme AA
~0.003% de la population
Suggestion accessible
La combinaison actuelle atteint déjà AA — aucune suggestion nécessaire.
Paires enregistrées0 paires
Aucune paire enregistrée pour l'instant.

§ Comment utiliser

Comment vérifier le contraste des couleurs (WCAG)

Vérifiez le contraste texte/fond face aux normes WCAG AA et AAA, avec simulation du daltonisme — dans le navigateur.

  1. Choisissez les couleurs

    Définissez la couleur du texte (premier plan) et du fond avec les sélecteurs ou les champs HEX.

  2. Lisez le ratio

    Voyez le ratio de contraste et s'il passe WCAG AA et AAA pour le texte normal et grand.

  3. Simulez et ajustez

    Prévisualisez les modes de daltonisme et ajustez les couleurs jusqu'à ce que le contraste passe.

Connexes

Outils similaires

Da mesma categoria.