Calculateur de contraste WCAG

Le contraste entre la couleur du texte et la couleur de fond est l'un des critères les plus importants pour l'accessibilité web. Des millions de personnes souffrent de déficiences visuelles (malvoyance, daltonisme, dégradation liée à l'âge) qui rendent difficile la lecture de textes à faible contraste. Un contraste insuffisant affecte aussi la lisibilité en plein soleil ou sur des écrans de mauvaise qualité.

Les Web Content Accessibility Guidelines (WCAG) définissent des critères de contraste minimum pour garantir la lisibilité. Ces règles font partie du standard international d'accessibilité et sont souvent imposées par la réglementation (RGAA en France, Section 508 aux États-Unis, EN 301 549 en Europe) pour les sites des administrations publiques et de nombreuses entreprises.

Le ratio de contraste WCAG est calculé à partir de la luminance relative de chaque couleur. La luminance est une mesure de la clarté perçue d'une couleur, calculée selon la formule : L = 0,2126 × R + 0,7152 × G + 0,0722 × B, où R, G, B sont les composantes colorées après correction gamma (linéarisation). Le ratio est ensuite : (L1 + 0,05) / (L2 + 0,05), où L1 est la luminance la plus élevée.

Le ratio varie de 1:1 (aucun contraste, même couleur) à 21:1 (contraste maximum, noir sur blanc). Plus le ratio est élevé, meilleur est le contraste. La correction gamma est essentielle : sans elle, la perception humaine de la luminosité ne serait pas correctement modélisée, car nos yeux sont plus sensibles aux variations dans les tons sombres.

Les WCAG définissent deux niveaux de conformité pour le contraste. Le niveau AA est le minimum recommandé pour la plupart des sites : il exige un ratio d'au moins 4,5:1 pour le texte normal (moins de 18pt ou 14pt en gras) et 3:1 pour le grand texte (18pt ou plus, soit 24px). Ce niveau est généralement suffisant pour la majorité des utilisateurs.

Le niveau AAA est plus strict : il exige 7:1 pour le texte normal et 4,5:1 pour le grand texte. Ce niveau garantit une lisibilité optimale pour les personnes souffrant de malvoyance sévère. Il n'est pas toujours réalisable pour l'ensemble d'un site, mais est recommandé pour les contenus critiques (formulaires, informations légales, textes d'aide).

Si votre ratio est insuffisant, plusieurs ajustements simples peuvent aider : assombrir la couleur du texte, éclaircir le fond, ou augmenter la taille du texte (le grand texte a des exigences moins strictes). Les palettes de couleurs monochromatiques (nuances d'une même teinte) posent souvent des problèmes de contraste entre les niveaux clairs et foncés.

Attention aux textes sur images ou dégradés : le contraste doit être vérifié sur toutes les zones où le texte peut apparaître. Les textes décoratifs (logos, titres graphiques) sont exemptés des critères WCAG, mais les textes informatifs et fonctionnels (boutons, liens, labels de formulaire) doivent toujours être conformes. Un bon outil de design comme Figma ou Sketch intègre des vérificateurs de contraste directement dans l'interface.

Mon site doit-il être conforme WCAG ? En France, la loi oblige les organismes publics et certaines entreprises à respecter le RGAA (Référentiel Général d'Amélioration de l'Accessibilité), qui intègre les critères WCAG. Même sans obligation légale, l'accessibilité améliore l'expérience de tous les utilisateurs et peut impacter positivement le référencement.

Le daltonisme est-il pris en compte ? Le ratio de contraste WCAG est calculé en luminance, pas en différence de teinte. Il protège donc partiellement les daltoniens, mais ne garantit pas la distinction entre couleurs de même luminance (ex. rouge et vert). Pour une accessibilité complète aux daltoniens, il est recommandé de ne pas utiliser la couleur seule comme vecteur d'information.