Kontrast

God kontrast mellom tekst og bakgrunn er viktig for en student med nedsatt syn. Det anbefales å bruke svart skrift på hvit bakgrunn, det gir best kontrast. Det må også være god kontrast mellom grafiske elementer som skal skilles fra hverandre.

Husk at kun farge ikke er godt nok for å skille mellom elementer for studenter som har nedsatt fargesyn.

Kontrast for tekst

For å sikre god lesbarhet skal all tekst ha tilstrekkelig kontrast mot bakgrunnen. Dette gjelder både teksten i selve eksamensoppgavene og i plattformen. Det er for eksempel et krav at lenker i bunnteksten skal ha stor nok kontrast mot bakgrunnen. Om teksten på en grønn "Lever inn eksamen"-knapp har for liten kontrast, vil en student med nedsatt syn kunne ha problemer med å oppfatte hvilken funksjon knappen har.

Kravet for kontrast er minimum 4,5:1, og gjelder den visuelle presentasjonen av tekst, samt bilder av tekst. Unntaket er tekst og bilder av tekst som er større enn 24 piksler høy, og fet skrift som er minst 19 piksler høy. Her er kontrastkravet minst 3:1.

Elementer som ikke er underlagt kontrastkrav, er:

  • Inaktive brukergrensesnittkomponenter
  • Tekst som er ren dekorasjon
  • Tekst som utgjør en del av et bilde som inneholder annet vesentlig visuelt innhold
  • Logoer eller varemerkenavn

Kontrast for ikke-tekstlig innhold

Kontrastkravet for ikke-tekstlig innhold som ligger inntil hverandre er minimum 3:1. Det omfatter alt ikke-tekstlig innhold i eksamensløsningen, som f.eks. synlig fokus, ikoner og tilstøtende farger, som fargene på kartet på bildet under.

                Tegning av et kart over Mellom-Amerika, der de ulike landene har lav kontrast med tilstøtende farger

Alle interaktive elementer i eksamensløsningen skal ha synlig fokus. Interaktive elementer vil si alt innhold som ikke er statisk tekst, som for eksempel knapper, lenker, tekstfelt, etc. Eksempelvis skal en knapp som har tastaturfokus også ha en visuell markør som formidler at elementet har fokus. Om det mangler synlig fokus, vil tastaturnavigering bli utilgjengelig for seende studenter ettersom de ikke vil ha oversikt over hvor i eksamensløsningen tastaturfokus er.

Eksempler på synlig fokus er: å legge på en ramme, en understreking (typisk for lenker), endre farge på enten teksten eller bakgrunnen, eller tilføre skygge.

Synlig fokus legges inn ved hjelp av CSS med pseudoklassene ":focus" eller ":focus-visible" for tastaturfokus, og ":hover" for når musepeker holdes over elementet.

Ved tastaturnavigering kan dette testes ved å:

  • Flytte fokus til elementet med Tabulator
  • Sjekk at kanten eller teksten/bakgrunnen endrer farge
  • Sjekk at kant- eller tekst/bakgrunnsfargeendringene fjernes når elementet mister fokus.

Teknikk C15, W3C (engelsk) gir en komplett forklaring på hvordan synlig fokus lagt inn ved hjelp av CSS, kan testes med både musepeker og tastatur.

Verktøy for å måle kontrast

Det finnes flere nyttige verktøy for å måle kontrast.

Et av de vanligste, som både er gratis og enkelt å bruke, er Colour Contrast Analyzer (CCA). Se også lenken: Colour Contrast Analyzer (CAA 2.5.0) | GitHub.

Siteimprove Accessibility Checker (Siteimprove) er et automatisk verktøy som identifiserer elementer som bryter med kravet for kontrast og hvilket kontrastforhold disse elementene har.

Del på Facebook Del på Twitter Del på e-post