Hvad er WCAG-forholdet? Hvorfor du bør implementere det i dine designs

Web Content Accessibility Guidelines (WCAG) er retningslinjer for tilgængelighed for digitalt design og webdesign. At følge disse retningslinjer sikrer, at farverne er kontrastfulde nok til at hjælpe dem med synsnedsættelse til at se og læse dine designs korrekt. Dette går også hånd i hånd med typografisk størrelse, for at sikre dens læsbarhed sammen med farverne.

I en verden, der burde være mere inkluderende, vil tilføjelse af tilgængelige elementer til dine designs kun løfte dit arbejde og give dig mulighed for at dele det med flere mennesker.

Hvad er WCAG-forholdet?

WCAG står for Retningslinjer for tilgængelighed til webindhold. WCAG hjælper enhver, der designer eller skaber til internettet eller internettet, med at sikre, at deres design rammer tilgængelighedsmål. Det betyder, at dine designs kan nydes og bruges af alle, uden at udelukke dem med synshandicap eller andre handicap, når det er muligt.

WCAG-forholdet angiver minimumsforholdet for at ramme målets tilgængelighed. Dette inkluderer farvekontrast og tekststørrelse, som begge sikrer, at personer med synshandicap har en bedre chance for at se, interagere med og bruge dine designs. Ikke kun hjælper det dem med synshandicap at ramme WCAG-forholdet, men det øger også brugeroplevelsen for alle webbrugere.

Det World Wide Web Consortium udvikler standarder for webudvikling. Selvom der ikke er nogen faste regler for webtilgængelighed, sætter WCAG en standard, der skal følges, som enhver webdesigner bør overholde.

Ved testning af kontrastforhold foreslår WCAG en rating fra A til AAA. En A-vurdering viser de laveste kontrastniveauer. AA er kontrastniveauer i mellemområdet med et forhold på 4,5:1 – betragtet som minimumsforholdet. Endelig er AAA det højeste kontrastniveau. Hvis du designer til alle, er dine kontrastniveauer bedst, når de er mellem et AA- og AAA-område.

Hvorfor er WCAG-forholdet vigtigt i grafisk og webdesign?

Grafisk design og webdesign bør ikke kun få information til at se smuk ud. Informationsdesign informerer masserne - det betyder at gøre din information tilgængelig for alle. WCAG-implementering sikrer tilgængelige designs for personer med synsnedsættelse, ordblindhed, neurodivergens eller noget, der påvirker en persons syn eller læseevne.

Web og digitalt design – såvel som programmering – har allerede etableret tilgængelighedsfunktioner på plads. For eksempel, Windows tilbyder nyttige tilgængelighedsværktøjer til brugere, og det er allerede almindeligt for de fleste YouTube-videoer at tilbyde undertekster eller billedtekster. Men vi kan altid forbedre tilgængeligheden.

Globalt design skaber bedre design. Jo flere mennesker, der kan engagere sig i dit design, jo mere succesfuldt er det, og jo større rækkevidde har det. Ikke alene er det godt for dig som designer at nå ud til flere mennesker, men det er bedre for verden, at færre mennesker udelukkes.

Design med WCAG-forholdet og tilgængelighedsfunktioner i dine designs vil have positive effekter på farvepaletter, typografivalg og tekststørrelser. Du ville ikke med vilje designe noget svært at læse, så hvorfor ville du ikke inkludere flere måder at skabe designs med bedre læsbarhed for alle mennesker?

Implementering af WCAG-forholdet i dine designs

Der er steder, hvor du kan tjekke WCAG-forholdet i dine designs, såsom dette kontrastkontrol internet side. Men du bør alligevel komme ind i praksis med at implementere tilgængelige designfunktioner i dit arbejde uden at stole på at kontrollere mod det absolutte minimum.

