Un souci avec cet outil ?
À propos de « Color Blindness CSS Reference Online »
Cet outil génère une référence CSS pour concevoir des palettes accessibles aux utilisateurs souffrant de déficiences visuelles des couleurs. Il montre comment les couleurs apparaissent sous différents types de daltonisme (protanopie, deutéranopie, tritanopie, monochromatie) et suggère des alternatives plus sûres.
Environ 8% des hommes et 0,5% des femmes ont une forme de déficience visuelle des couleurs. Ne concevoir que pour la vision normale les exclut ; utiliser des paires de couleurs sûres et ne pas se reposer uniquement sur la couleur (ajouter formes, textes, motifs) rend les designs accessibles à tous.
À utiliser pour tester des palettes de marque, auditer des designs existants, ou apprendre quelles paires de couleurs poser problème pour les éviter à l'avenir.
Comment utiliser cet outil
Obtenir un snippet CSS de filtres pour simuler la daltonie
Exécuter sans entrée
L’outil n’a pas de champ de saisie — appuyez simplement sur Run. Il renvoie un snippet CSS prêt à coller dans votre feuille de style (aucune configuration).
Ce que vous obtenez
Résultat : champ unique `css` avec trois classes : `.cb-protanopia`, `.cb-deuteranopia`, `.cb-tritanopia`. Chacune utilise une matrice SVG `feColorMatrix` qui approxime un type de déficience visuelle des couleurs.
Comment l’utiliser
Ajoutez la classe pertinente à `body` (ou un wrapper) pour prévisualiser votre design comme le voient environ 8 % des hommes avec daltonisme rouge-vert, ou une part bien plus faible avec bleu-jaune. Bascule depuis les devtools — pas de rebuild.
Mises en garde
Approximations linéaires ; la vision réelle est plus nuancée. Sim Daltonism (macOS) ou Coblis utilisent de meilleurs modèles. Combinez toujours avec un contrôle de contraste WCAG (wcag-contrast-checker-online) — la couleur seule ne doit jamais porter l’information.