FigmaAUDIT CONTRASTE ACCESSIBILITÉ
Prérequis
- Maquettes des composants principaux (boutons, liens, formulaires, cartes)
- Tokens couleur sémantiques publiés (surface, texte, bordure)
- Référentiel accessibilité projet (niveau visé : AA ou AAA partiel)
- Plugin Stark, Contrast ou outil intégré Figma activé
Corriger un contraste insuffisant en développement coûte des allers-retours et retarde la recette accessibilité. Un pré-audit sur les composants Figma — avant handoff — aligne design et dev sur les mêmes seuils WCAG. Vous allez auditer contrastes, états interactifs et exceptions documentées, sans remplacer l'audit HTML final.
Cadrer le périmètre et les seuils
Listez les composants critiques : CTA primaire, liens inline, labels formulaire, messages d'erreur, badges. Chaque variante (hover, focus, disabled, erreur) doit être auditée.
Alignez-vous sur le niveau cible (souvent WCAG 2.2 AA). Documentez dans une page Figma « A11y — Contraste » les paires validées et les exceptions acceptées.
Liez les couleurs aux variables Figma sémantiques. Si une couleur est en dur hors token, corrigez avant handoff.
Exécuter l'audit avec les outils Figma
Sélectionnez un calque texte : le panneau Inspect ou un plugin (Stark, Contrast) affiche le ratio texte/fond. Vérifiez le fond effectif — un texte sur image semi-transparente peut échouer.
Contrôlez les états focus : outline ou ring doit atteindre 3:1 par rapport au fond adjacent. Les boutons ghost sur fond clair échouent souvent au focus uniquement.
Pour les textes sur dégradé ou photo, ajoutez un overlay ou scrim documenté. Notez l'opacité en Dev Mode pour que l'intégrateur reproduise le même contraste.
Documenter et transmettre au développement
Marquez les composants conformes avec un statut « A11y OK ». Les écarts ouverts portent un commentaire Figma lié au ticket ClickUp ou GitHub.
Exportez un tableau récapitulatif vers Notion : composant, paire couleur, ratio mesuré, statut. Le PM peut prioriser les corrections avant le sprint d'intégration.
Lors du handoff Dev Mode, référencez le tutoriel figma-handoff-dev-mode pour les annotations focus clavier et aria-label.
Erreurs fréquentes
Auditer uniquement la homepage marketing et oublier les composants formulaire.
Valider le hover mais pas le disabled : texte grisé illisible sur fond gris clair.
Confondre « joli » et conforme : un CTA pastel peut être à 2,8:1.
Ne pas retester après changement de token global : une mise à jour `surface-100` peut casser dix composants.
Ce qu'il faut retenir
Pré-audit sur composants et toutes leurs variantes, pas seulement les pages finales.
Tokens sémantiques + ratios WCAG documentés avant handoff.
Exceptions tracées ; recette HTML obligatoire en fin de projet.
Focus et erreurs formulaire inclus dans le périmètre dès la maquette.
FAQ
Non. Il réduit les écarts en amont. L'audit complet porte sur le HTML rendu, le clavier, les lecteurs d'écran et les vrais contenus.
Stark et Contrast sont les plus utilisés en agence. L'essentiel est la discipline : même outil, mêmes seuils, sur chaque release design system.
Auditez chaque paire dans les deux modes Figma. Un texte conforme en light peut échouer en dark si les tokens ne sont pas symétriques.
Cursor