Guide
Le cours « Couleur et contraste » est un tutoriel interactif en 17 niveaux qui apprend à lire toutes les écritures de couleur rencontrées dans une maquette ou en CSS, puis à trancher la question « ces deux couleurs peuvent-elles se lire ensemble ? » avec un critère mesurable. Chaque niveau donne un à trois sélecteurs de couleur et un objectif concret — amener la luminosité à une valeur donnée, faire dépasser 4,5:1 au contraste, trouver trois teintes espacées de 120°, rendre distinguable une paire que les daltoniens confondent. Vous tirez un curseur ou saisissez une valeur : lectures numériques, badge de contraste, roue chromatique et tableau de simulation se mettent à jour en direct, et le validateur dit ce qui cloche.
Mis à jour le 2026-09-094 sources15 min read
Le cours « Couleur et contraste » est un tutoriel interactif en 17 niveaux qui apprend à lire toutes les écritures de couleur rencontrées dans une maquette ou en CSS, puis à trancher la question « ces deux couleurs peuvent-elles se lire ensemble ? » avec un critère mesurable. Chaque niveau donne un à trois sélecteurs de couleur et un objectif concret — amener la luminosité à une valeur donnée, faire dépasser 4,5:1 au contraste, trouver trois teintes espacées de 120°, rendre distinguable une paire que les daltoniens confondent. Vous tirez un curseur ou saisissez une valeur : lectures numériques, badge de contraste, roue chromatique et tableau de simulation se mettent à jour en direct, et le validateur dit ce qui cloche.
Le cours se divise en quatre parties : modèles de couleur (ce que contrôlent les composantes RGB, HEX, HSL, HSV et OKLCH, et pourquoi la « luminosité » HSL n'est pas celle que perçoit l'œil) ; contraste et WCAG (la formule de luminance relative et ce que gèrent les trois seuils 4,5:1 / 3:1 / 7:1) ; harmonies (complémentaire, triadique, analogue) ; accessibilité et pratique (le monde vu par un daltonien rouge-vert, comment choisir une palette sûre, extraire les couleurs dominantes d'un logo). Le dernier niveau demande de synthétiser tout cela : livrer trois couleurs qui passent tous les contrôles.
Comptez environ 45 minutes. Pour les développeurs front-end, les designers et quiconque choisit des couleurs pour des diapositives, des graphiques ou des affiches ; aucune base artistique n'est requise.
#RRGGBB / rgb() / hsl().?lesson=n.Le cours proprement dit est au-dessus de cette page : sélectionnez un niveau à gauche, tirez un curseur ou saisissez une valeur, le verdict s'affiche en direct.
Le niveau 8, « WCAG AA : au moins 4,5:1 pour le texte courant », fixe un fond blanc et demande d'amener la couleur du texte à un contraste ≥ 4,5 sans employer un noir pur. Voici une trace d'essai :
Fond (fixe) #FFFFFF Luminance relative L = 1.000
Essai 1 #3B82F6 L = 0.228 Contraste = 1.05 / 0.278 = 3.68:1
Verdict ✓ AA grands caractères (≥ 3) ✕ AA texte courant (≥ 4.5)
Essai 2 #2563EB L = 0.153 Contraste = 1.05 / 0.203 = 5.17:1
Verdict ✓ AA grands caractères ✓ AA texte courant ✕ AAA texte courant (≥ 7) → réussiLe niveau 15, « sûre pour daltoniens », prend l'orange #E76F51 comme référence et un vert #8AB17D comme second : en vision normale, ΔE ≈ 0.20, distinguables au premier coup d'œil ; en simulation de deutéranopie, ΔE tombe à 0.056 et les deux se confondent presque. Remplacez le second par un bleu de luminosité moyenne (par exemple #2563EB) : en simulation, ΔE repasse au-dessus de 0.15, et les deux couleurs gardent un contraste ≥ 3:1 sur fond blanc — niveau réussi.
Chaque pixel de l'écran est composé de trois sous-pixels rouge, vert, bleu : rgb(37 99 235) donne l'intensité de chacune des trois lumières, 0 éteint, 255 au maximum. Les trois à 0 donnent le noir, les trois à 255 le blanc, et trois valeurs égales un gris. HEX est l'abréviation hexadécimale du même trio : dans #2563EB, 25 = 37, 63 = 99, EB = 235, un canal par paire ; la forme à trois chiffres comme #FFF répète chaque chiffre. Cet espace s'appelle sRGB, c'est l'espace par défaut du web et de la quasi-totalité des écrans ; entre les valeurs et l'intensité lumineuse physique s'interpose une courbe gamma, dont on se servira pour le contraste.
RGB est commode pour la machine, pas pour l'humain : pour « éclaircir » un bleu, il faut toucher trois canaux à la fois. HSL change de coordonnées : la teinte H est un angle sur la roue (0° rouge, 120° vert, 240° bleu, 360° retour au rouge), la saturation S dit à quel point la couleur est « pure » (0 % gris, 100 % la plus vive), la luminosité L dit à quel point elle est claire (0 % noir, 50 % couleur pure, 100 % blanc). Éclaircir, c'est monter L ; faire un pastel, c'est baisser S et monter L — le niveau 4 vous fait en régler un. En CSS, hsl(221 83% 53%) est exactement la même couleur que #2563EB.
Le V de HSV (aussi appelé HSB) est « le maximum des trois canaux » : à V = 100 %, la couleur est la plus vive ou la plus claire, et amener S à 0 donne du blanc, non du gris. En HSL, L = 100 % est toujours blanc. Les sélecteurs des logiciels de design utilisent surtout HSV (un carré plus une barre de teinte), le CSS ne connaît que HSL ; les deux se convertissent sans perte, mais les composantes n'ont pas le même sens : ne recopiez pas les nombres HSV dans hsl().
hsl(60 100% 50%) est un jaune pur, hsl(240 100% 50%) un bleu pur, tous deux à L = 50 %, mais le jaune paraît nettement plus clair. Car HSL n'est qu'un réarrangement géométrique des valeurs RGB, sans rapport avec la perception. OKLab / OKLCH (Ottosson, 2020) est ajusté sur des données d'expériences visuelles : à L égal, la clarté perçue est la même, et les variations de C (chroma) et h (teinte) sont plus régulières. CSS Color 4 a intégré oklch() à la norme et les navigateurs principaux le prennent en charge. Le niveau 6 demande de viser, en se fiant aux seules lectures OKLCH, une clarté L entre 0,68 et 0,72 dans la zone orange — et l'on constate que le L de HSL ne correspond pas. Pour des dégradés, des échelles d'une même teinte ou garder « la même clarté » d'une teinte à l'autre, OKLCH est bien plus stable.
Le contraste défini par WCAG n'est pas la différence de deux nombres, mais un rapport de luminances relatives :
avec , le 0.05 simulant la réflexion de l'éclairage ambiant. La luminance relative s'obtient à partir des trois canaux sRGB par décodage gamma puis pondération :
Le vert pèse le plus lourd (0,7152), ce qui explique qu'un vert de même valeur numérique paraisse bien plus clair qu'un bleu ; le contraste noir-blanc plafonne à 21:1. Le niveau 7 vous fait faire le calcul à la main une fois, ensuite chaque niveau s'en charge.
La règle 1.4.3 de WCAG 2.2 (niveau AA) impose un contraste ≥ 4,5:1 au texte courant et ≥ 3:1 aux grands caractères (environ 24 px en normal ou 18,5 px en gras) ; la 1.4.11 impose ≥ 3:1 aux « contenus non textuels » : icônes, bordures, éléments de graphique ; la 1.4.6 (niveau AAA) porte le texte courant à ≥ 7:1. Ce ne sont pas des préférences esthétiques, mais des seuils empiriques qui laissent lire les malvoyants modérés — et la base légale de nombreuses réglementations nationales.
Le niveau 9 exige justement « dépasser 7:1 sans noir pur » : #000 sur #FFF à 21:1 ne pose aucun problème, mais de grandes surfaces de noir/blanc pur éblouissent ; en design, on prend des gris profonds comme #1A1A1A ou #24292F, qui passent 7:1 sans peine. À l'inverse, un texte de remplacement gris clair #9CA3AF sur blanc ne donne que 2,5:1 — beaucoup de sites y sont non conformes.
La base de la théorie des harmonies, ce sont les relations d'angle entre teintes :
La roue du cours marque ces trois positions pour la couleur courante ; le verdict ne regarde que l'écart angulaire de teinte (une petite tolérance est admise), la saturation et la luminosité restant libres — dans une vraie palette, elles comptent souvent plus que la teinte.
Environ 8 % des hommes et 0,5 % des femmes ont une déficience de la vision des couleurs ; la plus fréquente est le daltonisme rouge-vert (protanopie : rouge manquant ; deutéranopie : vert manquant), la tritanopie (bleu-jaune) est rare, l'achromatopsie exceptionnelle. Le cours simule avec le modèle physiologique de Machado et al. (2009) : la couleur est projetée sur la réponse des cônes du sujet, puis ramenée en sRGB. Une distance euclidienne ΔE dans l'espace OKLab quantifie l'écart entre deux couleurs : en deçà d'environ 0,02 elles sont quasiment confondues, à partir de 0,15 elles se distinguent au premier regard.
Le niveau 14 demande de trouver, parmi trois paires, la plus difficile à séparer pour un deutéranope : orange #E76F51 contre vert #8AB17D, dont le ΔE ne vaut plus que 0.056 en simulation, tandis que rouge/cyan et bleu foncé/jaune restent nets grâce à un fort écart de clarté ; le niveau 15 demande de réparer la paire. Deux leviers : écarter les clartés (la déficience supprime surtout la teinte, les écarts de clarté restent toujours visibles) ou changer de teinte (rouge/vert devient bleu/orange). Sur un graphique, ajoutez si possible des formes, des textures ou des valeurs écrites : ne transmettez pas l'information par la seule couleur — c'est l'exigence WCAG 1.4.1.
L'approche naïve de l'extraction des couleurs dominantes est statistique : on quantifie chaque canal RGB en 16 niveaux (4 096 cases), on compte, on trie, on prend la moyenne des premières cases. Le cours dessine un logo d'exemple sur un canvas, sort une palette triée par proportion, et l'on peut cliquer une pastille ou prélever directement sur l'image. Les vrais outils (Vibrant.js, les couleurs dynamiques de Material You) ajoutent un clustering, écartent les quasi-blancs et quasi-noirs, pondèrent par la saturation, mais le principe reste le même.
Le dernier niveau synthétise tout : livrer trois couleurs dont chacune garde un contraste ≥ 4,5:1 sur fond blanc (utilisables en texte courant ou en bouton), deux à deux écartées d'au moins 60° de teinte (distinguables), et dont les clartés OKLCH restent si possible proches (cohérence). Dans un vrai projet, la décision de palette se joue à peu près à l'intersection de ces trois contraintes : lisible, distinguable, cohérente.
#F00 et vert pur #0F0 ont des teintes à 120° d'écart, mais un contraste de seulement 2,9:1 — et sont presque indistinguables pour un daltonien rouge-vert.Saisissez les couleurs du texte et du fond de la maquette dans le sélecteur du niveau 8 : vous savez aussitôt si AA passe. Texte de remplacement, états désactivés et mentions secondaires sont les positions les plus souvent non conformes.
Le tableau de simulation des niveaux 14–15 vérifie directement qu'une palette catégorielle reste découpable pour un daltonien rouge-vert ; sinon, changez de teinte ou creusez l'écart de clarté, puis ajoutez formes et étiquettes.
Extrayez la couleur dominante du logo (idée du niveau 16), trouvez les accents par les relations de la roue (niveaux 11–13), puis choisissez la couleur du texte avec les niveaux de contraste : le niveau 17 est la répétition générale de ce processus.
Face à oklch(0.7 0.15 250), plus d'inconnu : les trois nombres sont clarté perçue, chroma et teinte, et l'on sait pourquoi les dégradés sont plus doux qu'en HSL.
Le contraste dépend de la luminance relative : un bleu, un violet ou un rouge saturés paraissent « sombres » alors que leur luminosité peut être élevée, et le rapport au blanc subit le terme +0.05. Regardez la valeur de contraste dans « Valeurs » et baissez progressivement le L HSL jusqu'à passer le seuil.
Non. Tous les niveaux jugent sur des plages numériques (seuil de contraste, écart de teinte, seuil ΔE) : toute couleur qui remplit la condition valide le niveau.
Les sélecteurs de Figma et Sketch restent surtout en HSB, mais le CSS accepte directement oklch() ; le panneau « Valeurs » du cours donne les cinq écritures, il suffit de copier la ligne voulue.
Machado 2009 est l'un des modèles utilisés dans la recherche et par les outils courants (Chrome DevTools, Color Oracle) ; l'approximation est fiable pour une déficience complète. Les différences individuelles et les déficiences partielles ne tiennent pas dans une seule matrice.
Non, elle ne vit que dans le localStorage du navigateur courant ; le lien « Partager ce niveau » permet de reprendre au même niveau ailleurs, mais l'historique des niveaux validés ne suit pas.
Le cours tourne entièrement en local dans le navigateur : conversion des couleurs, contraste, simulation de daltonisme et statistique de pixels sont des calculs purs dans la page, sans requête vers un serveur ; le logo d'exemple est dessiné sur place dans un canvas, sans image externe ; la progression est conservée dans le localStorage de la machine.
hsl() et oklch() et conversions entre espaces : https://www.w3.org/TR/css-color-4/(consulté le 2026-09-09)Mis à jour le 2026-09-09
17 niveaux : signification de RGB/HEX/HSL/HSV/OKLCH, contraste WCAG, palettes complémentaire, triadique et analogue, simulation de daltonisme et extraction de couleur de marque, avec verdict en direct
Cet outil n’est pas entièrement traduit ; certains contenus utilisent la langue source ou une langue de repli.
ObjectifFaites glisser les curseurs R, V et B pour obtenir un #FF8000 orange (R=255, V=128, B=0).
Les écrans mélangent la lumière rouge, verte et bleue (additif) : les trois allumées sont blanches, toutes les éteintes sont noires. Chaque canal fonctionne de 0 à 255, ce qui donne 256³ ≈ 16,7 millions de couleurs. #FF8000 signifie rouge complet, vert à moitié, bleu éteint – orange. Le jugement utilise la distance perceptuelle ΔE (OKLab), vous n'avez donc pas besoin de saisir exactement chaque chiffre ; indiscernable à l’œil nu compte comme une réussite.