KORT FORTALT: Ikke-tekstlig innhold skal ha et kontrastforhold på minst 3:1 mot farge(r) som ligger ved siden av.
Tolking
Uu-tilsynets forståelse av det aktuelle kravet. Tolkingen er basert på en juridisk og uu-faglig vurdering og avveining av rettskildene, inkludert W3Cs normative og informative kilder til WCAG (W3C, engelsk). Viktige kilder er suksesskriteriet, WCAGs ordliste, Uu-tilsynets praksis, formål, forståartikkelen, teknikker og failures.
Krav til samsvar
Uu-tilsynets beskrivelse av hva som skal til for å oppfylle det aktuelle kravet. Ofte består det også av ulike delkrav. Vanligvis kan kravet møtes på flere måter.
Testregel
Uu-tilsynets framgangsmåte (prosedyre) for å teste og ta stilling til om krav til samsvar er oppfylt eller ikke. Vi har ofte flere testregler knyttet til et krav.
Den visuelle presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot farge(r) som ligger ved siden av.
- Brukergrensesnittkomponenter: Visuell informasjon som kreves for å identifisere brukergrensesnittkomponenter og tilstander, unntatt inaktive komponenter eller der utseendet på komponenten er bestemt av brukeragenten og ikke endret av produsenter av nettinnhold.
- Grafiske objekter: Deler av grafikk som kreves for å forstå innholdet, unntatt tilfeller der en bestemt presentasjon av grafikk er avgjørende for informasjonen som blir formidlet.
Formål
Hensikten med kravet er å sikre at aktive brukergrensesnittkomponenter og meningsbærende grafikk er mulig å oppfatte, uten bruk av hjelpemiddelteknologi.
Brukerbehov
Kravet er ment å ivareta personer med nedsatt syn.
Tilsynets tolking
Suksesskriteriet stiller krav til tilstrekkelig kontrast for ikke-tekstlig innhold mot farge(r) som ligger ved siden av.
Kravet til kontrast gjelder etter ordlyden bare dersom visuell informasjon i det ikke-tekstlige innholdet kreves (er nødvendig) for å identifisere aktive brukergrensesnittkomponenter og indikere tilstander eller å forstå grafiske objekter.
Etter forståartikkelen regulerer kravet også visuell informasjon som kreves for å forstå hvordan en brukergrensesnittkomponent kan betjenes. Dette kan for eksempel være en pil som viser brukeren at et skjemaelement er en nedtrekksliste.
Brukere med moderat nedsatt syn skal kunne se og skille fra hverandre visuell informasjon som har betydning for bruk og forståelse av det ikke-tekstlige innholdet.
Etter ordlyden regulerer kravet to situasjoner:
- Visuell informasjon som kreves for å identifisere aktive brukergrensesnittkomponenter og hvilken tilstand de har.
- Eksempler på brukergrensesnittkomponenter er blant annet lenker, knapper, tekstfelt og trekkspill.
- Eksempel på tilstand er at komponenten i fokus, er valgt eller utvidet.
- Grafiske objekter, vil ifølge ordlyden si, deler av grafikk som er nødvendig for å forstå innholdet.
- Eksempler på grafiske objekter er frittstående ikoner og linjer i en graf.
Begrepene Presentasjon, Kontrastforhold, Brukergrensesnittkomponenter, Tilstander og Avgjørende er definert i WCAGs ordliste.
Unntak
Følgende ikke-tekstlig innhold er etter ordlyden i suksesskriteriet unntatt:
- Inaktive brukergrensesnittkomponenter
- Utseendet til den aktuelle brukergrensesnittkomponenten er bestemt av brukeragenten, og ikke endret av innholdsprodusenten
- En bestemt presentasjon av grafikk er avgjørende for informasjonen som blir formidlet
Forståartikkelen beskriver og forklarer en rekke tilfeller.
Aktive brukergrensesnittkomponenter
For brukergrensesnittkomponenter som brukeren kan samhandle med (aktive brukergrensesnittkomponenter) må visuell informasjon som er nødvendig for at brukeren kan
- identifisere komponenten og
- hvordan den skal betjenes
ha kontrast på minst 3,0:1 mot direkte tilgrensende farger.
Tilsvarende gjelder informasjon som viser komponentens tilstand, for eksempel om den har fokus eller er valgt.
Tilstander
I WCAGs ordliste er Tilstander definert slik:
Dynamisk egenskap som uttrykker egenskaper ved en brukergrensesnittkomponent som kan endre seg som svar på en brukerhandling eller automatiske prosesser. Tilstander påvirker ikke typen komponent, men representerer data forbundet med komponenten eller brukerinteraksjonsmuligheter.
Eksempler på tilstander er fokus, pekeren over (hover), valgt, trykk, kryss, besøkt/ikke besøkt og vis/skjul.
Kantlinjer
Suksesskriteriet stiller ifølge forståartikkelen i utgangspunktet ikke krav om at komponenten skal ha kantlinjer eller lignende for å vise trykkområde. Dette gjelder med mindre rammen er den eneste måten brukere kan identifisere komponenten på.
Kontrast mot farger som ligger ved siden av hverandre
Ifølge ordlyden gjelder kravet «for farge(r) som ligger ved siden av [hverandre].» Dette er direkte tilgrensende farger, som er nødvendige å skille fra hverandre visuelt, for å identifisere brukergrensesnittkomponenter eller tilstander eller deler av grafikk som er nødvendig for å forstå innholdet.
Det er for eksempel mulig å ha en ramme rundt et grafisk objekt for å skille det fra bakgrunnen. Da kan man måle kontrast enten mellom fyllfargen i objektet og bakgrunnen, eller mellom rammen og bakgrunnen. Det er tilstrekkelig at én av disse har kontrast på minst 3:1.
Forståartikkelen har flere ulike eksempel på hva begrepet betyr, både for komponenter og tilstander.
Graderte farger
Graderte farger påvirker og kan redusere den opplevde kontrasten mellom farger som ligger ved siden av hverandre, og det kan være vanskelig å teste. Hvis innholdet ligger på gradert bakgrunn, skal en måle den svakeste kontrasten.
Dersom kontrasten er svakere enn 3:1, skal en anta at bakgrunnsfargen er usynlig og stille seg spørsmålet; er objektet fortsatt mulig å forstå? Hvis objektet ikke er mulig å forstå, er det brudd på kravet.
Dynamisk ikke-tekstlig innhold
Ikke-tekstlig innhold kan være dynamisk, der kontrasten varierer eller viser mer informasjon når innholdet får tastaturfokus eller musepekeren holdes over.
For at brukeren skal kunne oppfatte det dynamiske innholdet, må kravet oppfylles både før innholdet får fokus og når det har fokus, enten med hjelp av tekst eller ved å øke kontrasten for det grafiske objektet som trer fram.
Infografikk
På nettet brukes infografikk ofte til å vise omfattende grafikk som kan bestå av utsagn, bilder, diagrammer eller andre måter å formidle sammensatte data. Hvert enkelt element i en infografikk behandles som ett sett grafiske objekter, uavhengig av om det er én fil eller separate filer.
Infografikk kan bruke tekst for å redusere antallet grafiske objekter som er nødvendig, for å forstå innholdet. Dette gjøres for eksempel ved å bruke tekst til å angi verdiene i et diagram eller et langt tekstalternativ.
Grafiske objekter
Grafiske objekter, som er nødvendig for å forstå innholdet, har en kontrast på minst 3:1 mot bakgrunnsfargen.
Grafiske objekter kan også inneholde andre grafiske objekter. Da skal de ulike objektene testes for kontrast. I diagram, regnes hver linje, stolpe, sektor eller lignende i diagrammet som et grafisk objekt. Det samme gjelder eventuelle bakgrunnslinjer i diagrammet. Disse objektene skal ha kontrast på minst 3:1 mot bakgrunnen.
Unntak der en bestemt presentasjon er avgjørende
Dersom en bestemt presentasjon av det ikke-tekstlige innholdet er av gjørende, gjelder ikke kravet.
Eksempler på dette er
- grafikk som er en del av en logo eller merkevare
- flagg
- bilder av personer eller uteområder
- skjermbilder som viser hvordan en nettside så ut tidligere
- fargeforandringer som representerer måleenheter, for eksempel i et heatmap
Høykontrastversjon
Det er tillatt å oppfylle kravet til kontrast med en høykontrastversjon av nettsiden, jamfør teknikk G174. Etter tilsynets oppfatning, er det mest hensiktsmessig at vanlig versjon av nettsiden er i samsvar med kravene, slik at en slipper å vedlikeholde to versjoner. Dette er opp til virksomheten å vurdere.
Forholdet til suksesskriterium 1.4.1 Bruk av farge
Suksesskriterium 1.4.1 Bruk av farge, krever at farge ikke benyttes som det eneste visuelle virkemidlet for å formidle informasjon, angi en handling, be om respons eller skille ut et visuelt element.
En 1-5 stjerners indikator med en svart kontur for hver stjerne fylt med enten gul (full) eller hvit (tom). Her oppfyller begge eksemplene suksesskriterium 1.4.11 Kontrast for ikke-tekstlig innhold.
Derimot vil det være brudd på 1.4.1 Bruk av farge, fordi farge er brukt som det eneste visuelle virkemiddel til å formidle informasjonen. Kravet i 1.4.1 forutsetter at det brukes noe annet i tillegg, for eksempel forklarende tekst eller mønster.
Forholdet til suksesskriterium 1.4.3 Kontrast (minimum)
Kontrastkravet for ikke-tekstlig innhold, 3,0:1, er det samme som for stor tekst. Suksesskriterium 1.4.3 Kontrast (minimum) regulerer kontrast mellom tekst og bakgrunn, og er dermed avgrenset mot ikke-tekstlig innhold.
Forholdet til suksesskriterium 2.4.7 Synlig fokus
Fokusindikatoren er ikke-tekstlig innhold som angir en tilstand. Utgangspunktet er at den synlige fokusindikatoren som viser brukeren hvor han befinner seg på nettsiden, skal ha et kontrastforhold på minst 3:1 mot komponenten som er i fokus.
Dette gjelder etter ordlyden bare hvis innholdsprodusenten har endret på utseendet til fokusindikatoren, og ikke dersom det bestemmes av brukeragenten.
Det er flere måter å oppfylle kravet på.
Krav til samsvar
Den visuelle presentasjonen har et kontrastforhold på minst 3:1 mot farge(r) som ligger ved siden av for:
- Visuell informasjon som kreves for å identifisere aktive brukergrensesnittkomponenter, samt hvordan de kan betjenes, og indikere tilstander.
- Med mindre utseendet er bestemt av brukeragenten og ikke er endret av innholdsprodusenten.
- Deler av grafikk som kreves for å forstå innholdet.
- Med mindre en bestemt presentasjon er avgjørende for informasjon som blir formidlet eller
Det finnes en høykontrastvisning som oppfyller alle følgende punkter:
- Mekanismen for å aktivere høykontrast er plassert nær starten av siden og er visuelt markert med tekst eller ikon.
- Mekanismen tilfredsstiller kravet til kontrastverdi.
- Den visuelle presentasjonen har kontrastverdi i tråd med kravet i høykontrastvisning.
- Den visuelle presentasjonen med for svak kontrastverdi i ordinær visning, er identisk med den visuelle presentasjonen i høykontrastvisning og tilfredsstiller i tillegg alle andre suksesskriterier som er relevante for den aktuelle nettsiden.
Krav til samsvar gjelder tilsvarende for apper og dokumenter.
Kommentar
Tilsynet tester ikke alle typer tilstander når vi verifiserer kravet. Vi avgrenser testingen til følgende: fokus, pekeren over (hover), valgt og vis/skjul.
Tilsynet tester heller ikke om det er implementert en høykontrastvisning som oppfyller kravet. Etter vår vurdering, er dette en lite utbredt fremgangsmåte.
Løsningsforslag og eksempler
Du finner veiledning til dette kravet i løsningsforslaget: