En guide til farvetilgængelighed i produktdesign

Der tales meget om tilgængeligt design, men har du nogensinde tænkt på farvetilgængelighed?

For nylig indbragte en klient et projekt med meget specifikke, komplekse implementeringer af et tilgængeligt farvesystem. Dette åbnede mine øjne ikke kun for, hvor vigtigt dette emne er, men også hvor meget der er at lære.

Denne historie er af Justin Reyna

Lad os lære, hvordan du kan få farver tilgængelig ved hjælp af de designprincipper, du allerede kender.

Hvorfor er tilgængelighed så vigtig?

Tilgængelighed i digital produktdesign er praksis med at skabe oplevelser for alle mennesker, inklusive dem af os med visuelle, tale-, auditive, fysiske eller kognitive handicap. Som designere, udviklere og generelle tech-folk har vi magten til at skabe et websted, som vi alle er stolte af: et inkluderende web, der er lavet til og forbruges af alle mennesker.

At oprette tilgængelige produkter er heller ikke uhøfligt, så vær ikke uhøflig.

Farvetilgængelighed gør det muligt for personer med synshandicap eller mangler med farvesyn at interagere med digitale oplevelser på samme måde som deres ikke-synshæmmede kolleger. I 2017 estimerede Verdenssundhedsorganisationen, at cirka 217 millioner mennesker lever med en form for moderat til svær synssvækkelse. Denne statistik alene er grund nok til at designe for tilgængelighed.

"At ikke oprette tilgængelige produkter er bare uhøfligt, så vær ikke uhøflig."

Bortset fra at tilgængelighed er en etisk bedste praksis, er der også potentielle juridiske konsekvenser for ikke at overholde lovgivningsmæssige krav omkring tilgængelighed. I 2017 indgav sagsøgerne mindst 814 føderale retssager om angiveligt utilgængelige websteder, herunder et antal klassesager. Forskellige organisationer har forsøgt at etablere tilgængelighedsstandarder, især USA Access Board (Afsnit 508) og World Wide Web Consortium (W3C). Her er en oversigt over disse standarder:

  • Afsnit 508: 508-overholdelse henviser til afsnit 508 i rehabiliteringsloven fra 1973. Du kan læse den dybtgående ordinance her, men for at opsummere kræver afdeling 508, at dit websted skal være tilgængeligt, hvis du er et føderalt agentur eller opretter websteder på på vegne af et føderalt agentur (som entreprenører).
  • W3C: World Wide Web Consortium (W3C) er et internationalt, frivilligt samfund, der blev oprettet i 1994 og udvikler åbne standarder for nettet. W3C skitserer deres retningslinjer for webtilgængelighed i WCAG 2.1, som i det væsentlige er guldstandarden for bedste tilgængelighed på nettet.

Sørg for, at dit produkt er farve-tilgængeligt

At tage højde for tilgængelighed tidligt i et produkts livscyklus er bedst - det reducerer tiden og pengene, du bruger til at gøre dine produkter tilgængelige med tilbagevirkende kraft. Farvetilgængelighed kræver lidt arbejde foran, når du vælger dit produkts farvepalet, men at sikre, at dine farver er tilgængelige, betaler udbytte ned ad vejen.

Her er nogle hurtige tip til at sikre, at du opretter farvetilgængelige produkter.

Tilføj nok kontrast

For at opfylde W3Cs minimum AA-bedømmelse skal dit baggrund-til-tekst-kontrastforhold være mindst 4,5: 1. Så når du designer ting som knapper, kort eller navigationselementer, skal du sørge for at kontrollere kontrastforholdet for dine farvekombinationer.

Der er masser af værktøjer, der kan hjælpe dig med at teste tilgængeligheden af ​​farvekombinationer, men de, som jeg har fundet mest nyttige, er Farveløs og Colorsafe. Jeg kan godt lide Colorable, fordi det har glider, der giver dig mulighed for at justere farvetone, mætning og lysstyrke i realtid for at se, hvordan det påvirker tilgængelighedsgraden for en bestemt farvekombination.

Stol ikke kun på farve

Du kan også sikre tilgængelighed ved at sikre dig, at du ikke er afhængig af farve for at videresende vigtige systemoplysninger. Så for ting som fejltilstande, succestilstande eller systemadvarsler, skal du sørge for at inkorporere beskeder eller ikonografi, der klart viser, hvad der foregår.

Når man viser ting som grafer eller diagrammer, giver brugerne mulighed for at tilføje tekstur eller mønstre, så de, der er farveblind, kan skelne mellem dem uden at skulle bekymre sig om farve, der påvirker deres opfattelse af dataene. Trello gør et godt stykke arbejde med dette med deres farveblind-venlige tilstand.

Fokusstilstandskontrast

Fokusstater hjælper folk med at navigere på dit websted med et tastatur ved at give dem en visuel indikator omkring elementer. De er nyttige for mennesker med synshandicap, personer med motoriske handicap og folk, der bare kan lide at navigere med et tastatur.

Alle browsere har en standardfokusfarve, men hvis du planlægger at tilsidesætte det inden for dit produkt, er det vigtigt at sikre, at du leverer tilstrækkelig farvekontrast. Dette sikrer, at personer med synshandicap eller farvemangel kan navigere med fokustilstande.

Dokumenter og socialiser farvesystem

Til sidst er det vigtigste aspekt ved at skabe et tilgængeligt farvesystem at give dit team muligheden for at referere til det, når det er nødvendigt, så alle er klare over korrekt brug. Dette reducerer ikke kun forvirring og kerne, men sikrer også, at tilgængelighed altid er en prioritet for dit team. Efter min erfaring er det eksplicit at udråbe tilgængelighedsvurderingen for en bestemt farvekombination inden for et UI-kit eller et designsystem, især når man socialiserer det på tværs af teamet med et værktøj (som InVision Craft eller InVision DSM). Her er et eksempel på, hvordan du dokumenterer baggrund til tekstfarvekombinationer og tilgængelighedsvurderingen for hver kombination.

Lad os blive tilgængelige

Dette er kun et par tip til at gøre dit produkt mere tilgængeligt, men husk, disse vedrører kun farvetilgængelighed. For at forstå tilgængelighedsretningslinjerne i detaljer anbefaler jeg, at du gør dig bekendt med WCAG 2.1. Selvom disse retningslinjer kan være en smule skræmmende, er der masser af ressourcer derude til at hjælpe dig undervejs, og hvis du er i tvivl, skal du ikke tøve med at nå ud til designere i dit område (eller via internettet) for at få hjælp.

Kan du lide dette indlæg? Læs mere som det på Inside Design, en ny blog af InVision.

Oprindeligt offentliggjort på invisionapp.com.