Hva er WCAG-forholdet? Hvorfor du bør implementere det i designene dine

Web Content Accessibility Guidelines (WCAG) er retningslinjer for tilgjengelighet for digital design og webdesign. Å følge disse retningslinjene sikrer at fargene er kontrastfylte nok til å hjelpe de med synshemming til å se og lese designene dine på riktig måte. Dette går også hånd i hånd med typografisk størrelse, for å sikre lesbarheten sammen med fargene.

I en verden som burde være mer inkluderende, vil det å legge til tilgjengelige elementer i designene dine bare heve arbeidet ditt og tillate deg å dele det med flere mennesker.

Hva er WCAG-forholdet?

WCAG står for Retningslinjer for tilgjengelighet for nettinnhold. WCAG hjelper alle som designer eller lager for nettet eller internett for å sikre at designene deres treffer tilgjengelighetsmål. Dette betyr at designene dine kan nytes og brukes av alle, uten å ekskludere de med synshemming eller andre funksjonshemninger når det er mulig.

WCAG-forholdet setter minimumsforholdene for å treffe måltilgjengelighet. Dette inkluderer fargekontrast og tekststørrelse, som begge sikrer at de med synshemninger har en bedre sjanse til å se, samhandle med og bruke designene dine. Ikke bare hjelper det å treffe WCAG-forholdet de med synshemninger, men det øker også brukeropplevelsen for alle nettbrukere.

De World Wide Web Consortium utvikler standarder for webutvikling. Selv om det ikke er noen faste regler for netttilgjengelighet, setter WCAG en standard som enhver webdesigner bør følge.

Når du tester kontrastforhold, foreslår WCAG en vurdering fra A til AAA. En A-vurdering viser de laveste kontrastnivåene. AA er kontrastnivåer i mellomområdet med et forhold på 4,5:1 – regnet som minimumsforholdet. Til slutt er AAA det høyeste kontrastnivået. Hvis du designer for alle, er kontrastnivåene dine best når du er mellom et AA- og AAA-område.

Hvorfor er WCAG-forholdet viktig i grafisk og webdesign?

Grafisk design og webdesign skal ikke bare få informasjon til å se pen ut. Informasjonsdesign informerer massene – dette betyr å gjøre informasjonen din tilgjengelig for alle. WCAG-implementering sikrer tilgjengelige design for de med synshemming, dysleksi, nevrodivergens eller noe som påvirker noens syn eller leseevne.

Web og digital design – så vel som programmering – har allerede etablerte tilgjengelighetsfunksjoner på plass. For eksempel, Windows tilbyr nyttige tilgjengelighetsverktøy for brukere, og det er allerede vanlig for de fleste YouTube-videoer å tilby undertekster eller bildetekster. Men vi kan alltid forbedre tilgjengeligheten.

Global design skaper bedre design. Jo flere som kan engasjere seg i designet ditt, jo mer vellykket er det, og jo større rekkevidde har det. Ikke bare er det bra for deg som designer å nå flere mennesker, men det er bedre for verden at færre mennesker blir ekskludert.

Design med WCAG-forholdet og tilgjengelighetsfunksjoner i designene dine vil ha positive effekter på fargepaletter, typografivalg og tekststørrelser. Du ville ikke med vilje designe noe vanskelig å lese, så hvorfor ville du ikke inkludere flere måter å lage design med bedre lesbarhet for alle mennesker?

Implementering av WCAG-forholdet i designene dine

Det er steder du kan sjekke WCAG-forholdet i designene dine, for eksempel dette kontrastkontroll nettsted. Men du bør sette deg inn i praksisen med å implementere tilgjengelige designfunksjoner i arbeidet ditt uansett uten å stole på å sjekke mot minimum.

Det skal bemerkes at kontrastretningslinjene ikke gjelder logodesign. Dette skyldes at logoer presenteres i varierende størrelser og ofte mot ulik bakgrunn. Det skader deg imidlertid ikke å vurdere WCAG-forholdet når du designer logoer.

Farger med høy kontrast

Å bruke høykontrastfarger er en enkel måte å legge til inkludering til designene dine. Farger som står i kontrast mot hverandre vil hjelpe de med synshemming og fargeblindhet til å se designene dine bedre. Ikke bare det, men selv personer uten synsforstyrrelser vil bedre se – og engasjere seg i – designene dine.

Har du noen gang prøvd å lese en lys rosa tekst på en lysegrønn bakgrunn? Det er nesten umulig. Men en mørkeblå tekst på lys gul bakgrunn er mye lettere å se og lese.

Høykontrastfarger fungerer best når du plasserer tekst på en fargebakgrunn eller hvis du bruker små baner i illustrasjonene dine. Khroma er en AI-fargepalettgenerator som kommer med en innebygd kontrastkontroll – en av de mange flotte AI-verktøy for å hjelpe arbeidsflyten din for grafisk design.

En fin måte å sjekke kontrasten på er å snu designet til gråtoner. Hvis du kan skille fargene og forstå designet i svart og grått, bør det også oversettes godt i dine valgte farger.

Tekststørrelse

Sammen med tekstfarger som kontrasteres nok mot bakgrunnsfarger, bør selve teksten være stor nok til å leses enkelt. WCAG-forholdet for stor tekststørrelse er 3:1.

Tekststørrelsen er ikke lik på tvers av all typografi, så ikke stol på en 12-punktsstørrelse – som vanligvis blir sett på som minimumsstørrelsen for standard lesbarhet – for alle fonter. Test dem ut selv eller med brukertestere ved å vise eller skrive ut design i ekte størrelse. Hvis fargene dine ikke er så godt kontrastert, vil større tekst hjelpe lesbarheten, som en løsning.

Skriftlesbarhet

Det sier seg selv, men skriftene du velger i designene dine må være lett lesbare. Dekorative skrifter, kursive skrifter eller håndtegnede skrifter har ofte problemer med lesbarhet. Heavy metal-band er kjent for å bruke iboende vanskelige å lese skrifttyper for bandlogoene deres, for eksempel.

Du bør også vurdere kerning og sporing når du bruker teksten til små design. Bokstavavstand kan også påvirke den tiltenkte lesbarheten til ord.

Inkluderende tilgjengelighetsfaktorer

Mens bare fargekontrast, skriftstørrelse og lesbarhet av tekst i webdesign vurderes i WCAG-forhold, bør du lage alle dine web- og grafiske design med tanke på inkluderende.

Hvis du er en webdesigner som jobber med en programmerer eller koder, sørg for at du er det ved hjelp av HTML-teknikker som hjelper til med netttilgjengelighet. Det er også tilgjengelighetsfunksjoner i Canva for å utvide rekkevidden til designene dine med publikum.

Du bør ikke bare stoppe ved minimumskravene for WCAG-forhold; hvis du har kontroll over å legge til alt-tekst til bilder, bildetekster til lyd- eller videofiler, eller til og med nyttig formulering av tekst for hyperkoblinger – som leses opp av skjermlesere – du bør gå over og bortenfor. Å inkludere tilgjengelighetsfunksjoner ekskluderer ikke noen målgruppe – det inviterer bare flere personer inn.

Design med WCAG-forholdet forbedrer design for alle

Standardene for webdesign kommer fra World Wide Web Consortium, et fellesskap som hjelper til med beste praksis over hele nettet. Konsortiet utviklet retningslinjer for tilgjengelighet for nettinnhold, som webdesignere bør følge. Dette gir en forholdsstandard for synlighetskontroller når du designer for nettet.

Å følge disse retningslinjene og forholdsstandardene betyr at webdesignene dine kan nås av flere mennesker.