1.4.11 Kontrast for ikke-tekstlig innhold (Nivå AA)

KORT FORTALT: Ikke-tekstlig innhold skal ha et kontrastforhold på minst 3:1 mot farge(r) som ligger siden av.

Publisert: 11. mar 2019, Sist endret: 11. sep 2019

Suksesskriterium 1.4.11 Kontrast for ikke-tekstlig innhold

Den visuelle presentasjonen av det følgende har et kontrastforhold på minst 3:1 mot farge(r) som ligger 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 webinnhold.
  • Grafiske objekter: Deler av grafikk som kreves for å forstå innholdet, unntatt tilfeller der en bestemt presentasjon av grafikk er nødvendig for informasjonen som blir formidlet.

Dette er en uoffisell oversettelse av suksesskriteriet. Original tekst på engelsk finner du på W3Cs nettsider.

Formål

WCAG 2.1

Dette er et framtidig krav og gjelder ikke per i dag. Kravet trer først i kraft med innføringen av WAD.

Formålet med suksesskriteriet er å sikre at aktive brukergrensesnittkomponenter og meningsbærende grafikk er lett å se. Grunnlag og kontrastverdi er den samme som kravet til kontrast for stor tekst i suksesskriterie 1.4.3.

Det er vanskelig å oppfatte brukergrensesnittkomponenter som har dårlig kontrast. Tilsvarende gjelder grafisk innhold. Dette innholdet skal være mulig å oppfatte uten å bruke hjelpemidler.

Kravet er spesielt ment å ivareta

  • personer med nedsatt syn

Innhold som er omfattet av suksesskriteriet

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, vil si deler av grafikk som kreves for å forstå innholdet. Eksempler 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.

Unntak

Følgende innhold er unntatt kravet:

  • Inaktive brukergrensesnittkomponenter.
  • Grafikk som kun er til pynt.
  • Grafiske objekter som ikke formidler informasjon, fordi informasjonen også er formidlet i form av tekst. Det kan være i form av synlige ledetekster eller tekstalternativ.
  • Grafiske presentasjoner som er nødvendige (essential). Dette omfatter blant annet
    • grafikk som er en del av en logo eller merkevare
    • flagg
    • bilder av personer eller uteområder (real life scenes, people or scenery).
    • skjermbilder som viser hvordan en nettside så ut tidligere
    • fargeforandringer som representerer måleenheter, for eksempel i et heatmap

Endringer av utseende, farger og kontrast som er gjort at brukeragenten, er ikke omfattet av kravet.

Tekst (tegnsekvenser som uttrykker noe på et naturlig språk) er omfattet av suksesskriterie 1.4.3.

Eksempel på samsvar

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. Dette gjelder også i tilfeller der komponenten er valgt, krysset av eller er i fokus. For eksempel krysset i en avkryssingsboks og andre grafiske elementer som viser tilstand/valg, er også omfattet av kravet.
  • Når det gjelder hva som menes med «fargen ved siden av», er det mulig med flere løsninger. Dersom et skjemafelt har en grå ramme og hvit fyllfarge, er det tilstrekkelig at kontrasten mellom rammen og bakgrunnen som ligger utenfor skjemafeltet er på minst 3:1. Dersom samme skjemafelt ligger på en bakgrunn som har for dårlig kontrast mot den grå rammen, er det tilstrekkelig at kontrasten mellom den hvite fyllfargen og bakgrunnen er på minst 3:1. Da kan man se bort fra rammen når man måler kontrast.

Begge disse skjemafeltene overholder kravet:

Standard text input with a label, white internal and external background with a dark border.

A text box with a dark background and light border, with a white background.

Det samme gjelder andre typer skjemaelement. Her er alle de valgte radioknappene i samsvar med kravet:

Three radio buttons, the first a plain circle marked unselected. The second shows the circle filled with the same color as the border. The third has a slightly darker filling than the border.

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

A purple box with a light grey check.

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.

An orange circle with a white telephone icon in the middle.

  • 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.

A yellow arrow pointing down with a pound sign (currency) in the middle.

  • 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:

Passing pie chart

  • 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.

Two versions of a blue circle with an 'i' indicating information. The first example has a blue gradient background, the second is missing the upper half of the background which obscures the i.

  • 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).
  • G174: 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.

 

 

Deldette