Kontrast på ikoner, knapper og grafikk (WCAG 1.4.11)

De fleste kjenner til kontrastkravene for tekst. Men visste du at knapper, inputfelt, ikoner og andre grafiske elementer også har kontrastkrav? WCAG 1.4.11 sørger for at brukergrensesnittet er synlig og forståelig for alle - ikke bare teksten.

Hva sier kravet?

WCAG 1.4.11 Ikke-tekstlig kontrast krever at følgende har et kontrastforhold på minst 3:1 mot tilstøtende farger:

Brukergrensesnittkomponenter: Visuelle indikatorer som er nødvendige for å identifisere og betjene et interaktivt element - for eksempel kanter på inputfelt, knappekanter, fokusindikatorer, avkrysningsruter og vippebrytere.

Grafiske objekter: Deler av grafikk som er nødvendige for å forstå innholdet - for eksempel linjer i et diagram, ikoner som formidler informasjon, eller segmenter i et kakediagram.

Kravet er nivå AA. Det ble introdusert med WCAG 2.1 og fyller et hull som de eldre kontrastkravene (som bare gjaldt tekst) ikke dekket.

Merk at kravet gjelder kontrastforholdet mot tilstøtende farger - altså fargene rett ved siden av elementet. En hvit knapp med en lysegrå kant kan ha tilstrekkelig kontrast mot en mørk bakgrunn, men ikke mot en hvit bakgrunn.

Hvorfor er dette viktig?

Svaksynte trenger tydelige grensesnitt

Omtrent 250 000 nordmenn har en synsnedsettelse. For disse brukerne er det avgjørende at knapper, felt og andre interaktive elementer er tydelig synlige. Et inputfelt med en lysegrå kant på hvit bakgrunn kan være nesten usynlig for en person med moderat synstap.

Fargeblinde trenger kontrast

For fargeblinde brukere er kontrast ofte viktigere enn fargevalg. En rød feilmelding som er omgitt av lignende toner, kan forsvinne helt. Tilstrekkelig kontrast sikrer at elementene er synlige uavhengig av fargeoppfatning.

Eldre brukere

Med alderen reduseres kontrastfølsomheten naturlig. Subtile designelementer som ser elegante ut for en 25-åring, kan være usynlige for en 65-åring. God kontrast gjør grensesnittet brukbart for alle aldersgrupper.

Mobile skjermer i ulike lysforhold

En knapp som er tydelig synlig innendørs, kan bli usynlig i sterkt sollys. Godt kontrastforhold gir en buffer som sørger for at elementene er synlige også under vanskelige lysforhold.

Slik oppfyller du kravet

Inputfelt og skjemaelementer

Inputfelt må ha en synlig kant eller bakgrunn som skiller dem fra omgivelsene med minst 3:1 kontrast:

/* Dårlig: For lav kontrast mot hvit bakgrunn (1.5:1) */
.input-felt {
  border: 1px solid #cccccc;
  background: #ffffff;
}

/* Bra: Tilstrekkelig kontrast (4.2:1 mot hvit) */
.input-felt {
  border: 1px solid #767676;
  background: #ffffff;
}

Husk at kontrastkravet gjelder selve kanten eller den visuelle indikatoren som viser at det er et felt - ikke nødvendigvis hele feltet. Men kanten må være tydelig nok til å identifisere feltet.

Knapper

Knapper trenger enten en synlig kant eller en bakgrunnsfarge med tilstrekkelig kontrast mot omgivelsene:

/* Dårlig: Grå knapp med lav kontrast mot hvit bakgrunn */
.knapp {
  background: #e0e0e0;
  color: #ffffff;
  border: none;
}

/* Bra: Tydelig knapp med god kontrast */
.knapp-primaer {
  background: #0055aa;
  color: #ffffff;
  border: none;
  /* Bakgrunnen har 8.5:1 kontrast mot hvit omgivelse */
}

.knapp-sekundaer {
  background: #ffffff;
  color: #0055aa;
  border: 2px solid #0055aa;
  /* Kanten har 8.5:1 kontrast mot hvit omgivelse */
}

Fokusindikatorer

Når et element har tastaturfokus, må fokusindikatoren (typisk en ramme rundt elementet) ha minst 3:1 kontrast:

/* Dårlig: Standard fokusring fjernet uten erstatning */
*:focus {
  outline: none;
}

/* Bra: Tydelig fokusindikator med god kontrast */
*:focus-visible {
  outline: 3px solid #0055aa;
  outline-offset: 2px;
}

Ikoner og grafiske elementer

Ikoner som formidler informasjon, må ha tilstrekkelig kontrast:

/* Dårlig: Lysegrått ikon på hvit bakgrunn */
.ikon-info {
  color: #cccccc;
}

/* Bra: Ikon med god kontrast */
.ikon-info {
  color: #595959;
}

Diagrammer og grafer

Dataserier i diagrammer - linjer, søyler, sektorer - må ha 3:1 kontrast mot tilstøtende farger. Det betyr at søyler ved siden av hverandre bør ha tilstrekkelig kontrast mot hverandre og mot bakgrunnen.

/* Sørg for god kontrast mellom søyler og bakgrunn */
.bar-chart {
  background: #ffffff;
}

.bar-serie-a {
  fill: #0055aa; /* 8.5:1 mot hvit */
}

.bar-serie-b {
  fill: #cc6600; /* 4.0:1 mot hvit */
}

Avkrysningsruter og vippebrytere

Egendefinerte avkrysningsruter og vippebrytere må ha synlige kanter eller indikatorer med 3:1 kontrast. Mange designsystemer bruker subtile farger som ikke oppfyller kravet:

/* Bra: Tydelig avkrysningsrute */
.checkbox-custom {
  width: 20px;
  height: 20px;
  border: 2px solid #595959; /* 7.0:1 mot hvit */
  border-radius: 3px;
  background: #ffffff;
}

.checkbox-custom:checked {
  background: #0055aa;
  border-color: #0055aa;
}

Verktøy for å måle kontrast

De samme verktøyene du bruker for tekstkontrast fungerer for ikke-tekstlig innhold:

• WebAIM Contrast Checker - tast inn fargekodene og sjekk 3:1-kravet
• Chrome DevTools - inspiser elementet og sjekk kontrastforholdet i fargevelgeren
• Colour Contrast Analyser - bruk pipetteverktøyet direkte på skjermen

Vanlige feil

• Inputfelt uten synlig kant - felt som bare har en bakgrunnsfarge lik omgivelsene, slik at brukeren ikke ser hvor feltet er.
• Ghost buttons (spøkelsesknapper) med lys ramme på lys bakgrunn - trendy, men ofte under 3:1 kontrast.
• Fjernet fokusindikator med outline: none uten å legge til et synlig alternativ.
• Lysegrå ikoner brukt som dekorasjon men som faktisk formidler viktig informasjon.
• Fargekodet diagram uten tilstrekkelig kontrast mellom nabosøyler eller sektorer.
• Custom toggle-bryter som bare endrer farge fra lysegrå til grønn, uten at bryteren selv har tydelig kontrast.

Tenk på det slik: alt brukeren trenger å se for å bruke nettsiden din - felt, knapper, ikoner, diagrammer - må ha god nok kontrast til å være synlig. Ikke bare for deg under optimale lysforhold, men for alle brukere i alle situasjoner.