Comment utiliser : Vérificateur de contraste APCA
- Saisissez les couleurs du texte et du fond (format CSS au choix).
- Lisez la valeur Lc : plus elle est élevée, plus le texte est lisible. Une valeur négative indique un texte clair sur un fond sombre.
- Consultez le tableau des usages pour savoir si la combinaison convient au texte courant, aux titres ou uniquement aux éléments non textuels.
- Comparez avec le ratio WCAG 2 affiché à côté, qui reste aujourd'hui la norme légale et d'audit.
Qu'est-ce qu'APCA ?
APCA (Accessible Perceptual Contrast Algorithm), développé par Andrew Somers pour le W3C, est la méthode de contraste proposée pour les futures recommandations WCAG 3. Au lieu d'un ratio comme 4,5:1, elle fournit une valeur de contraste de luminance Lc allant d'environ 0 à 106 (positive pour un texte sombre sur fond clair, négative pour un texte clair sur fond sombre). Elle modélise la façon dont la vision humaine perçoit réellement le contraste, y compris l'effet de la taille et de la graisse de la police.
Pourquoi APCA plutôt que le ratio WCAG 2 ?
- Prise en compte de la polarité : WCAG 2 traite le blanc sur noir et le noir sur blanc de la même façon, mais notre vision non. APCA les évalue différemment.
- Meilleur en mode sombre : la formule WCAG 2 surestime le contraste des couleurs sombres, si bien que certaines combinaisons « conformes » en thème sombre sont difficiles à lire. APCA les détecte.
- Moins de faux échecs : certaines paires de tons moyens lisibles, comme le texte blanc sur des boutons orange, échouent selon WCAG 2 alors qu'APCA les évalue de façon plus réaliste.
Comment lire la valeur Lc
| Lc | Usage adapté |
|---|---|
| 90+ | Recommandé pour le texte courant et les lectures longues |
| 75 | Minimum pour le texte courant (~18px régulier) |
| 60 | Autres textes de contenu (~24px régulier ou 16px gras) |
| 45 | Grands titres et grands libellés d'interface |
| 30 | Texte d'espace réservé, états désactivés, grandes icônes |
| 15 | Minimum pour les éléments non textuels, comme les séparateurs |
Ces valeurs correspondent à des recommandations simplifiées de « niveau bronze » ; la méthode APCA complète s'appuie sur des tables de correspondance par taille et graisse de police.
Faut-il utiliser APCA dès aujourd'hui ?
WCAG 3 est encore un brouillon de travail, et la forme définitive d'APCA peut évoluer. Les textes réglementaires et les audits d'accessibilité (y compris l'Acte européen sur l'accessibilité, qui renvoie à WCAG 2.1 via la norme EN 301 549) utilisent toujours le ratio WCAG 2. La démarche pratique : respecter WCAG 2 niveau AA pour la conformité, et utiliser APCA comme second avis, notamment pour les thèmes sombres et les textes d'affichage de grande taille. Vérifiez WCAG 2 en détail avec le Vérificateur de contraste.
Aussi recherché comme : contraste apca, wcag 3, contraste lc, contraste perceptuel, accessibilité couleur, contraste texte accessibilité, vérificateur contraste wcag 3, calculateur apca.
Outils complémentaires : Vérificateur de contraste APCA
- Simulateur de daltonisme — Importez une capture d'écran ou une maquette et visualisez-la côte à côte avec huit types de déficience de la vision des couleurs, ou testez une palette pour repérer les couleurs qui deviennent indiscernables.
- Générateur de couleurs Tailwind — Il vous suffit de coller une couleur de marque pour obtenir une palette de nuances équilibrée en 11 étapes (de 50 à 950) intégrée à OKLCH, avec des indications de contraste et des options d'exportation vers Tailwind v3, v4, CSS et SCSS.
- Convertisseur OKLCH — Explorez l’espace de couleur OKLCH, perceptuellement uniforme, grâce à des curseurs en temps réel.
- Convertisseur de couleurs — Collez n'importe quelle couleur CSS — HEX, rgb(), hsl(), hwb(), oklch() ou un nom comme tomato — et obtenez instantanément tous les autres formats, ainsi qu'une palette 50–950 prête à l'emploi.