Accessibilité

Vérifiez le contraste WCAG d'une page entière

Design Snap est une extension Chrome gratuite qui audite le contraste des textes de toute la page que vous regardez selon WCAG 2.1 — AA (4,5:1, ou 3:1 pour les grands textes) et AAA (7:1). Elle mesure le ratio réellement affiché, en composant d'abord les fonds translucides et les textes semi-transparents, et propose des corrections qui n'ajustent que la luminosité : la teinte de votre marque reste intacte.

Ajouter à Chrome — gratuit Voir le tarif PRO

Noté 5,0/5 sur le Chrome Web Store · lire les avis · Plan gratuit · Sans compte · Analyse 100 % locale

Comment vérifier le contraste des couleurs d'un site

Vérifier le contraste d'une page se fait en trois étapes. Au lieu de choisir deux couleurs à la main, Design Snap parcourt chaque élément de texte, trouve le fond sur lequel il se trouve réellement et calcule le ratio.

  1. Installer

    Ajoutez Design Snap à Chrome depuis le Chrome Web Store. Plan gratuit, sans compte.

  2. Extraire

    Ouvrez la page et cliquez sur Extraire. L'onglet Contraste affiche le score de la page et ses pires paires texte/fond en échec.

  3. Corriger

    Avec PRO, voyez chaque paire en échec avec une couleur suggérée qui passe — même teinte et saturation, luminosité ajustée.

Les ratios de contraste WCAG en 30 secondes

Le critère WCAG 2.1 1.4.3 (niveau AA) exige un ratio de contraste d'au moins 4,5:1 pour le texte normal et 3:1 pour les grands textes (24px, ou environ 18,7px en gras). Le niveau AAA (critère 1.4.6) monte à 7:1 et 4,5:1. Le ratio compare la luminance relative de la couleur du texte et de son fond, de 1:1 (identiques) à 21:1 (noir sur blanc).

Pourquoi les vérificateurs paire par paire ratent de vrais échecs

La plupart des outils de contraste vous demandent deux codes hex. Sur une vraie page, la difficulté est de savoir quelles couleurs se rencontrent vraiment : une légende gris clair sur une carte teintée, du texte blanc sur un overlay rgba(), un lien atténué dans un bandeau coloré. Design Snap trouve ces paires pour vous, sur la page rendue.

  • Les transparences sont composées avant la mesure : un texte rgba(0,0,0,.6) sur une carte teintée est mesuré tel qu'il s'affiche.
  • Les grands textes utilisent le seuil 3:1 automatiquement, selon la taille et la graisse calculées.
  • Le texte sur image ou dégradé est signalé comme ignoré, jamais deviné — un ratio n'y aurait aucun sens.

Des corrections qui respectent la marque

La correction habituelle d'une paire en échec, c'est « fonce-la », ce qui revient souvent à changer de couleur. Les corrections suggérées par Design Snap (PRO) ne modifient que la luminosité : teinte et saturation restent intactes, la couleur corrigée appartient toujours à la palette. Vous pouvez tester la correction sur la page en direct avec l'édition live du thème avant de toucher au code.

Ce que c'est — et ce que ce n'est pas

Design Snap vérifie très finement le contraste des couleurs, un critère de l'accessibilité. Ce n'est pas un audit d'accessibilité complet : navigation clavier, ARIA, textes alternatifs et ordre du focus demandent un outil dédié comme axe DevTools ou Lighthouse, et des tests manuels.

Chaque paire de la page, mesurée telle qu'affichée

Un score de contraste pour toute la page, les pires échecs d'abord, et des corrections qui gardent vos couleurs.

  • Seuils WCAG 2.1 AA et AAA, grands textes gérés
  • Fonds et textes translucides composés avant la mesure
  • Texte sur image ou dégradé signalé, jamais deviné
  • Gratuit : score de la page + les 3 pires échecs
  • PRO : chaque paire en échec avec une correction de luminosité
Édition live Design Snap sur discord.com : chaque rôle de couleur shadcn/ui — background, foreground, primary, secondary, muted, accent — avec sa valeur hex, modifiable sur la page

Vérificateur de contraste — FAQ

Installez l'extension Chrome Design Snap, ouvrez la page et cliquez sur Extraire. L'onglet Contraste affiche un score pour la page et ses pires paires texte/fond en échec selon WCAG 2.1 AA et AAA.

Le niveau AA de WCAG 2.1 exige 4,5:1 pour le texte normal et 3:1 pour les grands textes (24px, ou environ 18,7px en gras). Le niveau AAA exige 7:1 et 4,5:1.

Oui. Les fonds translucides et les textes semi-transparents sont composés avant la mesure : le ratio est celui réellement affiché à l'écran.

Le score de la page et les trois pires échecs sont gratuits. PRO (4,99 € une fois, à vie) affiche la liste complète des paires en échec, chacune avec une correction suggérée.

Non. Il vérifie finement le contraste des couleurs, l'un des échecs WCAG les plus fréquents, mais l'accès clavier, la sémantique et la compatibilité lecteur d'écran demandent des outils comme axe DevTools ou Lighthouse et des tests manuels.

Extracteur de palette

Les couleurs d'un site classées par usage réel.

Extraire un design system

Le système complet : couleurs, typo, radius, ombres, variables.

Générateur de thème shadcn/ui

Une palette accessible mappée sur les rôles shadcn/ui.

vs DevTools & CSS Peeper

Comment Design Snap se compare aux outils habituels.