Färgblindhetssimulator: Så ser färgblinda dina färger
Med den kostnadsfria färgblindhetssimulatorn ser du hur personer med protanopi (rödblindhet), deuteranopi (grönblindhet), deuteranomali (nedsatt känslighet för grönt), tritanopi (blåblindhet) eller akromatopsi uppfattar din färgpalett och dina bilder – alla fem varianterna sida vid sida. Ingen inloggning behövs: Färger och bilder bearbetas bara i din webbläsare och laddas aldrig upp.
Byggd av Justin Schuessler
Har du kontrollerat designens tillgänglighet? Publicera din webbplats med snabbt och pålitligt webbhotell.
Redigera färg
Beräknas omedelbart för alla simulerade varianter nedan. Välj en färg från din palett nedan för att redigera den här.
Din färgpalett
Klicka på en färg för att redigera den högst upp i färgväljaren. Med plusknappen kan du lägga till fler färger och se hela paletten samtidigt i varje simulerad variant.
Simulerad förhandsvisning
Vill du också kontrollera att din färgpalett har tillräcklig kontrast? Kontrollera även kontrasten i paletten du just simulerade
Fortsätt med den valda färgen: Öppna i Color Picker · Skapa färgschema
Körs helt i din webbläsare – inget skickas till en server, sparas eller loggas.
Funktioner
Simulera färgblindhet online: Kontrollera färger och bilder
Här kan du kontrollera en hel färgpalett med hex- eller RGB-värden, utöver dina egna bilder. Praktiskt för webbdesign, varumärkesfärger och diagram.
Fem typer av färgblindhet sida vid sida
Bredvid originalet visar simulatorn varje färg samtidigt vid protanopi, deuteranopi, tritanopi, akromatopsi och deuteranomali. Då ser du direkt var två färger flyter ihop.
Kontrollera hela färgpaletten på en gång
Med plustecknet kan du lägga till så många färger du vill, till exempel hela din varumärkespalett. Under varje färg visas dess hexvärde, och varje simulerad variant visar hela paletten.
Färgruta, hex eller RGB
Välj färger i färgrutan med nyansreglaget, ange ett hex- eller RGB-värde eller skapa en ny färg med ”Slumpmässig färg”.
Simulera egna bilder
Ladda vid behov upp en PNG- eller JPG-bild på upp till 15 MB, till exempel en skärmbild, logotyp eller ett diagram. Stora bilder förminskas till 1.600 px längs den längsta sidan i förhandsvisningen. Klicka på en förhandsvisning för att förstora den.
Vetenskaplig simuleringsmodell
Simuleringen bygger på modellen från Machado, Oliveira & Fernandes (2009) och beräknas i den linjära RGB-färgrymden. Färgrutor och bildpixlar genomgår samma beräkning.
Allt stannar i din webbläsare
Färger och bilder bearbetas direkt i din webbläsare. Inget skickas till en server, sparas eller loggas, och du behöver inget konto.
Typer av färgblindhet
Hur ser färgblinda färger? De fem simulerade typerna
De flesta som är färgblinda ser färger, men blandar ihop vissa nyanser. Vilka nyanser det gäller beror på typen av nedsatt färgseende.
| Form | Så uppfattas färgerna | Simulering i verktyget |
|---|---|---|
| Protanopi (rödblindhet) | Rött och grönt är svåra att skilja åt. Röda nyanser ser mörkare ut och drar mot olivgrönt, brunt och gult. | Full styrka (svårighetsgrad 1,0) |
| Deuteranopi (grönblindhet) | Rött och grönt blandas ihop och ser ut som liknande gula, bruna och olivgröna nyanser. | Full styrka (svårighetsgrad 1,0) |
| Tritanopi (blåblindhet) | Blått och grönt samt gult och violett är svåra att skilja åt. Gult ser blekrosa till ljusgrått ut. Rött och grönt går däremot lätt att urskilja. | Full styrka (svårighetsgrad 1,0) |
| Akromatopsi (total färgblindhet) | Nästan inga färger uppfattas, bara skillnader i ljusstyrka, ungefär som i en gråskalebild. | Relativ luminans (gråskala) |
| Deuteranomali (nedsatt känslighet för grönt) | En mildare form av deuteranopi och den vanligaste typen av färgseendesvaghet: röda och gröna nyanser blir svårare att skilja åt. | Mildare variant (svårighetsgrad 0,6) |
Prova själv: Ange #FF0000 i simulatorn, lägg till en andra färg med plustecknet och ställ in den på #00FF00. På korten för protanopi och deuteranopi ser du direkt att båda färgerna blir gula och olivgröna nyanser som nästan bara skiljer sig åt i ljusstyrka.
Så fungerar det
Simulera färgblindhet i 6 steg
Från den första färgen till jämförelsen av alla fem varianter, med din palett och valfritt en egen bild.
Steg 1
Välj färg
Under ”Redigera färg” kan du välja en färg i färgrutan med nyansreglaget, ange ett hex- eller RGB-värde eller klicka på ”Slumpmässig färg”.
Steg 2
Skapa en färgpalett
Lägg till fler färger med plustecknet under ”Din färgpalett”. Klicka på en färg för att redigera den i färgväljaren. Ta bort den med papperskorgsikonen.
Steg 3
Ladda upp en bild (valfritt)
Dra en PNG- eller JPG-fil på upp till 15 MB till fältet ”Ladda upp egen bild” eller klicka på det för att välja en fil. Bilden stannar i din webbläsare.
Steg 4
Jämför varianter
Jämför originalet med protanopi, deuteranopi, tritanopi, akromatopsi och deuteranomali under ”Simulerad förhandsvisning”. Lägg märke till vilka färger som blir för lika.
Steg 5
Förstora bild
Klicka på en förhandsvisning för att förstora den och granska detaljer.
Steg 6
Arbeta vidare med färgen
Öppna den valda färgen i Color Picker eller färgschemageneratorn via länkarna under förhandsvisningen, eller kontrollera dess kontrast i Contrast Checker.
Tillgängliga färger
Varför ta hänsyn till nedsatt färgseende i designen?
Nedsatt röd-grönt färgseende berör omkring 8 % av alla män och cirka 0,5 % av alla kvinnor (främst bland personer med europeiskt ursprung), vilket motsvarar uppskattningsvis omkring 300 miljoner människor globalt. Om viktig information förmedlas enbart med färg, till exempel rött för ”fel” och grönt för ”lyckades” utan någon extra symbol eller text, utestängs oavsiktligt en betydande del av användarna.
WCAG kräver därför att färg aldrig används som enda sätt att skilja saker åt (framgångskriterium 1.4.1). Kombinera färger med ikoner, mönster eller etiketter och kontrollera i simulatorn vilka färger i din palett som blir för lika vid nedsatt färgseende. Kontrollera sedan i Contrast Checker om text och bakgrund har tillräcklig kontrast. Till Contrast Checker
Upptäck mer
Fler färgverktyg
Kontrollera kontrast, justera färger, skapa ett färgschema eller hämta färger från en bild – också gratis i webbläsaren.
Kontrastkontroll
Beräkna kontrastförhållandet mellan två färger enligt WCAG i realtid och kontrollera mot AA/AAA och UI-komponenter – direkt i webbläsaren.
Byggd av Justin Schuessler
Färgväljare
Konvertera färger direkt mellan HEX, RGB, HSL, HSV och CMYK, hitta närmaste namngivna CSS-färg och kontrollera WCAG-kontrasten mot svart och vitt – helt i webbläsaren.
Byggd av Justin Schuessler
Generator för färgscheman
Skapa komplementära, analoga, triadiska och andra färgscheman direkt utifrån en basfärg – ingenting sparas eller överförs.
Byggd av Justin Schuessler
Färgväljare för bilder
Läs av en färgkod från en bild: färgpipett med förstoringsglas, HEX, RGB och HSL, bildens färgpalett och kontrastinformation. Bilden stannar i webbläsaren.
Byggd av Dimitri Heissler
FAQ
Vanliga frågor om färgblindhetssimulatorn
Korta svar om nedsatt färgseende, tillgängliga färger och det här verktyget.
De flesta som är färgblinda ser färger, men blandar ihop vissa nyanser. Vid protanopi och deuteranopi blir rött och grönt liknande gula, bruna och olivgröna nyanser. Vid tritanopi är blått och grönt samt gult och violett svåra att skilja åt. Endast vid akromatopsi saknas färgseende helt; då återstår bara skillnader i ljusstyrka, som i en gråskalebild. I simulatorn kan du se det direkt med dina egna färger.
Fem typer bredvid originalet: protanopi (rödblindhet), deuteranopi (grönblindhet), deuteranomali (nedsatt känslighet för grönt), tritanopi (blåblindhet) och akromatopsi (total färgblindhet). Alla fem visas samtidigt sida vid sida, för varje färg i din palett och för en uppladdad bild.
Vanligast är nedsatt röd-grönt färgseende, framför allt deuteranomali, en mildare form av nedsatt känslighet för grönt. Det berör omkring 8 % av männen och cirka 0,5 % av kvinnorna (siffror för personer med europeiskt ursprung), uppskattningsvis omkring 300 miljoner människor globalt. Även kvinnor kan alltså vara färgblinda, men det är betydligt ovanligare.
Nej. Simulatorn visar hur personer med nedsatt färgseende uppfattar färger och är varken ett syntest eller en diagnos. Om du vill få ditt eget färgseende undersökt kan du vända dig till en ögonmottagning eller optiker, som till exempel kan använda Ishihara-plattor.
Färgblindhetssimulatorn är gratis och kräver ingen inloggning. Bilder laddas inte upp: Verktyget läser filen direkt i din webbläsare och beräknar varianterna med Canvas, utan överföring till en server, lagring eller loggning. Du kan använda PNG och JPG på upp till 15 MB. För förhandsvisningen förminskas bilden till högst 1.600 px längs den längsta sidan. När du stänger fliken försvinner bilden.
Ja. Med plustecknet kan du lägga till så många färger du vill och se dem samtidigt i alla fem simulerade varianter. Klicka på en färg för att redigera den i färgväljaren. Ta bort den med papperskorgsikonen. På så sätt ser du om två färger i din palett, till exempel dina varumärkesfärger, blir för lika vid nedsatt färgseende.
Simuleringen bygger på den fysiologiskt grundade modellen från Machado, Oliveira & Fernandes (2009) med dess publicerade matriser. Beräkningen görs i den linjära RGB-färgrymden efter omvandling från sRGB. Protanopi, deuteranopi och tritanopi simuleras i full styrka (svårighetsgrad 1,0), deuteranomali med svårighetsgrad 0,6 och akromatopsi som relativ luminans. Hur starkt ett nedsatt färgseende är varierar från person till person, så simuleringen visar en typisk upplevelse.
Särskilt problematiska är rött och grönt, men även grönt och brunt eller blått och violett, om färgen är det enda som skiljer dem åt. I stället för att ta bort färgerna helt kan du komplettera med text, ikoner eller mönster och kontrollera din palett i simulatorn. Om två färger blir nästan identiska i någon variant kan du justera ljusstyrkan eller nyansen. Kontrollera sedan kontrasten mellan text och bakgrund i Contrast Checker.
Fler frågor?
Kontakta supportenDitt frontendprojekt behöver en pålitlig server bakom sig
En VPS från ZAP-Hosting ser till att din applikation eller ditt projekt finns online tillförlitligt.
Ingen konfigurering. Ingen risk. Online på några sekunder.
Letar du efter fler verktyg? Visa alla bild- och designverktyg
