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 kontrasten til 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 ikoner med to forskjellige brune bakgrunner. Den første har et kontrastforhold på bare 1.9:1 og den andre, med den mørkere brun har et forhold på 3.6:1. Det krever ofte ikke en stor fargeendring for å møte 3: 1-kontrastforholdet.
1.9:1 kontrast på første ikon og 3.6:1 kontrast på andre ikon
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 delen 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å ghostbuttons. Den første er en grå konturknapp med ordet "Neste" mot beige bakgrunn. Kontrastforholdet er bare 0.6 for lavt. Neste er den samme stilknappen i rustrød som har et kontrastforhold på 5.5:1 og oppfyller kriteriet.
2.9:1 kontrast på første ikon og 5.5:1 kontrast på andre ikon
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 ansatte i Norse som inneholder en gjennomsiktig bakgrunnsknapp med en hvit kontur og tekst i bildet, og så samme knapp med utfylt bakgrunn. Merk at ikonet til høyre er mye vanskeligere å lese enn ikonet til høyre.
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.