Comment utiliser le vérificateur
- Choisissez une couleur de texte et une couleur de fond, ou collez leurs codes.
- Lisez le rapport de contraste et les quatre résultats en dessous.
- Regardez l'aperçu. Il montre un grand texte, un texte normal et des petits caractères dans vos couleurs.
- Quand un niveau échoue, le vérificateur montre la couleur de texte la plus proche et le fond le plus proche qui passent. Appuyez sur Utiliser pour en essayer un.
Inverser retourne les couleurs, pour du texte blanc sur un bouton coloré. Les couleurs se trouvent aussi dans l'adresse de la page, vous pouvez donc envoyer le lien à quelqu'un.
Ce que veulent dire les chiffres
Le rapport de contraste compare la luminosité des deux couleurs, de 1:1 (la même couleur) à 21:1 (noir sur blanc). WCAG 2.2, les règles auxquelles renvoient la plupart des lois sur l'accessibilité, fixe ces minimums :
- AA, texte normal : 4,5:1. Le niveau à viser sur les sites, les e-mails et les posts.
- AA, grand texte : 3:1. Pour un texte d'au moins 24 px, ou 18,66 px en gras.
- AAA, texte normal : 7:1. Le niveau le plus strict, bon pour la lecture longue.
- AAA, grand texte : 4,5:1.
Les boutons, les icônes et les bordures des champs de formulaire demandent 3:1 par rapport à ce qui les entoure. WCAG n'arrondit jamais vers le haut, donc 4,49:1 échoue à AA. Le vérificateur arrondit vers le bas pour la même raison.
Comment la suggestion est trouvée
Le vérificateur garde la teinte et l'intensité de votre couleur et ne change que sa luminosité, plus sombre ou plus claire, jusqu'à ce que le rapport passe. Il le fait en OKLCH, où un pas de luminosité paraît identique pour toutes les couleurs, et choisit le plus petit changement. Votre bleu reste bleu, un peu plus profond. Quand aucune luminosité de cette teinte n'atteint le niveau, il le dit, et la solution est de changer l'autre couleur.
Sur les réseaux sociaux
Un post est souvent vu sur un petit téléphone, en plein soleil, d'un coup d'oeil. Visez au moins 4,5:1 pour chaque ligne de texte dans une image, même le gros titre. Un texte sur une photo a un fond qui change d'une lettre à l'autre : posez-le sur une zone calme de la photo ou sur une forme pleine.
Utilisez-le dans l'éditeur de visuels de Postfjord
Dans l'éditeur de visuels, ajoutez vos couleurs de marque une seule fois sous Paramètres, Marque. Mélanger essaie d'autres mélanges de vos propres couleurs et ne pose jamais un texte sur une couleur où il se lit mal. Appliquer la marque garde la couleur du texte posé directement sur une photo, pour qu'il reste facile à lire. Vérifiez une paire ici avant de l'enregistrer dans votre marque.
FAQ
Quel rapport de contraste me faut-il ?
4,5:1 pour le texte normal et 3:1 pour le grand texte respectent WCAG 2.2 AA, le niveau que demandent la plupart des lois et des recommandations. 7:1 respecte AAA.
Qu'est-ce qui compte comme grand texte ?
Un texte d'au moins 18 points, soit environ 24 pixels, ou d'au moins 14 points en gras, soit environ 18,66 pixels.
Pourquoi ma couleur me semble correcte mais échoue ?
Votre écran, la lumière de la pièce et vos yeux sont tous différents de ceux de vos lecteurs. Le rapport est une mesure qui vaut aussi pour les personnes à la vue plus faible, et pour un téléphone au soleil.
Le vérificateur fonctionne-t-il pour WCAG 3 ?
Non. WCAG 3 est encore un brouillon et sa nouvelle méthode de contraste, APCA, peut changer. Le vérificateur utilise WCAG 2.2, qui est la norme d'aujourd'hui.
Le vérificateur enregistre-t-il mes couleurs ?
Non. Il tourne dans votre navigateur. Les couleurs ne sont que dans l'adresse de la page, et rien n'est envoyé à Postfjord.