Kontrast

Sikre at tekst er lesbar mot bakgrunn.

Krav

  • Det må være tilstrekkelig kontrast mellom tekst og bakgrunn. 
  • (Tilby gjerne en høykontrastversjon av nettstedet)

Hva sier uutilsynet om dette?

Kontrast i Museum24

Museum24 definerer i seg selv ikke farger på nettstedene, men tilbyr hvert nettsted å ha et hvilket som helst designuttrykk og et fritt utvalg av farger (tekst, knapper/lenker, bakgrunner) som kan stilles inn på mange ulike nivåer (side, seksjon, modul). 

Det er derfor opp til kundene (museene) å sikre at faste elementer eller redaksjonelt valgbare kombinasjoner i designet ikke skaper brudd med reglene. Det er også viktig at redaksjonene klarer å bruke verktøyet på en slik måte at man oppfyller kravene, i tilfeller hvor de kan påvirke dette.  Dette kan ivaretas med rutiner og opplæring. 

Nedenfor følger noen eksempler der det typisk kan oppstå problemer med kontrast om det er noe grunnleggende feil med utvalget av fargekombinasjoner eller om man ikke klarer å benytte verktøyet på en hensiktsmessig måte.

Tekst over en bakgrunnsfarge

Viktig å unngå uheldige kombinasjoner i hver enkelt kundes designprofil. I dette eksemplet er det ikke et problem!

Bilde viser skøyteis på Mjøsa (Foto/Photo)

Tekst over media

Bakgrunn må egne seg og tekst plasseres på passende sted. Flere innstillinger er tilgjengelige for å skape kontrast; overlay, grafient, linjer bak tekst etc.  

Bildet viser en fin himmel (Foto/Photo)

Det finnes en rekke innstillinger for å sikre nødvendig lesbarhet/kontrast.

Hvordan dette kan testes?

Utviklerverktøyet i Chrome (f12) viser kontrast når man i "inspect-mode" peker over tekster i skjermbildet. Det finnes også andre plugins eller testverktøy som kan vise kontrast-tallene som rapporter eller oppsummert pr. side:

  • ​WCAG - Contrast checker
  • Lighthouse

For kontrast over bilder vil det avhenge av hvor på bilde teksten plasseres etc og dette kan igjen variere i forhold til skjermstørrelse, så det er komplekst å få en entydig teknisk sjekk av dette. 

Vurderinger og forbedringer

  • Alle kunders design må støtte at tekst og lenker har nødvendig kontrast mot de mulige bakgrunnsfargene. Størrelse på tekst kan i noen tilfeller redde enkelte problematiske kombinasjoner. Mye er gjort om dette grunnleggende er på plass for alle kunder.
  • Prøve å unngå typiske problemområder:  menyer som vises med transparent bakgrunn over media og liknende?
  • Innføre mimimumsvirkemidler for kontrast mellom tekst og bakgrunnsbilder? Mer bruke av tekstskygger..
  • Banner-editor (og seksjonsintroinnstillinger) kan minne bruker på å sjekke kontrast og at det finnes kontrastvirkemidler. Forbedre kontrastvirkemidlene (bakgrunn bak tekstlinjer etc)
  • Vurdere å innføre en kontrastsjekker integrert i løsnignen, noe ala https://www.brandwood.com/a11y/