Tjek farvekontraster

Krav til kontraster for tekst, grafik og aktive komponenter.

For at overholde standardens tilgængelighedskrav skal alle betydningsbærende elementer og indhold på brugerfladen have tilstrækkelig kontrastratio til tilstødende farver. Det inkluderer for eksempel tekst, knapper og links. Der er forskellige kontrastkrav alt efter om det drejer sig om tekst eller grafisk indhold.

Se også vejledningsvideoen ”Farver og kontraster” for at få information om de forskellige krav til kontraster.

Tilstrækkelig kontrast er vigtigt for blandt andet personer med nedsat syn, herunder ældre eller personer, som generelt har nedsat kontrastfølsomhed. De tre primære områder, der kan tjekkes, er følgende: Kontrast for tekst, kontrast for grafik og kontrast for aktive komponenter.

For tekstindhold henvises til succeskriteriet 1.4.3 Kontrast (minimum) og for grafik og interaktive komponenter henvises til 1.4.11 Kontrast for ikke-tekstbaseret indhold i retningslinjerne for tilgængeligt webindhold (WCAG).

Kontrastratio

Kontrastratio er en numerisk værdi, som afspejler niveauet af kontrast mellem to farver. Når det drejer sig om tekstindhold, så er der tale om forskellen i lys mellem teksten og tekstens baggrund. Kontrastratioen angives som x:1, hvor kontrasten stiger, jo højere x er.

For eksempel er der mere kontrast mellem to farver ved kontrastratioen 8:1 end ved 2,5:1. Minimumskravet for tekst er 4,5:1, mens det for stor tekst og ikke-tekstbaseret indhold er 3:1.

Stor tekst har en fontstørrelse på mindst 18 punkt eller 14 punkt fed skrift for latinske skrifttyper/bogstaver. Der må gerne være en højere kontrast mellem tekst og baggrund end minimumskravet, men den må naturligvis ikke være lavere.

Hvid tekst på mørkerød baggrund med kontrastratio 8,01:1

Eksempel på hvid tekst på mørkerød baggrund med en kontrastratio på 8,01:1, som dermed overholder både kontrastkravet for tekst på 4,5:1 for normal tekst og 3:1 for stor tekst.

Hvid tekst på lyserød baggrund med kontrastratio 2,48:1.

Eksempel på hvid tekst på lyserød baggrund med en kontrastratio på 2,48:1, som dermed ikke overholder kontrastkravet for tekst på 4,5:1 for tekst og 3:1 for stor tekst.

De følgende sektioner vil uddybe tre tjek, der kan udføres på din løsning for at sikre tilstrækkelige kontrastforhold på henholdsvis tekst, grafisk indhold og interaktive elementer.

Manuelle tjeks

WCAG succeskriterium: 1.4.3 Kontrast (minimum) (AA)

Tjek

  1. Kontrollér, at tekst og billeder af tekst under 18 pkt. har et kontrastforhold på mindst 4,5:1 mellem tekst og baggrund.
  2. Kontrollér, at stor tekst og billeder af stor tekst på størrelse med eller større end 18 pkt. eller 14 pkt. fed har et kontrastforhold på mindst 3:1 mellem tekst og baggrund.
    Bemærk: Skriftstørrelsesangivelserne punkt (pt) og pixels (px) er ikke det samme. 14 pkt. svarer til 18,5 pixels og 18 pkt. svarer til 24 pixels.

Om tjekket

I dette tjek skal det vurderes om al betydningsbærende tekst og billeder af tekst, lever op til kravet om kontrast.

Eksempler på dette kan være brødtekst, tekst på knapper, tekst på billeder og links. Det gælder også tekst ved svævepegning (hover), dvs. tekst, som dukker op, når musen bliver ført hen over et element eller tekst eller placeholder-tekst.

Placeholder-tekst er tekst, som kun optager plads i et tekstfelt, indtil man vælger at udfylde feltet, eksempelvis ordet ”Søg” i et søgefelt.

Hvis der er tvivl om, hvorvidt teksten er betydningsbærende, kan der laves en øvelse, hvor den pågældende tekst fjernes. Bliver det meningsforstyrrende for siden, at teksten er fjernet, skal teksten leve op til kravet om kontrast.

Undtagelser for tekst og billeder af tekst

Der findes en række forhold, som kan undtages, og dermed ikke er underlagt kontrastkrav.

Tekst eller billeder af tekst:

  • der udgør en del af en inaktiv brugergrænsefladekomponent, fx teksten på en inaktiv knap
  • som udelukkende er ren udsmykning, dvs. kun har et æstetisk formål, som ikke indeholder information eller funktionalitet, fx pyntebogstaver, -symboler eller -tal
  • som ikke er visuelt synlig for brugerne
  • som udgør en del af et billede (dvs. ikke billede af tekst), men fx et billede af et landskab, hvor der ved et tilfælde er et vejskilt med tekst på eller et billede af en person som sidder og læser en bog
  • som er en del af et logo, eksempelvis et firmalogo.

WCAG succeskriterium: 1.4.11 Kontrast for ikke-tekstbaseret indhold (AA)

Tjek

Kontrollér, at grafiske objekter, der er nødvendige for at forstå indholdet, har et kontrastforhold på mindst 3:1 mod tilstødende farver.

Om tjekket

