Publisert: 26.09.11

Å ta hensyn til kontrastnivåer er enkelt

W3C sine retningslinjer for universell utforming har eksistert i lang tid, men det er først etter at diskriminerings- og tilgjengelighetsloven for IKT trådde i kraft i sommer (2011) at jeg som webdesigner merket fokuset rundt dette for alvor. Nå er det mange ting det skal tas hensyn til når en designer/utvikler nettsider men nylig måtte jeg sette meg inn i dette med kontrastforhold – noe som både er interessant og veldig enkelt å ta hensyn til.

Formålet med den nye loven er å:
“…fremme likestilling og likeverd, sikre like muligheter og rettigheter til samfunnsdeltakelse for alle, uavhengig av funksjonsevne, hindre diskriminering på grunn av nedsatt funksjonsevne og bidra til nedbygging av samfunnsskapte funksjonshemmede barrierer og hindre at nye skapes”

Som sagt er dette med kontrastforhold kun én av mange universell utforming kriterier du som webdesigner må tenke på neste gang du lager en nettside, som for eksempel:

• Bruk alternativ tekst på bilder
• Bruk overskrifter med semantisk oppbygning
• Bruk beskrivende tekst på lenker (unngå “les mer”, “klikk her” osv)
• Bruk beskrivende tekst på overskrifter
• Korrekt merking av tabellfelter
• Korrekt merking av skjemafelter
• Skalering av tekst
• Tydelig lenkestil
• Intuitiv tab-rekkefølge

Du kan lese mer om dette på:
W3C: Web Content Accessibility Guidelines
DIFI: Universell utforming

Nylig jobbet jeg på et stort web prosjekt for en stor offentlig aktør.
Det var i forbindelse med dette prosjektet at jeg måtte sette meg litt dypere inn i hva reglene rundt kontrast faktisk dreide seg om. Frem til nå har dette vært noe jeg har vært fult klar over, men tatt litt på feelingen (kremt), men det finnes faktisk enkle metoder og verktøy for å være sikker på at en er innenfor de reglene som er satt.

Kontrastverdien måles i noe som kalles luminans (Relative Luminance), og er lysstyrken til et punkt i et sammensatt fargebilde. Med andre ord en verdi for å kontrollere at kontrastforholdet mellom tekst og grafikk/bilder er tilstrekkelig for personer som har synshemming.
Verdiene går fra 1:1 (ingen kontrast, for eksempel sort tekst på sort bakgrunn) til 21:1 (svart tekst på hvit bakgrunn).
Disse verdiene kan du regne ut gjennom å bruke en avansert matematisk formel, eller ved å bruke denne super enkle Contrast Ratio Calculator.

Disse kontrastforholdene deles inn i tre kontrastgrupper med tanke på størrelse på teksten.

3:1 Er minimum kontrast for stor tekst (18px normal tekst eller 14px bold).
4.5:1 Er minimum kontrast for normal tekst (f.eks bildetekster, korte tekster)
7:1 Er anbefalt for lengre løpende tekster som brødtekst etc.

Jeg har for eksempel i noen tilfeller tidligere brukt den lysegrå fargen #999999 på hvit bakgrunn. Dette har en kontrast verdi 2.8:1, som da har en for lav kontrastverdi.
Men om vi endrer fontfargen til #969494 måler verdien akkurat 3:1 og dette uten at det påvirker designet i noen grad. Som du kan se til høyre utgjør dette minimalt med forskjell men kan være avgjørende for en med synshemming.

Jeg har også i mange tilfeller oppdaget at det å endre fargeverdien fra å være under 3:1 til over 4.5:1 ikke nødvendigvis vil ha noen negativ påvirkning på designet.

Å sjekke fargekombinasjoner en er usikker på mens en jobber med et design er forholdsvis enkelt og ikke spesielt tidkrevende.  Og dersom du har behov for å sjekke kontrastforhold i en allerede eksisterende webløsning er Firefox plugin’et  Accessibility toolbar meget bra.

Den skanner gjennom CSS’en og lister ut alle kontrastverdiene den finner. Den highlighter også utlistede elementer på nettsiden, så det er enkelt å se hvor det må gjøres utbedringer.


For eksempel testet jeg denne bloggen, og fant ut at les mer knappene på forsiden ikke hadde stor nok kontrast. (Denne knappen vurderte jeg på et tidspunkt å fjerne, men valgte å beholde den statistikken viser at besøkende faktisk klikker på den). Den er nå endret og holder nå mål!

Skrevet av: Jens Fredrik Allworthy, 26.09.11 21:32

Postet i: Web

og tagget med: , , ,

Flere innlegg

2 kommentarer til 'Å ta hensyn til kontrastnivåer er enkelt'

Trackbacks

  1. Camilla Kim Kielland:

    Å ta hensyn til kontrastnivåer i webdesign er enkelt!
    Blogg: http://t.co/IwY8yVuS

  2. John Erik Klausen:

    Å ta hensyn til kontrastnivåer er enkelt http://t.co/Qz1aK2TP via @Allverdig #universellutforming

Skriv en kommentar: