Vérifiez le ratio de contraste entre deux couleurs pour garantir la conformité WCAG 2.1. Testez les niveaux AA et AAA pour le texte normal et grand avec aperçu en temps réel.
Saisissez ou choisissez votre couleur de texte/premier plan en utilisant le sélecteur de couleurs ou en saisissant une valeur HEX. Il s'agit généralement de votre couleur de texte.
Saisissez ou choisissez votre couleur d'arrière-plan. Utilisez le bouton d'échange pour inverser rapidement le premier plan et l'arrière-plan si nécessaire.
Vérifiez le rapport de contraste et les badges de conformité WCAG. Les badges verts indiquent la conformité, les rouges indiquent l'échec. Visez au moins la conformité AA pour tout le texte.
Utilisez la section d'aperçu pour voir comment votre combinaison de couleurs apparaît avec du texte réel de différentes tailles avant de l'implémenter dans votre design.
Les WCAG (Directives pour l'accessibilite des contenus web) definissent les exigences de contraste pour garantir la lisibilite du contenu par les personnes malvoyantes. Le niveau AA exige 4.5:1 pour le texte normal et 3:1 pour le grand texte. Le niveau AAA exige 7:1 et 4.5:1 respectivement.
La luminance relative mesure la luminosite percue d'une couleur avec la formule : L = 0.2126R + 0.7152G + 0.0722B. Les coefficients refletent la sensibilite de l'oeil humain, le vert etant le plus important. Les valeurs sont linearisees depuis sRGB avant calcul.
La formule du rapport de contraste est : (L1 + 0.05) / (L2 + 0.05), ou L1 est la luminance de la couleur claire et L2 celle de la couleur foncee. Le decalage de 0.05 empeche la division par zero et tient compte de la lumiere ambiante.
Le grand texte est defini comme 18pt (24px) en poids normal ou 14pt (18.5px) en gras. Le grand texte a des exigences de contraste plus faibles car sa taille accrue le rend naturellement plus lisible, meme avec moins de contraste.
Environ 8% des hommes et 0.5% des femmes ont une deficience de la vision des couleurs. Le texte a faible contraste est egalement difficile a lire pour les personnes agees, en plein soleil ou sur des ecrans de mauvaise qualite. Un bon contraste profite a tous.
Un rapport de contraste mesure la différence de luminance (luminosité) entre deux couleurs. Il va de 1:1 (pas de contraste, même couleur) à 21:1 (contraste maximum, noir sur blanc). Des ratios plus élevés signifient une meilleure lisibilité et accessibilité.
Ceci est un texte de paragraphe ordinaire. Un bon contraste assure la lisibilité pour tous les utilisateurs, y compris ceux souffrant de déficiences visuelles.
Ceci est un petit texte qui nécessite un contraste encore meilleur pour la lisibilité.
Rapport de contraste
Cliquez sur une paire pour l'utiliser comme couleurs de premier plan/arrière-plan
Préréglages enregistrés est une fonctionnalité Supporter.
Historique des outils est une fonctionnalité Supporter.
Notes d'outils est une fonctionnalité Supporter.
