Färg spelar en viktig roll i UI design. När det görs rätt, det förbättrar användarupplevelsen, påverkar köpbeslut, och återspeglar varumärkena röst.

Så, hur designar du effektiva, tillgängliga och estetiskt tilltalande gränssnitt för färgblinda användare?

medan vetenskapen bakom färgblindhet är ganska komplex, är kärnan i det att färgblinda människor har svårt att se färg tydligt eller differentiera mellan vissa färger., Med detta i åtanke, i den här artikeln, Vi kommer att dela några tips om hur du kan förbättra din webbplats tillgänglighet och den erfarenhet som den levererar för färgblinda människor.

färgblindhet i en Digital värld

enligt studier är ungefär 1 av varje 12 män (och 1 av varje 200 kvinnor) färgblinda. Även om färgblinda människor kan se saker lika tydligt som alla andra, kan de inte helt urskilja rött, grönt eller blått ljus. Det finns olika typer av färgblindhet; deuteranopia och protanopia färgblindhet är de vanligaste.,

personer med röd-grön färgblindhet (deuteranopia) har svårt att skilja mellan rött och grönt. På samma sätt ser alla röda färger tråkiga ut för personer med röd färgblindhet (protanopi).

vad detta innebär ur designsynpunkt är att förlita sig på färg ensam för läsbarhet och överkomliga priser skulle göra din webbplats svår att använda för någon som är färgblind.

Du kan använda Coblis färgblindhet Simulator för att se hur din webbplats ser ut att färgblinda användare.,

7 sätt du kan förbättra Färgtillgängligheten för färgblinda användare

designelement och tekniker som förbättrar färgtillgängligheten för färgblinda användare anses generellt vara god designpraxis. Även om du kanske tror att din webbplats estetiska överklagande kan drabbas om du designar för tillgänglighet, det är verkligen inte fallet.

här tar vi en titt på några av de sätt du kan designa ett mer tillgängligt användargränssnitt som håller färgblinda användare i åtanke.

#1: Använd mönster och texturer

färgskillnader är oerhört viktiga med datavisualisering, t. ex.,, grafer och cirkeldiagram. Att välja färger som har ett lågt kontrastförhållande kan göra ditt diagram svårt att tolka för färgblinda användare.

här är vad du bör göra istället:

  • använd mönster och texturer för att göra det enkelt för användare att skilja olika segment.
  • Lägg till textetiketter i segment för att göra dem ännu enklare att förstå.

Låt oss ta en titt på hur en färgblind person med tritanopi kan se ett blågrönt stapeldiagram jämfört med hur de skulle se samma graf med mönster och texturer.,

Så här skulle det se ut om du märkte varje segment istället för att använda mönster:

#2: Använd färger och symboler

Du bör inte förlita dig enbart på färg för att kommunicera fel eller förmedla information via ditt användargränssnitt.

låt oss ta en titt på Facebook: s registreringsformulär till exempel., Om formuläret förlitat sig på färg ensam för att låta användarna veta att de hade gjort ett misstag på ett visst fält, kan det se ut så här för en rödblind (protanopia) användare:

Här är en titt på Facebook: s registrera formulär med symboler och felmeddelanden bifogade:

använda ikoner och symboler i formulär för att låta användaren veta att de har gjort ett fel förbättrar tillgängligheten och hjälper de korrigerar sitt misstag snabbare.

#3: Använd textetiketter

lägga till textetiketter till färgfilter och swatches förbättrar tillgängligheten för färgblinda användare., Beroende på vilken typ av färgblindhet användarna kan ha svårt att skilja mellan olika färger (eller nyanser) utan någon form av beskrivande text.

till exempel, utan den beskrivande textetiketten på Amazon, skulle färgblinda användare inte kunna berätta en röd skjorta bortsett från en orange eller grön.

lägga till textetiketter till färgfilter förbättrar tillgängligheten för personer med normal syn, samt. Till exempel är vita, benvita och ljusgrå ofta svåra att skilja mellan på bildskärmar.,

#4: understruken länkar

mycket av den tid vi använder teckensnittsfärg eller teckensnittvikt för att beteckna länkar. Även om det kan vara möjligt för någon med deuteranomaly, protanopi eller tritanopi att skilja ankartext från vanlig text, är det verkligen inte idealiskt på grund av det låga kontrastförhållandet.

någon med monokromacy skulle inte kunna skilja mellan text och ankartext alls och skulle behöva sväva över texten för att se om det deras markör ändras till en pekare.

av denna anledning är det en bra idé att lägga till en understrykning i textlänkar., Detta gör det enkelt att omedelbart berätta vanlig text och ankare text isär. Här är ett exempel från Engadgets webbplats:

#5: färgkombinationer för att undvika

vissa färgkombinationer är inte idealiska för färgblinda användare antingen för att de har låga kontrastförhållanden eller för att de är svåra att skilja mellan.,

här är en lista över färgkombinationer som du bör undvika att använda i din gränssnittsdesign där det är möjligt:

  • grön-röd
  • grön-blå
  • grön-brun
  • grön-svart
  • grön-grå
  • blå-grå
  • ljusgrön-gul
  • blå-lila

Här är vad grön-grå

  • röd och blå-lila färgkombinationer skulle se ut som en användare med protanopia:

    #6: gör primära knappar standout

    många gånger, designers lita på färg för att göra primära knappar sticker ut., Problemet med detta är att färgen du använder kan vara svårt för färgblinda användare att uppfatta.

    här är vad du ska göra istället:

    • öka storleken på din primära knapp.
    • Prova olika placeringskombinationer.
    • öka kontrasten mellan primära och sekundära knappar.
    • använd gränser, ikoner eller teckensnittsvikt för att skilja mellan primära och sekundära knappar.

    till exempel använder Reformation storlek och färg för att betona den primära knappen.,

    och Firebox presenterar sin primära knapp i det nedre högra hörnet och den sekundära knappen i det övre vänstra hörnet.

    #7: markera obligatoriska formulärfält

    färgblinda användare kan ha svårt att skilja mellan obligatoriska och valfria fält om du använder färg ensam för att beteckna Obligatoriska fält på formulär.

    istället kan du:

    • markera Obligatoriska fält med en asterisk (*).
    • etikettfält med ordet obligatoriskt eller valfritt.
    • ta bort valfria fält från formulär.,

    slutsats

    Design UI för färgblinda användare hjälper dig att förbättra webbplatsens tillgänglighet för användare med normal syn, samt. Även om det inte finns en one-size-fits-all-lösning när det gäller webbtillgänglighet, här är några tips som du bör tänka på:

    • använd mönster och texturer för att visa kontrast i diagram och diagram.
    • använd färger och symboler för att förmedla felmeddelanden.
    • Lägg till textetiketter till färgfilter och swatches.
    • understruken länkar för att skilja mellan vanlig text och ankartext.,
    • Undvik att använda dåliga färgkombinationer som grön-röd och blå-lila.
    • använd storlek, placering eller teckensnittsvikter för att få primära knappar att sticka ut.
    • markera obligatoriska formulärfält med en symbol (t.ex. en asterisk) eller märka dem.