farve spiller en integreret rolle i brugergrænsefladedesign. Når det gøres rigtigt, det forbedrer brugeroplevelsen, påvirker købsbeslutninger, og afspejler brands stemme.

så hvordan designer du effektive, tilgængelige og æstetisk tiltalende grænseflader til farveblinde brugere?selvom videnskaben bag farveblindhed er temmelig kompleks, er kernen i det, at farveblinde mennesker har svært ved at se Farve Klart eller skelne mellem nogle farver., Med dette i tankerne deler vi i denne artikel nogle tip til, hvordan du kan forbedre dit siteebsteds tilgængelighed og den oplevelse, det leverer til farveblinde mennesker.

farveblindhed i en Digital verden

ifølge undersøgelser er cirka 1 ud af hver 12 mænd (og 1 ud af hver 200 kvinder) farveblinde. Selvom farveblinde mennesker kan se tingene lige så tydeligt som alle andre, er de ikke i stand til fuldt ud at skelne rødt, grønt eller blåt lys. Der er forskellige typer af farveblindhed; deuteranopia og protanopia farveblindhed er de mest almindelige.,

personer med rødgrøn farveblindhed (deuteranopi) har svært ved at skelne mellem rød og grøn. På samme måde ser alle røde farver kedelige ud for mennesker med rød farveblindhed (protanopi).

hvad dette betyder fra et designsynspunkt er, at det at stole på farve alene for læsbarhed og overkommelighed ville gøre dit websiteebsted vanskeligt at bruge til nogen, der er farveblind.

Du kan bruge Coblis Farveblindhedssimulatoren til at se, hvordan dit siteebsted ser ud for farveblinde brugere.,

7 måder, hvorpå du kan forbedre Farvetilgængeligheden for farveblinde brugere

designelementer og teknikker, der forbedrer farvetilgængeligheden for farveblinde brugere, anses generelt for at være god designpraksis. Selvom du måske tror, at dit websiteebsteds æstetiske appel kan lide, hvis du designer for tilgængelighed, er det bestemt ikke tilfældet.

Her tager vi et kig på nogle af måderne, du kan designe en mere tilgængelig brugergrænseflade, der holder farveblinde brugere i tankerne.

# 1: Brug mønstre og teksturer

farveforskelle er utroligt vigtige med datavisualisering, f. eks.,, grafer og cirkeldiagrammer. Valg af farver, der har et lavt kontrastforhold, kan gøre dit diagram vanskeligt at fortolke for farveblinde brugere.

Her er hvad du skal gøre i stedet:

  • brug mønstre og teksturer for at gøre det nemt for brugerne at differentiere forskellige segmenter.
  • Tilføj tekstetiketter til segmenter for at gøre dem endnu lettere at forstå.

lad os se på, hvordan en farveblind person med tritanopia kan se en blågrøn søjlediagram i forhold til, hvordan de ville se den samme graf med mønstre og teksturer.,

Her er hvad det ville se ud, hvis du har markeret hvert enkelt segment i stedet for at bruge mønstre:

#2: Udnyt Farver og Symboler

Du bør ikke udelukkende være afhængig af farve for at kommunikere fejl eller formidle information via din UI.

lad os tage et kig på Facebook ‘ s tilmeldingsformular for eksempel., Hvis den form, som er påberåbt farve alene at lade brugerne vide, at de havde lavet en fejl på et bestemt område, det kunne se sådan ud for en rød-blind (protanopia) bruger:

Her er et kig på Facebook sign op formularen med symboler og fejl meddelelser, der er knyttet:

ved Hjælp af ikoner og symboler i formularer for at lade brugeren vide, at de har lavet en fejl forbedrer tilgængeligheden og hjælper dem med at rette deres fejl hurtigere.

#3: Brug tekstetiketter

