Flowfiles← Tous les outils

Testeur de Contraste WCAG

WCAG 2.2 AA · AAA · Texte normal · Grand texte · Composants UI · APCA indicatif — 100% local

Entrez une couleur de texte et une couleur de fond pour calculer instantanément le ratio de contraste WCAG. L'outil indique les niveaux AA et AAA pour le texte normal, le grand texte et les composants d'interface. Tout s'exécute dans votre navigateur.

Texte normal — Portez ce vieux whisky au juge blond qui fume. (16px)

Grand titre — La lisibilité compte. (24px gras)

← Exemple de composant
— : 1
AA≥ 4.5 : 1
Texte normal
AA≥ 3 : 1
Grand texte (18pt / 14pt gras)
AA≥ 3 : 1
Composants UI et graphiques
AAA≥ 7 : 1
Texte normal renforcé
AAA≥ 4.5 : 1
Grand texte renforcé
APCA indicatif (non normatif WCAG 2.2)Lc élevé = contraste perceptuel plus lisible

Exigences de contraste WCAG 2.2

WCAG 2.2 définit les seuils de contraste dans les critères 1.4.3 (contraste minimum), 1.4.6 (contraste renforcé) et 1.4.11 (contraste non textuel). En France, ces exigences sont aussi utiles pour préparer des audits RGAA.

CritèreNiveauRatio minimalUsage
1.4.3AA4.5 : 1Texte normal
1.4.3AA3 : 1Grand texte
1.4.11AA3 : 1Boutons, icônes, champs, indicateurs de focus
1.4.6AAA7 : 1Texte normal
1.4.6AAA4.5 : 1Grand texte

Fonctionnalités

Questions fréquentes

Quel ratio faut-il pour WCAG AA ?

4,5:1 pour le texte normal et 3:1 pour le grand texte. Les composants d'interface visibles, comme les bordures de champs ou les icônes, demandent aussi 3:1.

Quelle différence entre AA et AAA ?

AA est le niveau généralement visé pour la conformité. AAA est plus strict : 7:1 pour le texte normal et 4,5:1 pour le grand texte.

L'APCA remplace-t-il WCAG 2.2 ?

Non. L'APCA est présenté ici comme indicateur perceptuel complémentaire. Pour une conformité WCAG 2.2 ou RGAA, utilisez les ratios WCAG normatifs.

Pages associées