God kontrast og riktig fargebruk er noe av det aller viktigste når du lager et design, enten det er en nettside, en PowerPoint-presentasjon eller en illustrasjon. Når kontrasten er god nok og fargene er valgt strategisk, vil designet kunne nå mange elever - også endel av de med nedsatt syn eller fargesvakhet. Faktisk er kontrast og farge noe av det enkleste å gjøre noe med, men det vi ser oftest feil på når det gjelder universell utforming.

Hva er fargesvakhet?

Tre brune bobler, med teksten rød, grønn og brun. Ifølge Blindeforbundet er 5-8 % av alle gutter og menn fargesvake. Det er viktig at vi som underviser er klar over dette. Veldig ofte vil det være elever på skolen som vil ha problemer med å skille mellom rødt og grønt. Andre har problemer med gult og blått. En del elever forstår at de er fargesvake når dette gjennomgås i naturfagundervisning. Andre kan faktisk bli voksne før de forstår at de ikke ser farger på samme måte som andre.

Illustrasjonen ved teksten viser hvordan rødt, grønt og brunt kan fremstå for en som er rød-grønn fargesvak. Når disse fargene brukes sammen, blir det en utfordring å skille objekter fra hverandre. Turistforeningens røde T-er er for eksempel ikke synlig dersom de tegnes på en brun-grå stein. Og dersom lyskryss bare bestod av ei lampe, ville det ha vært umulig å se når det var lov til å kjøre.

Hva er nedsatt kontrastsyn?

En del elever har nedsatt kontrastsyn. Fordi øynene ikke klarer å skille objekter med ulik lysintensitet, vil det være vanskelig å skille objekter fra hverandre. Dersom kontrasten er høy, går det bra. Men når kontrastene i omgivelsene blir nedsatt, kan aktiviteter bli vanskeligere for denne elevgruppen - enn for de med normalt syn. Hvis underviseren bruker for liten forskjell på tekst og bakgrunnsfarge i PowerPoint, kan det være umulig å se hva som står. Hvis noen har skrevet en tekst oppå et bilde, kan den bli uleselig for elevene med nedsatt kontrastsyn.

I det norske lovverket for universell utforming av IKT står det at:

kontrastforholdet mellom liten tekst og bakgrunn skal være minst i ratio 4,5:1, mens mellom stor tekst og bakgrunn skal det være minst ratio 3:1.
kontrastforholdet mellom lenker og bakgrunn, skal være minst i ratio 3:1.
kontrastforholdet mellom farger ved siden av hverandre i ikke-tekstlig innhold skal være minst ratio 3:1.
farge skal ikke være det eneste visuelle virkemidlet når man kommuniserer noe til en bruker

Slik måler du kontrast og farge

Du lurer kanskje på hvordan du kan undersøke verdiene for kontrastforhold som vi nevnte over, altså 4,5:1 og 3:1. Kontrastforhold mellom elementer kan og bør i mange tilfeller måles med spesialprogramvare. Verktøyet Colour Contrast Analyser (CCA) anbefales av UU-tilsynet. Her finner du også en simulator der du kan se hvordan fargene fremstår for fargesvake elever.

Huskeliste for god kontrast

Arbeidet med kontrast og farge gjelder for alle verktøy der du lager innhold til elever eller på vegne av skolen og ut til allmennheten. Du må for eksempel være bevisst på kontrast og farge når du skriver eller lager illustrasjoner i Word, PowerPoint, OneNote, filmer og på nettsider.

Kontrast mellom tekst og bakgrunn

