Vérificateur de contraste (WCAG)

Vérifiez si deux couleurs respectent les minimums de contraste WCAG 2.1.

Contraste et accessibilité

WCAG (Web Content Accessibility Guidelines) fixe des ratios de contraste minimaux pour un texte lisible. Le niveau AA — le standard visé par la plupart des sites — exige 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt+ ou 14 pt gras). AAA est plus strict à 7:1. Ne pas respecter cela rend votre site illisible pour les utilisateurs malvoyants ou sur écrans plus anciens.

Les ratios de contraste ne sont pas intuitifs. Du rouge sur noir peut paraître percutant mais n'atteint que 5,25:1 — à peine conforme AA. Du gris pâle sur fond blanc, courant dans les designs « minimalistes » modernes, échoue souvent complètement. Cette calculatrice affiche le ratio et indique quels niveaux WCAG chaque paire de couleurs respecte.

Frequently asked questions

Qu'est-ce que WCAG et quelles sont les exigences de contraste ?
WCAG (Web Content Accessibility Guidelines) est le standard d'accessibilité web. Les exigences de contraste : le niveau AA exige un ratio de 4,5:1 pour le texte normal et 3:1 pour le grand texte (18 pt+ ou 14 pt gras). AAA (plus strict) exige 7:1 et 4,5:1 respectivement. La plupart des sites visent AA.
Comment le ratio de contraste est-il calculé ?
En comparant la luminance relative de deux couleurs : ratio = (L1 + 0,05) / (L2 + 0,05), où L1 est la couleur plus claire et L2 la plus foncée. Blanc sur noir donne 21:1 (le maximum). Le rouge pur (#FF0000) sur noir pur ne fait que 5,25:1 — le rouge est perceptivement plus terne qu'on ne le pense.
Pourquoi certaines paires de couleurs paraissent-elles bien mais échouent ?
Vos yeux s'ajustent au contexte. Du gris sur gris peut sembler lisible à quelqu'un avec une vision parfaite en bon éclairage, tout en échouant pour les utilisateurs à vision basse, sur écrans plus anciens, avec éblouissement ou daltonisme. Les ratios WCAG sont des minimums qui fonctionnent pour l'audience la plus large — pas le standard du « ça me va à moi ».
Et les éléments non textuels ?
WCAG 2.1 a ajouté la directive 1.4.11 : les composants d'interface et objets graphiques ont besoin d'un contraste de 3:1 avec les couleurs adjacentes. Cela inclut les bordures de formulaire, icônes, graphiques et indicateurs de focus. Les bordures gris clair subtiles sur fond blanc échouent à ce test — un problème courant dans les designs minimalistes modernes.

Calculateur de frais Shopify Payments

Frais de traitement Shopify Payments par palier de forfait (Basic/Shopify/Advanced/Plus), en ligne ou en personne, plus le supplément pour passerelle tierce.

Générateur aléatoire

Nombres, mots de passe et chaînes aléatoires sécurisés.

Calculateur de frais Mercari

Frais de vente Mercari + traitement des paiements avec mode bénéfice et recherche d’objectif.