Simulateur de daltonisme : découvre comment tes couleurs sont perçues
Avec ce simulateur de daltonisme gratuit, découvre comment ta palette de couleurs et tes images sont perçues en cas de protanopie (absence de perception du rouge), de deutéranopie (absence de perception du vert), de deutéranomalie (déficience du vert), de tritanopie (absence de perception du bleu) ou d’achromatopsie. Les cinq variantes sont affichées côte à côte. Sans inscription : les couleurs et les images sont traitées uniquement dans ton navigateur et ne sont jamais envoyées à un serveur.
Créé par Justin Schuessler
Ton design a été vérifié pour son accessibilité ? Mets ton site en ligne avec un hébergement web rapide et fiable.
Modifier la couleur
Calculé immédiatement pour toutes les variantes simulées ci-dessous. Choisis une couleur de ta palette ci-dessous pour la modifier ici.
Ta palette de couleurs
Clique sur une couleur pour la modifier en haut du sélecteur. Utilise le plus pour ajouter des couleurs et voir toute ta palette dans chaque variante simulée.
Aperçu simulé
Tu souhaites aussi vérifier que ta palette présente un contraste suffisant ? Vérifie aussi le contraste de la palette que tu viens de simuler.
Continuer avec la couleur sélectionnée : Ouvrir dans le sélecteur de couleurs · Créer une palette de couleurs
Tout se passe dans ton navigateur : rien n’est envoyé à un serveur, stocké ou journalisé.
Fonctionnalités
Simuler le daltonisme en ligne : vérifier couleurs et images
En plus de tes images, tu peux vérifier ici toute une palette à l’aide de valeurs hexadécimales ou RVB : pratique pour le webdesign, les couleurs de marque et les graphiques.
Cinq formes de daltonisme côte à côte
À côté de l’original, le simulateur affiche simultanément chaque couleur en cas de protanopie, de deutéranopie, de tritanopie, d’achromatopsie et de deutéranomalie. Tu vois ainsi immédiatement si deux couleurs se confondent.
Vérifier toute une palette de couleurs à la fois
Le bouton Plus te permet d’ajouter autant de couleurs que tu veux, par exemple toute la palette de ta marque. La valeur hexadécimale figure sous chaque couleur, et chaque variante simulée affiche la palette entière.
Échantillon, valeur hexadécimale ou RVB
Choisis une couleur dans le sélecteur avec le curseur de teinte, saisis une valeur hexadécimale ou RVB, ou génère une nouvelle couleur avec « Couleur aléatoire ».
Simuler tes propres images
Tu peux aussi importer un fichier PNG ou JPG jusqu’à 15 MB, par exemple une capture d’écran, un logo ou un graphique. Les grandes images sont réduites à 1.600 px sur leur côté le plus long pour l’aperçu. Clique sur un aperçu pour l’agrandir.
Modèle de simulation scientifique
La simulation repose sur le modèle de Machado, Oliveira & Fernandes (2009) et effectue les calculs dans l’espace colorimétrique RVB linéaire. Les échantillons de couleur et les pixels des images sont soumis au même calcul.
Tout reste dans ton navigateur
Les couleurs et les images sont traitées directement dans ton navigateur. Rien n’est envoyé à un serveur, stocké ou journalisé, et tu n’as pas besoin de compte.
Types de daltonisme
Comment les personnes daltoniennes voient-elles les couleurs ? Les cinq formes simulées
La plupart des personnes daltoniennes perçoivent les couleurs, mais confondent certaines teintes. Lesquelles dépendent du type de déficience de la vision des couleurs.
| Forme | Comment les couleurs sont perçues | Simulation dans l’outil |
|---|---|---|
| Protanopie (absence de perception du rouge) | Le rouge et le vert sont difficiles à distinguer. Les teintes rouges paraissent plus sombres et tirent vers l’olive, le brun et le jaune. | Forme complète (degré de sévérité 1,0) |
| Deutéranopie (absence de perception du vert) | Le rouge et le vert sont confondus et apparaissent sous des nuances semblables de jaune, de brun et d’olive. | Forme complète (degré de sévérité 1,0) |
| Tritanopie (absence de perception du bleu) | Le bleu et le vert, ainsi que le jaune et le violet, sont difficiles à distinguer. Le jaune paraît rose pâle à gris clair. Le rouge et le vert restent en revanche faciles à reconnaître. | Forme complète (degré de sévérité 1,0) |
| Achromatopsie (daltonisme total) | Pratiquement aucune couleur n’est perçue, seules les différences de luminosité restent visibles, comme sur une image en niveaux de gris. | Luminance relative (niveaux de gris) |
| Deutéranomalie (déficience du vert) | Forme atténuée de la deutéranopie et trouble de la vision des couleurs le plus fréquent : les teintes rouges et vertes deviennent plus difficiles à distinguer. | Forme atténuée (degré de sévérité 0,6) |
Essaie toi-même : saisis #FF0000 dans le simulateur, ajoute une deuxième couleur avec le bouton Plus et définis-la sur #00FF00. Dans les cartes Protanopie et Deutéranopie, tu verras aussitôt que les deux couleurs deviennent des nuances de jaune et d’olive, qui ne se distinguent presque plus que par leur luminosité.
Comment ça fonctionne
Simuler le daltonisme en 6 étapes
De la première couleur à la comparaison des cinq variantes, avec ta palette et, si tu le souhaites, ta propre image.
Étape 1
Choisir une couleur
Dans la section « Modifier la couleur », choisis une couleur dans le sélecteur avec le curseur de teinte, saisis une valeur hexadécimale ou RVB, ou clique sur « Couleur aléatoire ».
Étape 2
Créer une palette de couleurs
Ajoute des couleurs avec le bouton Plus sous « Ta palette de couleurs ». Clique sur une couleur pour la charger dans le sélecteur et la modifier, ou sur l’icône de corbeille pour la supprimer.
Étape 3
Importer une image (facultatif)
Glisse un fichier PNG ou JPG de 15 Mo maximum dans la zone « Importer ta propre image » ou clique dessus pour choisir un fichier. L’image reste dans ton navigateur.
Étape 4
Comparer les variantes
Sous « Aperçu simulé », compare l’original aux variantes protanopie, deutéranopie, tritanopie, achromatopsie et deutéranomalie, et repère les couleurs qui deviennent trop semblables.
Étape 5
Agrandir l’image
Clique sur un aperçu pour l’agrandir et examiner les détails.
Étape 6
Continuer avec cette couleur
Utilise les liens sous l’aperçu pour ouvrir la couleur sélectionnée dans le Color Picker ou le générateur de palettes, ou pour vérifier son contraste dans le Contrast Checker.
Couleurs accessibles
Pourquoi tenir compte des troubles de la vision des couleurs dans le design ?
Les déficiences de la vision du rouge et du vert touchent environ 8 % des hommes et 0,5 % des femmes (principalement d’ascendance européenne), soit, selon les estimations, quelque 300 millions de personnes dans le monde. Transmettre une information importante uniquement par la couleur, par exemple en utilisant le rouge pour « Erreur » et le vert pour « Succès » sans symbole ni texte supplémentaire, exclut involontairement une part non négligeable de ses utilisateurs.
Les WCAG exigent donc de ne jamais utiliser la couleur comme seul moyen de distinction (critère de succès 1.4.1). Associe les couleurs à des icônes, des motifs ou des libellés, puis vérifie dans le simulateur si certaines couleurs de ta palette deviennent trop semblables en cas de déficience de la vision des couleurs. Tu peux ensuite vérifier le contraste entre le texte et l’arrière-plan dans le Contrast Checker. Accéder au Contrast Checker
Découvrir plus
Autres outils de couleur
Vérifie le contraste, ajuste les couleurs, génère une palette ou extrais les couleurs d’une image, gratuitement et directement dans ton navigateur.
Vérificateur de contraste
Calcule en direct le rapport de contraste WCAG entre deux couleurs et vérifie les critères AA/AAA ainsi que les composants d’interface, entièrement dans le navigateur.
Créé par Justin Schuessler
Sélecteur de couleurs
Convertis les couleurs en temps réel entre HEX, RGB, HSL, HSV et CMYK, trouve la couleur CSS nommée la plus proche et vérifie le contraste WCAG avec le noir et le blanc, le tout dans ton navigateur.
Créé par Justin Schuessler
Générateur de palettes de couleurs
Génère en direct des palettes complémentaires, analogues, triadiques et autres à partir d’une couleur de base : rien n’est enregistré ni transmis.
Créé par Justin Schuessler
Sélecteur de couleurs à partir d’une image
Relève le code couleur d’une image : pipette avec loupe, HEX, RGB et HSL, palette de l’image et indication de contraste. L’image reste dans le navigateur.
Créé par Dimitri Heissler
FAQ
Questions fréquentes sur le simulateur de daltonisme
Des réponses courtes sur les déficiences de la vision des couleurs, les couleurs accessibles et cet outil.
La plupart des personnes daltoniennes perçoivent les couleurs, mais confondent certaines teintes. En cas de protanopie et de deutéranopie, le rouge et le vert deviennent des nuances semblables de jaune, de brun et d’olive. En cas de tritanopie, le bleu et le vert, ainsi que le jaune et le violet, sont difficiles à distinguer. Ce n’est qu’en cas d’achromatopsie que les couleurs disparaissent totalement : seules les différences de luminosité restent visibles, comme sur une image en niveaux de gris. Le simulateur te permet de le voir directement avec tes propres couleurs.
Cinq formes à côté de l’original : protanopie (absence de perception du rouge), deutéranopie (absence de perception du vert), deutéranomalie (déficience du vert), tritanopie (absence de perception du bleu) et achromatopsie (daltonisme total). Les cinq sont affichées simultanément côte à côte, pour chaque couleur de ta palette et pour toute image importée.
Les déficiences de la vision du rouge et du vert sont les plus fréquentes, notamment la deutéranomalie, une déficience partielle de la perception du vert. Elles touchent environ 8 % des hommes et 0,5 % des femmes (chiffres concernant les personnes d’ascendance européenne), soit quelque 300 millions de personnes dans le monde. Les femmes peuvent donc aussi être daltoniennes, mais bien plus rarement.
Non. Le simulateur montre comment les personnes présentant une déficience de la vision des couleurs perçoivent les couleurs. Ce n’est ni un test de la vue ni un outil de diagnostic. Si tu veux faire vérifier ta vision des couleurs, consulte un ophtalmologue ou un opticien, qui pourra par exemple utiliser les planches d’Ishihara.
Le simulateur de daltonisme est gratuit et utilisable sans inscription. Les images ne sont pas envoyées : l’outil lit le fichier directement dans ton navigateur et calcule les variantes avec Canvas, sans transfert vers un serveur, sans stockage ni journalisation. Les fichiers PNG et JPG jusqu’à 15 MB sont acceptés. Pour l’aperçu, l’image est réduite à 1.600 px au maximum sur son côté le plus long. Quand tu fermes l’onglet, l’image disparaît.
Oui. Le bouton Plus te permet d’ajouter autant de couleurs que tu veux et de les voir toutes à la fois dans chacune des cinq variantes simulées. Clique sur une couleur pour la charger dans le sélecteur et la modifier, ou sur l’icône de corbeille pour la supprimer. Tu peux ainsi voir si deux couleurs de ta palette, par exemple celles de ta marque, deviennent trop semblables en cas de déficience de la vision des couleurs.
La simulation repose sur le modèle physiologique de Machado, Oliveira & Fernandes (2009) et sur les matrices publiées avec celui-ci. Les calculs sont effectués dans l’espace colorimétrique RVB linéaire après conversion depuis sRGB. La protanopie, la deutéranopie et la tritanopie sont simulées sous leur forme complète (degré de sévérité 1,0), la deutéranomalie avec un degré de sévérité de 0,6 et l’achromatopsie sous forme de luminance relative. La sévérité d’une déficience de la vision des couleurs varie d’une personne à l’autre : la simulation montre donc une perception typique.
Le rouge et le vert sont particulièrement problématiques, tout comme le vert et le brun ou le bleu et le violet, lorsqu’ils constituent le seul moyen de distinction. Plutôt que de supprimer les couleurs, ajoute du texte, des icônes ou des motifs et vérifie ta palette dans le simulateur. Si deux couleurs deviennent presque identiques dans une variante, ajuste leur luminosité ou leur teinte. Tu peux ensuite vérifier le contraste entre le texte et l’arrière-plan dans le Contrast Checker.
D’autres questions ?
Contacter le supportTon projet frontend a besoin d’un serveur fiable en arrière-plan
Un VPS ZAP-Hosting met ton application ou ton projet en ligne de manière fiable.
Sans configuration. Sans risque. En ligne en quelques secondes.
Tu cherches d’autres outils ? Voir tous les outils d’image et de design
