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

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


Den visuelle presentasjonen av følgende har et kontrastforhold på minst 3: 1 mot tilstøtende farger:

  • Brukergrensesnittkomponenter: Visuell informasjon som kreves for å identifisere brukergrensesnittkomponenter og tilstander, med unntak av inaktive komponenter eller hvor utseendet til komponenten bestemmes av brukeragenten og ikke endres av forfatteren;
  • Grafiske objekter: Deler av grafikk som kreves for å forstå innholdet, bortsett fra når en spesiell presentasjon av grafikk er viktig for informasjonen som formidles.

Denne nye retningslinjen utvider retningslinjene for fargekontrast utover tekst og bilder av tekst dekket av 1.4.3 Kontrast (minimum).
Dette er gode nyheter for personer med nedsatt syn, siden det endelig er en regel for alle viktige elementer på en side for å oppfylle minimums kontrastnivå. Personer med nedsatt syn kan ha vanskeligheter med å skille mellom elementer når fargene mangler kontrast.
Retningslinjen krever at brukergrensesnittkomponenter og grafiske objekter også har et kontrastforhold på 3: 1. Dette inkluderer ikoner, knapper, omrissene deres og de forskjellige tilstandene til disse elementene. Diagrammer og andre grafiske objekter som er avhengige av farge for å forstå, må også ha nok kontrast.


Hva bør du gjøre

  • Kontrasten til ikoner og grafiske objekter er like viktig som for tekst. Bruk tilstrekkelig kontrast for alle elementene på skjermen.

Eksempler

Ikoner

Siden ikoner generelt ikke inneholder tekst, trenger de ikke å oppfylle kontrastkravene til WCAG 2.0. I WCAG 2.1 er nå ikoner inkludert.
Figuren på innsiden av ikonet må ha god kontrast til ikonbakgrunnen. Bildene nedenfor viser et kalenderikon med to forskjellige blå bakgrunner. Den første har et kontrastforhold på bare 2,2 og den andre, med den mørkere blå har et forhold på 5,3. Det krever ofte ikke en stor fargeendring for å møte 3: 1-kontrastforholdet.

En annen måte å oppfylle dette kravet er å gi en kontur av ikonet. Konturfargen må oppfylle kontrastkravene. Å legge til en svart kontur på den indre kalenderdelen av ikonet over ville gi den nødvendige kontrasten. På samme måte må det også være god kontrast mellom bakgrunnsfargen på ikonet og elementet det vises på. Å legge til en grense med nok kontrast rundt hele ikonet kan fikse denne situasjonen.

Knapper

Knapper uten bakgrunnsfarge, referert til som spøkelsesknapper, har blitt populære. Disse knappene har vanligvis tekst (som må oppfylle 1.4.3 kontrast minimum). Hvis knappen har tekst, behøver ikke konturen å oppfylle kontrastkravet. Dermed er en spøkelsesknapp med bare tekst eller en med en lav kontrastramme tillatt hvis teksten oppfyller kravet til 1.4.3-kontrast.

Nedenfor er to eksempler på spøkelsesknapper. Den første er en grå konturknapp med ordet "Menu" mot hvit bakgrunn. Kontrastforholdet er bare 1,6, for lavt. Neste er den samme stilknappen i lilla som har et kontrastforhold på 9,0 og oppfyller kriteriet.

Merk at bruk av disse gjennomsiktige knappene på toppen av et bilde kan gjøre det vanskelig å se. Det beste er å bruke en solid bakgrunnsfarge med god kontrast bak knappen. Nedenfor er et bilde av himmelen med skyer som inneholder en gjennomsiktig bakgrunnsknapp med en mørk grå kontur og tekst i bildet. Mens kontrastforholdet er omtrent 3: 1 for den store tekststørrelsen (forholdet varierer på grunn av bakgrunnsbildet), kan det fortsatt være vanskelig å lese.

Grafiske elementer

Diagrammer og grafiske objekter kan være litt vanskeligere. Skiver i et kakediagram må ha tilstrekkelig kontrast mellom hver tilstøtende fargeskive og bakgrunnen. Hvis du trekker skivene litt fra hverandre, kan du løse problemet så lenge hver skive har god kontrast mot bakgrunnen. Å skissere hver skive med en farge som gir nok kontrast er en annen løsning.
Den beste løsningen er ikke å bare være avhengig av fargene for å forstå diagrammet. Gi kryssluker, tallverdier for hver skive eller en tabell med data for å gi viktig informasjon.

Bruk av farger

Mange nettsteder bruker en fargeendring for å identifisere det valgte eller fokuserte elementet. Dette kan bryte med 1.4.1 Bruk av farger. Men hvis fargeendringen oppfyller 3: 1-kontrastforholdet til dette suksesskriteriet, er det akseptabelt.