Vérificateur de contraste
Contrast Checker
Note un couple texte et fond selon WCAG 2 et APCA et propose la couleur conforme la plus proche.
Vérifie un couple texte/fond selon WCAG 2.2 et selon APCA, simule les trois dichromaties, et sait noter une palette entière sous forme de matrice. Il montre les deux normes parce qu’elles se contredisent sur des couples réels, et ce désaccord est la partie utile.
Portez ce vieux whisky au juge blond qui fume.
WCAG 2.2
4,54:1
- CONFORMEAA — 1.4.3 Contraste (minimum), texte normalexige 4,5:1
- NON CONFORMEAAA — 1.4.6 Contraste (amélioré), texte normalexige 7:1
- CONFORME1.4.11 Non textuel — icônes, bordures, anneaux de focusexige 3:1
Compte comme texte normal. Le grand commence à 24px, ou à 18,66px en graisse 700. C’est la norme que la réglementation sur l’accessibilité référence aujourd’hui : EN 301 549 et la Section 508 renvoient toutes deux à WCAG, c’est donc ce chiffre qu’un audit utilisera.
APCA
Lc 71,6
Texte sombre sur fond clair. Le signe, c’est la polarité : contrairement à WCAG, échanger les deux couleurs change la réponse.
Atteint Lc 60 — texte lisible. Lisible en grand, mais pas pour une lecture suivie en 16px.
16px en graisse 400 ne suffit pas à ce Lc.
| Niveau | en 400 | en 700 |
|---|---|---|
| Lc 90 | 14px | 12px |
| Lc 75 | 18px | 14px |
| Lc 60 | 24px | 18px |
| Lc 45 | 36px | 24px |
| Lc 30 | 48px | 36px |
Les deux normes divergent, et c’est voulu
Le rapport de WCAG 2 est une formule de 2008 : un quotient de luminances relatives avec un terme de voile fixe, symétrique en ses deux arguments. APCA modélise la réponse perceptive — il dépend de la polarité, parce qu’à écart de luminance égal, du texte sombre sur fond clair se lit réellement mieux que l’inverse, et il prend la taille et la graisse de la police comme faisant partie de la question, au lieu d’une règle à part greffée après coup.
Ils divergent donc sur des paires réelles, et cette divergence n’est un bug ni chez l’un ni chez l’autre. WCAG 2 fait passer des combinaisons de gris moyen sur blanc réellement difficiles à lire, et recale des sombre-sur-sombre qui vont très bien. C’est WCAG 2.2 que la réglementation sur l’accessibilité référence aujourd’hui, c’est donc celui qu’un audit appliquera. APCA modélise mieux ce que vit la personne qui lit. Servez-vous de WCAG pour passer, et d’APCA pour choisir parmi les options qui passent.
Cette paire en fait partie : WCAG AA dit conforme et APCA dit insuffisant à 16px/400.
Vision des couleurs
Simulé avec les projections de Viénot–Brettel–Mollon, appliquées en lumière linéaire. Les appliquer à des octets encodés en gamma — le raccourci habituel — fait paraître une paire plus distinguable qu’elle ne l’est, ce qui est exactement le sens dans lequel une vérification d’accessibilité ne doit pas se tromper.
Texte d’exemple
Protanopie (pas de cône rouge, ~1 % des hommes) · 4,54:1
Texte d’exemple
Deutéranopie (pas de cône vert, ~1 % des hommes) · 4,54:1
Texte d’exemple
Tritanopie (pas de cône bleu, ~0,01 %) · 4,54:1
Texte d’exemple
Achromatopsie (aucune couleur, ~0,003 %) · 4,54:1
Comment s’en servir
Saisissez les deux couleurs
Couleur du texte et fond, dans n’importe quelle notation. Le paragraphe d’exemple au-dessus des verdicts est dessiné avec elles, à la taille et à la graisse que vous réglez.
Réglez la taille et la graisse réelles
WCAG change de seuil à 24 px, ou 18,66 px en graisse 700. APCA prend la taille et la graisse comme partie de la question plutôt que comme une règle à part. Aucune des deux réponses ne veut dire grand-chose à la mauvaise taille.
Lisez les deux verdicts
WCAG pour passer un audit, APCA pour choisir parmi les options qui passent. Quand elles divergent, la page le dit explicitement.
Vérifiez toute la palette d’un coup
Collez vos couleurs, une par ligne, et obtenez une matrice N×N. Elle est N×N plutôt que triangulaire parce qu’APCA n’est pas symétrique : les deux mêmes couleurs obtiennent des notes différentes selon laquelle est le texte.
Questions fréquentes
Quelle norme dois-je suivre ?
WCAG 2.2, parce que c’est celle que le droit référence — l’EN 301 549 et la Section 508 pointent toutes deux vers elle, c’est donc le chiffre qu’un audit calculera. APCA modélise mieux ce que vit une personne qui lit : servez-vous-en pour choisir parmi les couples qui passent déjà.
Pourquoi WCAG et APCA divergent-elles ?
Le rapport de WCAG 2 est une formule de 2008 : des luminances relatives avec un terme de voile fixe, symétrique en ses arguments. APCA modélise la perception, dépend de la polarité — du sombre sur clair se lit réellement mieux que l’inverse — et tient compte de la taille et de la graisse. WCAG laisse donc passer du gris moyen sur blanc difficile à lire, et recale du sombre sur sombre qui va très bien.
Pourquoi la simulation de la vision des couleurs diffère-t-elle des autres outils ?
Parce qu’elle est appliquée en lumière linéaire. Le raccourci courant consiste à faire la projection sur des octets encodés en gamma, ce qui fait paraître les couples plus distinguables qu’ils ne le sont — la mauvaise direction pour une vérification d’accessibilité.
Un contraste conforme veut-il dire que le texte est lisible ?
Cela veut dire qu’il franchit une barre mesurable. La longueur de ligne, l’interlignage, l’approche, la police elle-même et le fait que le texte se pose ou non sur une photographie comptent tous, et aucun de ces facteurs n’est dans l’un ou l’autre chiffre. Un 4,5:1 conforme dans un caractère maigre de 12 px reste un effort.
À alimenter depuis
Extraire la palette d’une image
Palette Extractor
Tire d’une image une palette du nombre de couleurs voulu et l’exporte en hexadécimal, en variables CSS ou en nuancier ASE.
Couleur moyenne et dominante
Average & Dominant Colour
Rend une seule couleur représentative d’une image — moyenne, médiane ou la plus fréquente — sous forme d’objet couleur réutilisable.
Simulateur de daltonisme
Colour Blindness Simulator
Réaffiche une image telle que la verraient une protanopie, une deutéranopie, une tritanopie ou une vision en niveaux de gris.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.
Ensuite
Ces outils acceptent ce que celui-ci produit : le résultat peut y aller directement.
Simulateur de daltonisme
Colour Blindness Simulator
Réaffiche une image telle que la verraient une protanopie, une deutéranopie, une tritanopie ou une vision en niveaux de gris.
Échelle de teintes et de nuances
Tint & Shade Scale
Produit une échelle de luminosité de 50 à 950 à partir d’une seule couleur, à pas perceptuellement réguliers, prête à servir de jetons de design.
Palette pour le mode sombre
Dark Mode Palette
Construit une rampe de 50 à 950 depuis une couleur et la reflète en version sombre, pour que chaque paire de jetons conserve son contraste.
Générateur de palette
Palette Generator
Construit une palette harmonieuse à partir d’une couleur de base, selon les règles complémentaire, triadique et analogue.
Convertisseur de formats de couleur
Colour Format Converter
Convertit une couleur entre HEX, RGB, HSL, HWB, LAB, LCH et OKLCH et nomme la couleur connue la plus proche.
Sélecteur de couleur
Colour Picker
Choisit une couleur sur un champ OKLCH, à la pipette sur l’écran ou depuis une image, et la copie dans la notation de votre choix.