Färgblindhetssimulator
Ungefär 8 % av män och 0,5 % av kvinnor har någon form av färgsynsnedsättning, oftast röd-grön. Ladda upp en design, skärmbild eller illustration, välj ett simuleringsläge och jämför originalet med det simulerade resultatet sida vid sida. Det hjälper dig att se om diagram, kartor eller gränssnitt fortfarande går att förstå utan att enbart förlita sig på färg.
Så fungerar simulatorn
-
1
Ladda upp en bild
PNG, JPG, WebP eller SVG. Bearbetas i webbläsaren, inget laddas upp.
-
2
Välj simuleringsläge
Välj protanopi, protanomali, deuteranopi, deuteranomali, tritanopi, tritanomali, akromatopsi eller akromatomali.
-
3
Jämför sida vid sida
Webbläsaren tillämpar en matristransformering och visar originalet bredvid den valda simuleringen.
-
4
Exportera den simulerade bilden
Ladda ned den valda simuleringen som PNG eller ta skärmbilder av jämförelsen för designgranskning.
Former av färgsynsnedsättning
| Tillstånd | Förekomst | Karaktär |
|---|---|---|
| Deuteranomali | ~5 % av män | Röd-grön anomali, M-koner förskjutna |
| Protanomali | ~1 % av män | Röd-grön anomali, L-koner förskjutna |
| Deuteranopi | ~1 % av män | M-koner saknas, rött och grönt knappt skiljbara |
| Protanopi | ~1 % av män | L-koner saknas, förändrad uppfattning av rött |
| Tritanopi | mycket sällsynt | S-koner saknas, blå-gul axel kollapsad |
| Tritanomali | mycket sällsynt | S-koner förskjutna, lätt blå-gul förlust |
| Akromatopsi | extremt sällsynt | Fullständig färgblindhet, endast gråskala |
De flesta formgivare börjar med deuteranopi och protanopi eftersom röd-gröna nedsättningar är vanligast, och lägger sedan till anomali- och blå-gula lägen för en bredare kontroll.
Designimplikationer
- Använd inte endast röd och grön för att skilja mellan tillstånd. Indikatorer för fel och framgång behöver en form, ikon eller textetikett utöver färgen. Ett rött X och en grön bock är tydligt skiljbara; röda och gröna cirklar är det inte.
- Diagram: använd mönsterfyllningar, direkta etiketter eller visuellt distinkta färgpaletter (ColorBrewer, Viridis). Undvik trafikljuspaletten vid datavisualisering.
- Kartor: gränser och skuggning för att skilja mellan regioner; enbart färg fungerar inte.
- Hyperlänkar: styla dem aldrig enbart med färg. Understrykningar eller tjocklek gör det lättare för alla att skilja dem, även för personer med normal färgsyn.
- Obligatoriska formulärfält: en röd stjärna med märkningen “Obligatorisk” eller en röd kant med hjälptexten “Obligatorisk”.
- Statusindikatorer: trafikljusets röda, gula och gröna färger fungerar som förstärkning, men aldrig som enda signal.
Goda palettval för färgsäker design
- Viridis (används som standard i matplotlib och D3): från lila till gult, perceptuellt enhetlig.
- ColorBrewer kvalitativ: 8 distinkta nyanser utformade för att förbli tydligt skiljbara i vanliga CVD-former.
- Okabe-Ito: en 8-färgspalett speciellt utformad för tillgänglighet vid färgblindhet.
Verktyg och testning
- Simulatorns förhandsvisningar (detta verktyg), snabb visuell granskning.
- WCAG-kontrastkontrollen säkerställer att texten förblir läsbar oavsett färguppfattning.
- Testning med verkliga användare: inget kan ersätta att visa din design för personer med färgblindhet.
En intressant fakta
Moderna färgsynssimulatorer använder matrisapproximationer av hur tappcellernas svar mappas till RGB. Se förhandsvisningen som en praktisk designkontroll, inte som en medicinsk diagnos eller en exakt kopia av en enskild persons upplevelse.
Vanliga frågor
Det är en användbar approximation, men faktisk färgupplevelse varierar mellan personer. De flesta röd-gröna färgsynsnedsättningar ligger på en skala från mild till svår, så använd förhandsvisningen som en designsignal, inte som diagnos.
Deuteranomali omfattar den största andelen användare med färgblindhet (~5 % av män). Att testa mot deuteranopi (den allvarligaste formen) är en konservativ åtgärd: om en design fungerar där fungerar den också för den mildare varianten.
Ja, även om det är mycket ovanligare (~0,5 %). Röd-grön färgsynsnedsättning är recessiv och bunden till X-kromosomen, så män (XY) behöver bara en påverkad X-kromosom; kvinnor (XX) behöver båda. Tritanopi är autosomal och drabbar båda könen lika.
Inte direkt i detta verktyg. Det handlar om allmän simulering av nedsatt syn, vilket även innefattar suddighet och minskad kontrast. För en fullständig tillgänglighetssimulering finns särskilda verktyg som Chromes Lighthouse eller NoCoffee.
Relaterade verktyg
Material Design-färgväljare
Bläddra i Material Design-färgpaletten. Kopiera valfri nyans (50 till A700) som HEX, RGB eller HSL med en tryckning.
QR-kodsgenerator
Skapa en QR-kod av text eller en URL i webbläsaren och ladda ned den som PNG.
Ändra bildstorlek
Ändra bilder till exakta pixelmått eller procentvärden och behåll proportionerna. Smidigt för flera filer, utan uppladdning.
Streckkodsgenerator
Skapa en 1D-streckkod i webbläsaren i Code 128, EAN, UPC, ITF-14 och andra format som stöds och ladda ned den som SVG eller PNG.
Memgenerator
Lägg till en övertext och undertext på en JPG-, PNG- eller WebP-bild. Ställ in typsnitt, färger och kontur och ladda ned din mem som PNG.
GIF-skapare
Gör en bildsekvens till en animerad GIF. Ställ in bildfrekvens, kvalitet och storlek före export.