Det skal bemærkes, at kontrastretningslinjerne ikke gælder for logodesign. Dette skyldes, at logoer præsenteres i forskellige størrelser og ofte mod forskellige baggrunde. Det skader dig dog ikke at overveje WCAG-forholdet, når du designer logoer.

Farver med høj kontrast

Brug af farver med høj kontrast er en nem måde at tilføje inklusivitet til dine designs. Farver, der står i kontrast til hinanden, vil hjælpe dem med synshandicap og farveblindhed til at se dine designs bedre. Ikke nok med det, men selv folk uden synsforstyrrelser vil bedre se - og engagere sig i - dine designs.

Har du nogensinde prøvet at læse en lyserød tekst på en lysegrøn baggrund? Det er næsten umuligt. Men en mørkeblå tekst på en lys gul baggrund er meget nemmere at se og læse.

Farver med høj kontrast fungerer bedst, når du placerer tekst på en farvebaggrund, eller hvis du bruger små stier i dine illustrationer. Khroma er en AI-farvepaletgenerator, der kommer med en indbygget kontrastkontrol - en af ​​de mange fantastiske AI-værktøjer til at hjælpe dit grafiske design-workflow.

En god måde at kontrollere kontrasten på er ved at ændre dit design til gråtoner. Hvis du kan adskille farverne og forstå designet i sort og gråt, bør det også oversætte godt i dine valgte farver.

Tekststørrelse

Sammen med tekstfarver, der kontrasteres nok mod baggrundsfarver, bør din tekst i sig selv være stor nok til let at læse. WCAG-forholdet for stor tekststørrelse er 3:1.

Tekststørrelsen er ikke ens på tværs af al typografi, så stol ikke på en 12-punktsstørrelse - som typisk ses som minimumsstørrelsen for standardlæsbarhed - for alle skrifttyper. Test dem selv eller med brugertestere ved at vise eller udskrive designs i ægte størrelse. Hvis dine farver ikke kontrasteres så godt, vil større tekst hjælpe med læsbarheden, som en løsning.

Skrifttype læsbarhed

Det siger sig selv, men de skrifttyper, du vælger i dine designs, skal være letlæselige. Dekorative skrifttyper, kursive skrifttyper eller håndtegnede skrifttyper har ofte læsbarhedsproblemer. Heavy metal-bands er berømte for at bruge iboende svære at læse skrifttyper til for eksempel deres bandlogoer.

Du bør også overveje kerning og sporing, når du bruger din tekst til små designs. Bogstavafstand kan også påvirke den tilsigtede læsbarhed af ord.

Inklusive tilgængelighedsfaktorer

Mens kun farvekontrast, skriftstørrelse og læsbarhed af tekst i webdesign tages i betragtning i WCAG-forhold, bør du lave alle dine web- og grafiske designs med inklusivitet i tankerne.

Hvis du er en webdesigner, der arbejder med en programmør eller koder, skal du sikre dig, at du er det ved hjælp af HTML-teknikker, der hjælper med webtilgængelighed. Der er også tilgængelighedsfunktioner i Canva for at udvide rækkevidden af ​​dine designs med dit publikum.

Du bør ikke bare stoppe ved minimumskravene til WCAG-forhold; hvis du har kontrol over at tilføje alt-tekst til billeder, billedtekster til lyd- eller videofiler eller endda hjælpsom formulering af tekst til hyperlinks – som læses højt af skærmlæsere – du bør gå over og ud over. Inkludering af tilgængelighedsfunktioner udelukker ikke nogen målgruppe – det inviterer kun flere mennesker ind.

Design med WCAG-forholdet forbedrer design for alle

Standarderne for webdesign kommer fra World Wide Web Consortium, et fællesskab, der hjælper med bedste praksis på tværs af nettet. Konsortiet udviklede Web Content Accessibility Guidelines, som webdesignere bør følge. Dette giver en forholdsstandard for synlighedstjek ved design til internettet.

At følge disse retningslinjer og forholdsstandarder betyder, at dine webdesigns kan tilgås af flere mennesker.