♀

vérificateur contraste WCAG

Testez plusieurs paires de couleurs texte/fond selon les normes WCAG 2.1 AA et AAA. L’aperçu en direct montre exactement le rendu du texte à différentes tailles et graisses.

Outils de design Fonctionne localement Aucune donnée envoyée
WCAGaccessibilitératio de contrastea11y
Exporter les paires de couleurs 

    

      
      
    

  


  


  


  

    💡
    

      WCAG AA nécessite 4.5:1 pour le texte normal, 3:1 pour le texte de grande taille (18pt ou 14pt en gras). WCAG AAA nécessite 7:1 pour le texte normal et 4.5:1 pour le grand texte. Viser AA est le minimum légal dans la plupart des réglementations d’accessibilité.
    

  


  



  

    
Qu’est-ce que le vérificateur contraste WCAG AA ?

    
Vérifiez les ratios de contraste des couleurs par rapport aux normes WCAG AA et AAA. Testez plusieurs paires couleur de texte/fond à la fois. Gratuit, dans le navigateur, aucune donnée envoyée.

  


  

    
Comment utiliser le vérificateur contraste WCAG

    
    
      
  1. Saisissez une couleur de premier plan (texte) et une couleur d’arrière-plan à l’aide des sélecteurs de couleur ou en saisissant des valeurs HEX.
    2. 
      
  2. L’outil calcule instantanément le ratio de contraste entre les deux couleurs.
    3. 
      
  3. Vérifiez les résultats de réussite/échec AA et AAA pour le texte normal et le grand texte.
    4. 
      
  4. Ajustez les couleurs jusqu’à ce que votre combinaison atteigne le niveau WCAG dont vous avez besoin.
    5. 
      
  5. Copiez les valeurs de couleur conformes pour les utiliser dans votre CSS.
    6. 
    

  






  
Outils associés

  

    👁️
simulateur daltonisme
Simulez la protanopie, la deutéranopie et la tritanopie sur n’importe quelle image

    🎨
sélecteur couleur
Convertissez les couleurs entre HEX, RGB, HSL et CMYK

    🎨
générateur palette
Générez des palettes de couleurs complémentaires, analogues et triadiques

  






  
    Comprendre le contraste WCAG AA
    ▾
  
  

    

      Exemple
      

        

          

            Entrée
            Premier plan #1F2937 sur fond #FFFFFF
          

          

            Sortie
            Conforme WCAG AA pour le texte normal et le grand texte
          

        

      

    

    

      Cas d’utilisation courants
      

        
    
          
  • Vérifiez les couleurs du texte par rapport à WCAG AA avant le lancement
    • 
          
  • Passez en revue les régressions d’accessibilité dans les tokens du système de conception
    • 
          
  • Vérifiez séparément le contraste des titres et du texte courant
    • 
          
  • Transmettez des paires de couleurs conformes aux équipes produit
    • 
        

      

    

    

      Questions fréquentes
      

        
Quelle est la différence entre AA et AAA ?
AA est le niveau de conformité standard exigé par la plupart des réglementations. AAA est renforcé — non exigé pour tout contenu, mais améliore la lisibilité.

        
Ce contrôle vérifie-t-il le contraste non textuel ?
WCAG 1.4.11 exige un contraste de 3:1 pour les composants d’interface et les éléments graphiques — ce vérificateur couvre cette exigence.

        
Que fait le vérificateur contraste WCAG - Test par lots AA/AAA ?
Le vérificateur contraste WCAG - Test par lots AA/AAA s’exécute entièrement dans votre navigateur et vous aide à accomplir cette tâche sans envoyer de données à un serveur.

        
Le vérificateur contraste WCAG - Test par lots AA/AAA est-il gratuit ?
Oui. Cet outil est gratuit et ne nécessite aucune inscription.