Color Blindness Simulator

Om det här verktyget

Färgblindhetsimulatorn tillämpar CSS-färgmatrisfilter på exempelfärger för att visa hur designer ser ut för personer med olika typer av färgsynsnedsättning.

Använd det här verktyget när du designar UI-komponenter, diagram, kartor eller visuellt innehåll som förlitar sig på färg för att förmedla information.

Typer av färgblindhet

• Normal syn: Normal syn: full färguppfattning
• Protanopi (röd-blind): Protanopi: röda tappar saknas (~1% av män)
• Deuteranopi (grön-blind): Deuteranopi: gröna tappar saknas (vanligast, ~1% av män)
• Tritanopi (blå-blind): Tritanopi: blå tappar saknas (sällsynt, ~0,003%)
• Akromatopsi (ingen färg): Akromatopsi: ingen färguppfattning, bara gråskala (mycket sällsynt)
• Akromatopsim partiell (minskad färg): Akromatopsim partiell: minskad färgkänslighet i flera tappärtyper

Hur man använder

1. Välj en simuleringstyp från rullgardinsmenyn.
2. Observera hur färgproverna och spektrumet förändras med det valda filtret.
3. Jämför med normal syn för att identifiera problematiska färgkombinationer.

Användningsfall

UI/UX-designers kontrollerar att knapptillstånd och statusindikatorer förblir urskiljbara. Skapare av datavisualiseringar säkerställer att diagramfärger är tillgängliga.

Vanliga frågor

• Hur noggranna är dessa simuleringar? — De använder etablerade färgmatristransformationer och är bra approximationer.
• Hur stor andel av befolkningen har färgblindhet? — Ungefär 8% av männen och 0,5% av kvinnorna har någon form av färgsynsnedsättning.
• Vad är det bästa sättet att designa för färgblindhet? — Kombinera färg med andra visuella ledtrådar som form, mönster, etikett eller textur.