I dette tjek skal det vurderes, om de grafiske objekter lever op til kravet om kontrast for ikke-tekstbaseret indhold. Ligesom for tekstbaseret indhold er der kun tale om betydningsbærende grafik.

Grafiske objekter kan konkret være ikoner, diagrammer, grafer eller anden betydningsbærende grafik. Her vurderes om farven på selve grafikken eller den betydningsbærende del af grafikken har tilstrækkelig kontrast mod tilstødende farver.

Det skal være muligt at opfatte alle betydningsbærende grafiske objekter, også hvis man har nedsat syn. Benyttes der lyse grafiske objekter på en lys baggrund, kan man i nogle tilfælde stadig efterleve kravet om kontrast ved at tilføje en mørk kant til det grafiske objekt, som lever op til 3:1 kontrastkravet, fx en sort kant omkring et telefon-ikon i en lys farve. Det vigtige er, at ikonet i dette tilfælde kan opfattes.

Undtagelser for grafik

Grafiske objekter kan undtages, når en bestemt præsentation af grafikken er nødvendig for den information, der formidles. Det kan fx være:

  • dekorative grafiske objekter, som ikke er nødvendige for at forstå indholdet
  • logoer
  • flag
  • heatmaps, da ændring i det grafiske objekts farver vil fjerne grafikkens betydning.

WCAG succeskriterium: 1.4.11 Kontrast for ikke-tekstbaseret indhold (AA)

Tjek

Kontrollér, at aktive komponenter i brugergrænsefladen har et kontrastforhold på mindst 3:1 mod tilstødende farver.

Om tjekket

I dette tjek skal det vurderes, om de aktive komponenter lever op til kravet om kontrast for ikke-tekstbaseret indhold, for at sikre, at alle brugere kan opfatte og interagere med dem. De er også kendt som interaktive elementer, dvs. elementer som brugeren kan aktivere eller interagere med. Aktive komponenter kan være: toggles, tjekbokse, radioknapper, inputfelter, funktionelle billeder som pile, ikoner osv.

Desuden skal det vurderes om farven på fokusindikatoren ved tastaturnavigation også har tilstrækkelig kontrast mod tilstødende farver, så en tastaturbruger tydeligt kan se hvilket interaktivt element, der har fokus.

Ekstra om kontrastkrav for knapper

På traditionelle knapper med tekst skal kun tekstens farve på knappen have en kontrastratio på 3:1 til knappens farve. Derved skal farven på knappen ikke have 3:1 kontrast til knappens baggrund. Det er dog lettere for en person med nedsat syn at kunne identificere knappen, som værende en knap og ikke et link, hvis knappen også har en kant med tilstrækkelig kontrast til baggrunden, eller hvis knappens farve i sig selv har tilstrækkelig kontrast til baggrunden.

Knap med etiketten "knap"

Knapper som ikke kan aktiveres af brugerne, dvs. deaktiverede knapper i sidens HTML, er også undtaget for kontrastkravet. Eksempelvis kan det være en ”Send”-knap i en formular, som først aktiveres, når alle obligatoriske felter i formularen er udfyldt. Som nævnt tidligere, kan det anbefales at markere på anden vis, at knappen ikke er aktiv, eksempelvis med et ikon eller andet. På den måde kan personer med nedsat syn også identificere knappen som inaktiv.

To knapper med etiketten "Send" både i deaktiveret tilstand og aktiv tilstand

Undtagelser for komponenter i brugergrænsefladen

  • Inaktive komponenter
  • Komponenter hvor udseendet er bestemt af brugeragenten og ikke ændret af forfatteren

Om kontrasttjekkere

For at tjekke kontraster kan der benyttes en kontrasttjekker. Der findes mange forskellige kontrasttjekkere på markedet, både i form af:

  • software
  • browser plugins, der kan installeres
  • online udgaver, der ikke kræver installation

Digitaliseringsstyrelsen anbefaler ikke en specifik kontrasttjekker, og forskellen på dem er primært baseret på personlige præferencer. W3C har samlet en liste over forskellige værktøjer [engelsk], som blandt andet indeholder kontrasttjekkere.

Sådan fungerer en kontrasttjekker

En kontrasttjekker fungerer ved, at man anvender et pipetteværktøj til at vælge de to farver man ønsker at sammenligne, eller ved at indsætte farvekoderne for de to farver, man ønsker at tjekke kontrasten for. Alt efter hvilket element der tjekkes kontrast på, tjekkes at kontrastratioen er minimum 3:1 eller 4,5:1.

Det mest præcise resultat opnås ved at indtaste eller indsætte farvekoderne. Med pipetteværktøjet kan det i visse tilfælde være svært at ramme de korrekte farver.

En kontrasttjekker hvor man både kan benytte farvekoder og pipetteværktøjet til at vælge de farver, som man ønsker at tjekke kontrastratioen for.

Tjek kontraster på native apps

Det er den samme procedure og de samme tjeks, der gør sig gældende på native apps, som på websteder. Kontraster tjekkes på native apps ved at udvælge skærmbilleder af de sider, man ønsker at tjekke. Derefter tjekkes tekst, grafiske objekter og aktive komponenter ved hjælp af en kontrasttjekker.

Hvis det er din egen app, kan du benytte farvekoder i det tilhørende designsystem eller designguide til at tjekke kontrastforhold.