Skip to main content

God kontrast og fargebruk

Kontrast og fargebruk er viktig for å kunne oppfatte tekst og annen informasjon. Det er spesielt viktig for svaksynte elever og elever med fargeblindhet som kan oppleve at det ikke er mulig å oppfatte innholdet i digitale læremidler på grunn av feil fargebruk eller manglende kontrast. God kontrast og fargebruk er imidlertid nyttig for alle elever. Digitale læremidler brukes i mange kontekster i klasserommet, hjemme eller til og med utendørs. Disse eksterne forholdene er også med på å påvirke hvor synlig innhold på skjerm er. I denne artikkelen gis det forklaring og veiledning på hvordan digitale læremidler kan skapes på en måte som sørger for god kontrast og fargebruk.

Relevante krav​

  • 1.4.1
    Ikke bruk presentasjon som bygger utelukkende på farge.

  • 1.4.3
    Sørg for at det er tilstrekkelig kontrast mellom tekst og bakgrunn.

  • 1.4.11
    Ikke-tekstlig innhold skal ha et kontrastforhold på minst 3:1 mot farger som ligger ved siden av.

Brukergrupper​

  • Svaksynte elever
  • Elever med fargeblindhet
  • Elever med lesevansker
  • Elever med kognitive utfordringer
  • Elever med situasjonsbaserte utfordringer (f.eks. sterkt lys, refleksjoner)

Formål​

Formålet med kravene er å sikre god synlighet for tekstlig og ikke-tekstlig innhold, slik at alle elever, uavhengig av synsevne eller situasjon, kan oppfatte og forstå innholdet effektivt.

Enkelte læreplanmål, spesielt i Kunst og håndverk, som er knyttet til farger kan være grunnlag for utforming som ikke følger kravene for kontrast og fargebruk. Dersom farger og kontrast brukes på en måte som bryter med kravene må dette forankres i det pedagogiske formålet. Les mer om pedagogisk formål

Utviklerrollen​

Som utvikler må du sørge for at tekst og ikke-tekstlig innhold har tilstrekkelig kontrast mot bakgrunnen. Vi kan komme langt i arbeidet med kontrast og fargebruk ved å sjekke farger med en kontrastsjekker. På den måten kan vi sjekke at kontrasten ligger innenfor de verdiene som er definert i WCAG 2. I tillegg til å kontrollere konstrastverdier er det også viktig å bruke farger på riktig måte. Informasjon skal ikke formidles med farge alene. Et eksempel på dette kan være et rødt lys som dukker opp ved feil i en quiz eller spill. For å overholde kravene er det i dette eksempelet nødvendig å formidle at det er feil med tekst, lyd eller på en annen måte i tillegg til rødfargen.

  • Sjekk kontrastforhold med tilgjengelige verktøy som Multi-Color Contrast Checker | Norsk regnesentral (Åpnes i ny fane).

  • Tekst skal ha et minimum kontrastforhold på:

    • 4.5:1 for normal tekst
    • 3:1 for stor tekst (18pt og større, eller 14pt fet eller større)

  • Implementer CSS og HTML slik at det blir enkelt for redaktører og designere å bruke god kontrast.

    Ved å følge rådene ovenfor er det mulig å kontrollere kontrast mot kravene som gjelder i norsk lov i henhold til WCAG 2. Det er imidlertid flere svakheter med tilnærmingen til kontrast som benyttes i WCAG 2. I det pågående arbeidet med WCAG 3 er det skissert opp en løsning som tar flere faktorer i betraktning i beregningen av god kontrast. Vi anbefaler å sette seg inn i APCA -modellen (Advanced Perceptual Contrast Algorithm) for kontrast og benytte kontrast som kan brukes av så mange elever som mulig. Noen tilnærminger for å oppnå dette er:

  • Implementering av brukerstyrt kontrast

    • Høykontrastmodus
    • Eget fargevalg

  • Brukerteste med svaksynte brukere

  • Undersøke forskjellige modeller for kontrast som APCA (Åpnes i ny fane).

Beste praksis​

  • Bruk etablerte verktøy som Multi-Color Contrast Checker | Norsk regnesentral (Åpnes i ny fane) for å verifisere kontrast.
  • Bruk tekst, lyd eller andre medium i kombinasjon med farger når fargen formidler informasjon.
  • Innad i bilder og video gjelder ikke kravet om kontrast, med mindre det er tekstlig eller grafisk informasjon i bildet eller videoen.

Feller å unngå​

  • Ikke anta at fargekombinasjoner ser like bra ut på alle skjermer eller i alle lysforhold.
  • Unngå tekst direkte over kompliserte eller varierte bakgrunnsbilder uten ekstra tiltak.
  • Unngå farger som eneste måte å formidle informasjon på.

Tips og triks​

  • Velg enkle fargepaletter med god kontrast. Sammensatt innhold med mange farger gjør det vanskeligere å bevare god kontrast.
  • Test farger og kontrast med forskjellige enheter, skjermer og ekte brukere i prosessen med utvikling og produksjon av det digitale læremidlet.
  • Bruk kontrastverktøy tidlig i designprosessen, ikke bare ved ferdigstillelse.

Les mer​