Løsningsforslag per krav 1.4.11 Kontrast for ikke-tekstlig innhold

Hva er kravet?

1.4.11 Kontrast for ikke-tekstlig innhold.

Hva bør jeg teste?

Visuell informasjon som brukes for å identifisere brukergrensesnittkomponenter og hvilken tilstand komponentene er i. Brukergrensesnittkomponenter er for eksempel lenker, skjemaelement og knapper. Komponentene kan ha ulike tilstander, for eksempel fokus ved tastaturnavigasjon, som også skal testes.

Grafiske objekter, det vil si deler av grafikk som kreves for å forstå innholdet. Eksempel på grafiske objekter er ikoner og linjer i en graf. Enkel grafikk, som for eksempel et ensfarget ikon, er enkeltstående objekter. Grafer som inneholder flere linjer eller søyler, inneholder flere grafiske objekt. Hver linje/søyle er et objekt. Suksesskriterie 1.4.11, krever at det skal være tilstrekkelig kontrast for brukergrensesnittkomponenter og grafiske objekter også når det er i fokus, enten ved mouseover eller ved tastaturnavigasjon.

Dette kravet har en grenseflate mot suksesskriterie 2.4.7 Synlig fokus, som krever at det skal være en synlig fokusmarkering ved tastaturnavigasjon. I 2.4.7 skal fokusmarkeringen være synlig, mens i 1.4.11 skal komponent/objekt fortsatt ha tilstrekkelig kontrast mot fargen som ligger rett ved siden av.

Hva er forventet resultat?

Den grafiske presentasjonen på brukergrensesnittkomponenter og grafikk har kontrast på minst 3:1 mot fargen som er i direkte tilknytning. Dette gjelder også når komponenten/grafikken har fokus ved mouseover og tastaturnavigasjon.

For aktive brukergrensesnittkomponenter, som knapper og skjemafelt, gjelder følgende:

• Visuell informasjon som lar brukeren se at det finnes en komponent, må ha kontrast på minst 3:1 mot tilstøtende farger.

Løsningsforslag for 1.4.11 Kontrast for ikke-tekstlig innhold

Noen ganger ligger det grafiske elementet inni skjemaelementet, for eksempel i en avkryssingsboks:

For grafiske objekter, gjelder følgende:

• Grafiske objekter som er viktig for å forstå innholdet, har en kontrast på minst 3:1 mot bakgrunnsfargen.
• De grafiske objektene som skal testes, må formidle informasjon. I eksempelet under, er det telefon-ikonet som skal testes. Den oransje sirkelen er kun bakgrunn, og formidler ikke informasjon.

• Grafiske objekter kan også inneholde andre grafiske objekter. Da skal de ulike objektene testes for kontrast. I eksempelet under, er både pilen og £-ikonet grafiske objekter. Da skal pilen ha tilstrekkelig kontrast mot den hvite bakgrunnen, og £-ikonet ha tilstrekkelig kontrast mot den gule bakgrunnen. Merk: Hadde det vært tekst inni symbolet, hadde krav 1.4.3 slått inn. Tegn som ikke utgjør noe på et naturlig språk, regnes ikke som tekst, men som grafisk objekt.

• Når det gjelder hva som menes med «fargen ved siden av», er det mulig med flere løsninger for å ivareta kontrast. Tilsvarende som for skjemafelt, er det 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 en av disse har kontrast på minst 3:1. I bildet under er det lagt på en ramme rundt den gule sektoren i diagrammet, for å få tilstrekkelig kontrast mot den hvite bakgrunnen:

• Hvis objektet ligger på gradert bakgrunn, skal man teste den svakeste kontrasten. Dersom kontrasten er svakere enn 3:1, skal man anta at bakgrunnsfargen er usynlig og stille seg spørsmålet; er objektet fortsatt mulig å forstå? Hvis objektet ikke er mulig å forstå, er det et brudd på kravet.

• 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. I for eksempel linjediagram, der linjene i liten grad overlapper hverandre, er det ikke et krav om at linjene skal ha kontrast mot hverandre. Kravet gjelder kun kontrast mellom grafiske objekter som ligger rett ved siden av hverandre (i direkte tilknytning).
• Nettsiden tilbyr en visning i høykontrastversjon. Dette er samme løsning som kan brukes for å overholde suksesskriterie 1.4.3.

Eksempel på feil

Den grafiske presentasjonen på brukergrensesnittkomponenter og grafikk har kontrast på mindre enn 3:1 mot fargen som er ved siden av.

Det er ikke tilstrekkelig at kontrasten blir minst 3:1 først ved mouseover eller tastaturfokus.

Kommentar

Suksesskriteriet krever ikke at endringer i farge skal ha kontrast på minst 3:1 når de skjer i samme komponent. For eksempel hvis et menyelement endrer farge fra gul til oransje ved mouseover, er det ikke et krav om at kontrasten mellom disse fargene er minst 3:1 så lenge de ikke vises samtidig og ved siden av hverandre.

Det er ikke et krav at det skal finnes slik grafisk presentasjon, for eksempel en ramme rundt en knapp for å vise at det handler om en knapp.

Hvis komponenten, for eksempel en knapp, har både en ramme og inneholder synlig tekst, er det nok at teksten har tilstrekkelig kontrast i samsvar med suksesskriterie 1.4.3. Fordi knappen inneholder tekst, er rammen ikke det eneste virkemiddelet for å skille knappen fra bakgrunnen.