Grille de contraste

Placez votre palette entière dans un tableau d’audit N×N — ratios WCAG et Lc APCA pour chaque premier plan × arrière-plan, à consulter en un coup d’œil.

Chaque cellule affiche le ratio WCAG et l'APCA Lc


Ag1.0Lc0	Ag4.2Lc+35	Ag3.8Lc+31	Ag5.2Lc+42	Ag8.4Lc+62	Ag1.2Lc0	Ag17.4Lc+104
Ag4.2Lc-33	Ag1.0Lc0	Ag1.1Lc0	Ag1.3Lc0	Ag2.0Lc+25	Ag5.0Lc-34	Ag4.2Lc+67
Ag3.8Lc-29	Ag1.1Lc0	Ag1.0Lc0	Ag1.4Lc+10	Ag2.2Lc+30	Ag4.6Lc-30	Ag4.6Lc+72
Ag5.2Lc-40	Ag1.3Lc0	Ag1.4Lc-11	Ag1.0Lc0	Ag1.6Lc+18	Ag6.3Lc-41	Ag3.3Lc+60
Ag8.4Lc-61	Ag2.0Lc-27	Ag2.2Lc-32	Ag1.6Lc-20	Ag1.0Lc0	Ag10.2Lc-62	Ag2.1Lc+40

Réussite WCAG AA corps AA grand texte uniquement Échec

Lignes = couleur de texte (premier plan), colonnes = arrière-plan. Chaque cellule affiche la paire premier plan/arrière-plan réelle avec deux métriques d'accessibilité : ratio WCAG (AA corps ≥ 4,5, AA grand ≥ 3,0) et APCA Lc (75+ pour le texte corporel, 60+ pour le grand texte).

Comment auditer une palette entière - ajouter, lire, décider.

Toutes les couleurs candidates dans une matrice N×N - accessibilité pour chaque premier plan × arrière-plan à la fois.

01
Ajouter des couleurs
Importez les couleurs de marque, les couleurs sémantiques et les neutres (jusqu'à 10). Les lignes sont les premiers plans, les colonnes sont les arrière-plans.
02
Lire le tableau
Chaque cellule affiche le ratio WCAG et le Lc APCA. Les points s'illuminent : le texte corporel nécessite un Lc ≥75, le texte grand ≥60.
03
Décider
Enregistrez les paires de boutons et les paires de corps dans votre spécification de design ; éliminez les combinaisons non conformes avant leur mise en ligne.

FAQ de la grille de contraste

Trois questions fréquentes lors d'audits de matrice complète.

Pourquoi ne pas vérifier les paires une par une dans l'outil de contraste ?: 5 couleurs forment 30 paires orientées - des vérifications individuelles peuvent entraîner des oublis. La grille affiche tout simultanément et révèle les relations miroirs.
WCAG ou APCA - lequel prendre en compte ?: WCAG 2.1 est la référence réglementaire actuelle ; APCA est le candidat WCAG 3 et interprète plus précisément le texte en mode sombre et à faible contraste. Respectez WCAG, jugez avec APCA.
Pourquoi les colonnes noir et blanc sont-elles toujours présentes ?: Le texte noir ou blanc est la solution de repli universelle - la performance d'une couleur face aux deux constitue la base de définition des couleurs sémantiques.

Après l'audit

Intégrez les paires conformes dans votre palette et spécification sémantiques.

Vérificateur de contraste

Validation du contraste selon WCAG 2.1 entre n'importe quelle couleur de premier plan et de fond.

Simulateur de daltonisme

Simulez 8 types de déficiences de la vision des couleurs pour auditer l'accessibilité.

Palettes scientifiques adaptées aux daltoniens

Les standards de référence de la publication académique : Okabe-Ito (recommandé par Nature Methods), la série Paul Tol, la palette de la revue Nature NPG et Viridis, uniforme en perception. Chaque échantillon est accompagné d'une note de contraste APCA, et un simulateur de vision des couleurs en 8 types permet de vérifier chaque palette en direct.

Palette UI sémantique

Saisissez une couleur de marque, obtenez primaire / secondaire / succès / avertissement / danger — exporté en configuration Tailwind et variables CSS.

fg ↓ / bg →

Ag1.0Lc0

Ag4.2Lc+35

Ag3.8Lc+31

Ag5.2Lc+42

Ag8.4Lc+62

Ag1.2Lc0

Ag17.4Lc+104

Ag4.2Lc-33

Ag1.0Lc0

Ag1.1Lc0

Ag1.3Lc0

Ag2.0Lc+25

Ag5.0Lc-34

Ag4.2Lc+67

Ag3.8Lc-29

Ag1.1Lc0

Ag1.0Lc0

Ag1.4Lc+10

Ag2.2Lc+30

Ag4.6Lc-30

Ag4.6Lc+72

Ag5.2Lc-40

Ag1.3Lc0

Ag1.4Lc-11

Ag1.0Lc0

Ag1.6Lc+18

Ag6.3Lc-41

Ag3.3Lc+60

Ag8.4Lc-61

Ag2.0Lc-27

Ag2.2Lc-32

Ag1.6Lc-20

Ag1.0Lc0

Ag10.2Lc-62

Ag2.1Lc+40

Comment auditer une palette entière - ajouter, lire, décider.

Toutes les couleurs candidates dans une matrice N×N - accessibilité pour chaque premier plan × arrière-plan à la fois.

Ajouter des couleurs

Importez les couleurs de marque, les couleurs sémantiques et les neutres (jusqu'à 10). Les lignes sont les premiers plans, les colonnes sont les arrière-plans.

Lire le tableau

Chaque cellule affiche le ratio WCAG et le Lc APCA. Les points s'illuminent : le texte corporel nécessite un Lc ≥75, le texte grand ≥60.

Décider

Enregistrez les paires de boutons et les paires de corps dans votre spécification de design ; éliminez les combinaisons non conformes avant leur mise en ligne.

FAQ de la grille de contraste

Trois questions fréquentes lors d'audits de matrice complète.

Pourquoi ne pas vérifier les paires une par une dans l'outil de contraste ?

5 couleurs forment 30 paires orientées - des vérifications individuelles peuvent entraîner des oublis. La grille affiche tout simultanément et révèle les relations miroirs.

WCAG ou APCA - lequel prendre en compte ?

WCAG 2.1 est la référence réglementaire actuelle ; APCA est le candidat WCAG 3 et interprète plus précisément le texte en mode sombre et à faible contraste. Respectez WCAG, jugez avec APCA.

Pourquoi les colonnes noir et blanc sont-elles toujours présentes ?

Le texte noir ou blanc est la solution de repli universelle - la performance d'une couleur face aux deux constitue la base de définition des couleurs sémantiques.