tilføjelse af tekstetiketter til farvefiltre og farveprøver forbedrer tilgængeligheden for farveblinde brugere., Afhængigt af typen af farveblindhed kan brugerne have svært ved at skelne mellem forskellige farver (eller nuancer) uden en slags beskrivende tekst.uden den beskrivende tekstetiket på Ama .on, ville farveblinde brugere ikke være i stand til at fortælle en rød skjorte bortset fra en orange eller grøn.

tilføjelse af tekstetiketter til farvefiltre forbedrer også tilgængeligheden for personer med normalt syn. For eksempel er hvid, off-whitehite og lysegrå ofte vanskelige at skelne mellem på skærme.,

#4: Understreg Links

meget af den tid, vi bruger Skrifttypefarve eller skrifttypevægt til at betegne links. Selvom det kan være muligt for nogen med deuteranomali, protanopia eller tritanopia at skelne ankertekst fra almindelig tekst, er det bestemt ikke ideelt på grund af det lave kontrastforhold.

nogen med monokromitet ville ikke være i stand til at skelne mellem tekst og ankertekst overhovedet og skulle holde musepekeren over teksten for at se, om det deres markør skifter til en markør.

af denne grund er det en god ide at tilføje en understregning til tekstlinks., Dette gør det nemt at straks fortælle almindelig tekst og forankre tekst fra hinanden. Her er et eksempel fra Engadget hjemmeside:

#5: Farve Kombinationer for at Undgå

Bestemt farve kombinationer er ikke ideelle for farveblinde brugere, enten fordi de har lav kontrast forhold, eller fordi de er vanskelige at skelne mellem.,

Her er en liste af farve kombinationer, som du bør undgå at bruge i dit interface design, hvor det er muligt:

  • grøn-rød
  • grøn-blå
  • grøn-brun
  • grøn-sort
  • grøn-grå
  • blå-grå
  • lys grøn-gul
  • blå-lilla

Her er hvad grøn-rød og blå-lilla farve kombinationer ville se ud til at en bruger med protanopia:

#6: Gør Primære Knapper Standout

Mange gange, designere afhængige af farve for at få primære knapper skiller sig ud., Problemet med dette er, at den farve, du bruger, kan være vanskelig for farveblinde brugere at opfatte.

Her er hvad du skal gøre i stedet:

  • Forøg størrelsen på din primære knap.
  • Prøv forskellige placeringskombinationer.
  • øg kontrasten mellem primære og sekundære knapper.
  • brug grænser, ikoner eller skrifttype vægt til at differentiere primære og sekundære knapper.for eksempel bruger Reformation størrelse og farve til at fremhæve den primære knap.,

    Og Fyrrummet præsenterer deres primære knappen i nederste højre hjørne, og den sekundære knap i øverste venstre hjørne.

    #7: Marker påkrævede formularfelter

    farveblinde brugere kan have svært ved at skelne mellem påkrævede og valgfrie felter, hvis du bruger farve alene til at angive obligatoriske felter på formularer.

    i stedet kan du:

    • markere obligatoriske felter med en stjerne (*).
    • Mærkefelter med ordet påkrævet eller valgfrit.
    • Fjern valgfrie felter fra formularer.,

    konklusion

    design af brugergrænseflade til farveblinde brugere vil også hjælpe dig med at forbedre dit siteebsteds tilgængelighed for brugere med normalt syn. Selv om der ikke er en one-size-fits-all løsning, når det kommer til web-tilgængelighed, her er et par tip, du bør huske på:

    • Brug mønstre og teksturer til at vise kontrast i grafer og diagrammer.
    • Brug farver og symboler til at formidle fejlmeddelelser.
    • Tilføj tekstetiketter til farvefiltre og farveprøver.
    • Understreg links for at skelne mellem almindelig tekst og ankertekst.,
    • undgå at bruge dårlige farvekombinationer som grøn-rød og blå-lilla.
    • Brug størrelse, placering eller skrifttypevægte til at få primære knapper til at skille sig ud.
    • Marker påkrævede formularfelter med et symbol (f.eks. en stjerne) eller mærk dem.