Sørg for at kontrasten mellom brødtekst og bakgrunn er minst i forholdet 4,5:1. Dette gjelder fet tekst som er under 14 pt / 18,5px eller vanlig tekst som er under 18 pt / 24px. I praksis betyr dette at du må velge en mørk nok farge når du skriver på lys bakgrunn, eller motsatt. Forskjellen mellom den mørke og den lyse fargen må være stor nok. Dersom du er usikker på om kontrasten er høy nok, bør du måle dette.
Kontrasten mellom overskrifter og bakgrunn i teksten din, skal være minst i forholdet 3:1. Dette gjelder fet tekst som er 14 pt / 18,5px eller større, samt vanlig tekst som er 18 pt / 24px eller større. Du kan altså ha litt svakere kontrast mellom overskrifter og bakgrunnen, enn du kan på brødtekst. Dette er rett og slett fordi elementer blir tydeligere jo større de blir.

Nedenfor viser vi skrift med tre ulike blåfarger brukt på overskrift (18 pt) og vanlig brødtekst (12 pt). Som du ser, er det av og til hårfine grenser mellom hva som er bra, hva som er ok og hva som ikke er lov. Grensene for hvor lys teksten kan være, avhenger i tillegg til bakgrunnsfarge, altså av fontstørrelse.

Overskrift 18 pt #2F80CC (BRA), Overskrift 18 pt #3998F5 (OK), Overskrift 18 pt #3998F5 (IKKE lov).

Brødtekst 12 pt #1F4D79 (BRA), Brødtekst 12 pt #2878C4 (OK), Brødtekst 12 pt #2F80CC (IKKE lov).

Dekorative bilder med tekstelementer
Dersom du har brukt tekstelementer på bilder som kun er dekorative, trenger du ikke tenke på kontrastforhold.

Viktige bilder med tekstelementer
Men dersom bildet har en pedagogisk funksjon, og skriften er for liten eller for utydelig, bør du gjøre noe med dette. Vi ser ofte dette i skjermbilder av statistiske fremstillinger av ulike slag. Slike illustrasjoner bør enten endres eller suppleres med god, beskrivende tekst som alle kan se. Sjekk også om oppløsningen er så god at innholdet bevares godt når eleven zoomer inn 400 % ved 1280 pikslers bredde. Dette kommer vi nærmere tilbake til senere i modulen.

Vær bevisst på fargebruk

Pyramide med bokstavene A, B og C med tre ulike farger. En sort kant. Farger som ligger ved siden av hverandre i et brukergrensesnitt eller i grafiske objekter, skal ha et kontrastforhold på minst 3:1.

1. Velg farger med omhu når du skal lage søylediagram, kakediagram eller andre grafiske fremstillinger av statistikk. Det skal være lett å se forskjellen på ulike kaker i kakediagrammet, også for en elev med rød-grønn fargesvakhet. Kanskje bør du markere kaker med gul eller sort kant, slik vi har gjort på illustrasjonen ved teksten?
2. Pass generelt på at ikke fargene rødt og grønt står ved siden av farger de glir over i, slik som brunt.
3. Maler og designforslag i Office-pakken er dessverre ikke alltid universelt utformet. Bruk derfor din egen kunnskap og dømmekraft når du velger farger på tekst, bakgrunner, SmartArt, tabeller og andre elementer i verktøy som Word, PowerPoint og OneNote.
4. Dersom du illustrerer mye eller lager animasjoner, bør du vurdere å lage egne fargepaletter med godt gjennomtenkte kombinasjoner. Det finnes mange ressurser på dette på nett, både paletter som kan være til inspirasjon og simulatorer der du kan gjøre tester.

Diskuter med kolleger

Skog kommune har laget en ny fargeprofil. Den består av fem grønnfarger, i ulike grader - fra lys til mørk grønn. Hva er utfordrende med fargevalget?
Hvilke bakgrunnsfarger tror dere ansatte i Skog kommune kan skrive på med hvit tekst? Hvilke kan man skrive på med sort tekst? Vi har illustrert dette nedenfor, men dere skal finne ut hvilke fargekombinasjoner som er lovlige. Bruk gjerne Colour Contrast Analyser (CCA).

Fem ulike grønnfargen, skrevet på med henholdsvis hvit tekst og sort tekst. Noe lovlig, noe ulovlig.