Färgblindvänliga paletter och så testar du dina designs

En färgblindvänlig palett är en uppsättning färger som förblir åtskilda för människor som förväxlar vissa nyanser, oftast rött och grönt. Knepet är att skilja färger åt på ljushet såväl som på nyans, och att aldrig låta färg vara den enda signalen. Ett mörkblått och ett ljust orange förblir olika för nästan alla; ett medelrött och ett medelgrönt, i liknande ljushet, kan se ut som samma leriga brunt. Nedan finns paletter du kan kopiera, paren att undvika och tre gratis sätt att testa ditt arbete.

Typer av färgblindhet, kort

Färgseende bygger på tre slags tappar i ögat, avstämda ungefär mot långa, medellånga och korta våglängder. När ett slag saknas eller är förskjutet börjar vissa färger som ser olika ut för de flesta se lika ut. WebAIM-artikeln om färgblindhet tar upp biologin; för design är det den här tabellen som räknas.

Den röda tråden: nyansen blir opålitlig, men ljusheten består. En person med deuteranopi ser fortfarande tydligt att en färg är mörkare än en annan. Det enda faktumet styr varje regel nedan.

En färgblindvänlig palett du kan kopiera

Den mest kända säkra uppsättningen är paletten som föreslagits av Masataka Okabe och Kei Ito för vetenskapliga figurer. Dess åtta färger valdes för att förbli urskiljbara för de vanliga typerna av färgblindhet, och den fungerar lika bra för diagram, kartor, etiketter och statusfärger i en produkt.

För varumärkesarbete är åtta färger oftast för många. Det säkraste enskilda paret är blått och orange: de ligger på motsatta sidor av förväxlingslinjen mellan rött och grönt och skiljer sig i ljushet, så de läses som olika av nästan alla. Blått med gult, och mörklila med ljusgrönt, håller också bra.

Gradienter och skalor för data

För värmekartor och diagram som visar ett spann, använd en skala vars ljushet ändras jämnt från ena änden till den andra. En skala från rött till grönt fallerar två gånger: ändarna förväxlas av färgblinda läsare, och båda ändarna har liknande ljushet. Blått till orange eller en enda nyans från mörk till ljus fungerar för nästan alla.

Par att undvika och vad du kan använda i stället

Vissa kombinationer ställer till problem gång på gång. Det röda #d7263d och gröna #2e9e44 ovan ser tydligt olika ut för de flesta, men deras perceptuella ljushet är nästan identisk (omkring 57 % och 62 % i OKLCH), så för någon med deuteranopi finns det lite kvar att skilja dem åt på.

Om dina varumärkesfärger är rött och grönt behöver du inte byta dem. Gör bara den ena tydligt mörkare än den andra och använd dem aldrig som enda skillnaden mellan till exempel en vinst och en förlust. En pil eller ett plus- och minustecken löser det för alla. Att välja färgerna från början tas upp i så väljer du varumärkesfärger.

Förlita dig aldrig på enbart färg

Det här är den viktigaste regeln, och den ingår också i Web Content Accessibility Guidelines. Om en diagramförklaring, ett formulärfel, en lagerstatusmärkning eller en karta bara skiljer sig åt i färg förlorar vissa läsare betydelsen. Lägg till en andra signal:

• Etiketter direkt på diagramlinjer och staplar i stället för en färgnyckel.
• Ikoner för tillstånd: en bock för lyckat, ett kryss eller en varningsskylt för fel.
• Mönster eller linjestilar, som streckade och heldragna linjer, i diagram.
• Position och ordning, så att det första objektet alltid betyder samma sak.
• Textkontrast som klarar sig själv, kontrollerad med en kontrastkontroll.

Grafik för sociala medier behöver samma omsorg. Ett inlägg som säger "grönt betyder ledigt" över en röd-grön kalender tappar några läsare. Ord bär det bättre, och orden själva måste läsas mot bakgrunden, särskilt på gradienter, där kontrasten ändras över ramen. Text på gradienter går igenom det i detalj.

Den högra versionen är vad en Mark i Gradiently gör på egen hand: den flyttar sin lugnaste, bäst kontrasterande del bakom texten och auto ink väljer ljus eller mörk text för varje rad, så att åtskillnaden kommer av ljushet snarare än nyans.

Så testar du en design för färgblindhet

1. 1

   Gör gråskalekontrollen

   Exportera eller ta en skärmdump av designen och gör den om till gråskala. Om två färger som betyder olika saker blir samma grå, ändra ljusheten på den ena.

2. 2

   Simulera i webbläsaren

   I Chrome eller Edge öppnar du devtools, trycker på kommandomenyn, skriver Rendering och använder Emulate vision deficiencies för att se den levande sidan som protanopi, deuteranopi, tritanopi eller akromatopsi.

3. 3

   Kontrollera hela skärmen i grått

   Både Mac och Windows har ett gråskalefilter i tillgänglighetsinställningarna. Slå på det för att granska appar, designfiler och exporter, inte bara webbsidor.

4. 4

   Ta bort färgen och läs igen

   Fråga om varje diagram, märke och status fortfarande är begripligt enbart med etiketter och ikoner. Om det är det är färg dekoration, vilket är där den hör hemma.

Simuleringar är approximationer, och färgseende varierar från person till person. Om tillgänglighet är viktig för din produkt, be färgblinda personer du känner titta på det riktiga. För diagram i synnerhet har infografikdesign mer om etiketter och layout, och färgharmoni hjälper när du behöver en säker palett som ändå ser genomtänkt ut.