Hvad er farvekontrast, og hvorfor er det et tilgængeligheds-krav?
Farvekontrast handler om den synlige forskel — den luminansmæssige forskel — mellem en teksts farve og dens baggrund. For brugere med nedsat syn, farveblindhed eller grå stær kan utilstrækkelig kontrast gøre tekst umulig at læse, selv om den er fuldt synlig for andre brugere.
Succeskriterie 1.4.3 i WCAG 2.1 — Kontrast (minimum) på niveau AA — fastsætter derfor præcise tærskler for, hvor høj kontrastratioen skal være. Kravet er baseret på en matematisk beregning af relativ luminans og er objektivt testbart: enten opfylder et farvepar kravet eller ej.
Kontrastratioen udtrykkes som et forholdtal — f.eks. 4,5:1 — og beregnes ud fra forholdet mellem den lyseste og den mørkeste farve i parret. Sort tekst på hvid baggrund giver den maksimale ratio på 21:1. Lys grå tekst på hvid baggrund kan ligge langt under kravet, selvom det visuelle udtryk forekommer acceptabelt for mange.
Kravene i WCAG 1.4.3
WCAG 1.4.3 opererer med to tærskler afhængig af tekstens størrelse:
Normal tekst (under 18 pt / 24 px i regular vægt, eller under 14 pt / ca. 18,5 px i fed): Kontrastratioen skal være mindst 4,5:1 mod baggrunden.
Stor tekst (mindst 18 pt / 24 px i regular, eller mindst 14 pt / ca. 18,5 px i fed): Kontrastratioen skal være mindst 3:1. Baggrunden for den lavere grænse er, at større bogstaver er lettere at skelne selv ved lavere kontrast.
Undtagelserne er vigtige at kende. Kravet gælder ikke for:
- Dekorativ tekst — tekst, der er ren udsmykning og ikke formidler information
- Logoer og varemærker — tekstindhold i logoer er eksplicit undtaget
- Inaktive brugergrænseflade-komponenter — en nedtonet, deaktiveret knap er undtaget, da brugeren ikke kan interagere med den
Undtagelserne er snævre. En brødtekst, en overskrift, en navigationstekst eller en formularetikette er altid omfattet — uanset designmæssig intention.
Det beslægtede krav: WCAG 1.4.11 Ikke-tekstkontrast
WCAG 2.1 tilføjede succeskriterie 1.4.11 — Ikke-tekstkontrast på niveau AA — der udvider kontrastkravet til visuelle komponenter ud over tekst. Kravet er relevant for:
- Brugergrænseflade-komponenter: Fokusindikatorer, checkbokse, radioknapper, inputfelter og knapper skal have en kontrastratio på mindst 3:1 mod den tilstødende farve.
- Grafiske objekter: Ikoner og informationsbærende diagrammer skal ligeledes have mindst 3:1 kontrast, hvis de formidler information der er nødvendig for at forstå indholdet.
En grå checkboks på hvid baggrund, en svag fokusindikator eller et ikon med lav kontrast kan dermed udgøre et brud på 1.4.11, selv hvis al tekst på siden opfylder 1.4.3.
Typiske fejl i praksis
Kontrastfejl er særdeles hyppige — WebAIM’s analyse af én million hjemmesider viser konsekvent, at lav kontrast er den mest udbredte WCAG-fejl. De mest typiske mønstre er:
Lys grå brødtekst på hvid baggrund: Mange designsystemer anvender #767676 eller lysere gråtoner for at give en “luftig” visuel tone. #767676 på hvid giver præcis 4,54:1 — en hårfin margin. Mange designs ender med mørkere hvid som baggrund og falder dermed under grænsen.
Hvid tekst på mellemtone farve: Knapper og call-to-action-elementer i f.eks. mellemblå (#4A90D9) eller mellemgrøn opfylder ikke altid kontrastkravet for hvid tekst, selvom farven virker intens.
Placeholdertekst i formularer: HTML-placeholdertekst er typisk stylet med ca. 40% opacitet i browserne. Den opfylder næsten aldrig 4,5:1-kravet — og er som minimum svært læselig for brugere med nedsat syn.
Tekst over billeder og gradienter: Tekst lagt direkte over et baggrundsfoto har en dynamisk baggrund, der varierer i luminans. Kontrasten kan sagtens overholde kravet i ét hjørne af billedet, mens den falder til under 2:1 i et andet.
Links der kun adskilles via farve: WCAG 1.4.1 (Brug af farve) kræver desuden, at links ikke udelukkende markeres med farve. Hvis et link alene adskiller sig fra omgivende tekst ved at være blåt — uden understregning eller andet visuelt tegn — er kravet brudt, selv hvis selve kontrastratioen er tilstrækkelig.
Sådan tester du kontrast
Kontrast er et af de få tilgængeligheds-problemer der lader sig teste næsten fuldt ud med automatiserede værktøjer. Følgende er de mest anvendte:
WebAIM Contrast Checker (webaim.org/resources/contrastchecker): Enkel webbaseret beregner. Angiv forgrundsfarve og baggrundsfarve i hex, RGB eller HSL — og få øjeblikkeligt at vide, om parret opfylder 1.4.3 og 1.4.11. Uundværlig til at teste designbeslutninger inden publicering.
axe DevTools: Browser-udvidelsen til Chrome og Firefox scanner hele sider automatisk og rapporterer kontrastfejl med præcis angivelse af element, faktisk ratio og krævet ratio. axe er blandt de mest præcise automatiserede scannere og bruges af mange offentlige myndigheder som en del af den løbende testprocedure.
WAVE (wave.webaim.org): WAVE markerer kontrastfejl direkte på siden med visuelle indikatorer og giver både fejlmeddelelse og kontrastberegning. Velegnet til hurtigt overblik, særligt for ikke-tekniske brugere.
Browser DevTools: I Chrome og Firefox kan du i DevTools-panelet under Accessibility inspicere enkelteleménters kontrastratio. Chrome viser desuden en real-time kontrastberegning, når du ændrer farver i CSS-editoren.
Automatiserede værktøjer kan identificere de fleste tekstkontrast-fejl — men tekst over billeder og gradienter kræver manuel vurdering, da den faktiske baggrundsluminans varierer.
Sådan retter du kontrastproblemer
Når en kontrastfejl er identificeret, er løsningen oftest enkel: enten gøres tekstfarven mørkere, baggrunden lysere — eller begge. WebAIM Contrast Checker og axe DevTools foreslår begge den nærmeste farve, der opfylder kravet.
Et par principper er nyttige at have for øje:
- Mørk tekst på lys baggrund er generelt nemmere at justere end lys tekst på mørk baggrund, fordi der er mere “rum” i den mørke retning.
- Farvevalg bør altid verificeres i det faktiske design-system — en farve der ser korrekt ud i en kontrastberegner, kan give problemer ved halv-transparens eller over-blending.
- Placeholdertekst i formularer bør erstattes med synlige, permanente etiketter — det løser kontrastproblemet og forbedrer brugbarheden generelt.
Farvekontrast i PDF-dokumenter
PDF-dokumenter er ikke undtaget fra kontrastkravene, når de udgør borgernes eneste adgang til information. Et PDF/UA-kompatibelt dokument bør opfylde de samme kontrastprincipper som HTML-indhold — men PDF-formatet giver ingen automatiseret kontrastvalidering svarende til axe eller WAVE.
En konvertering af PDF til HTML giver det konverterede indhold en kontekst, hvor kontrasten kan testes systematisk med de sædvanlige browserbaserede værktøjer. PDFAccess genererer semantisk HTML med den originale tekst og formatering — og outputtet kan efterfølgende valideres mod WCAG 1.4.3 med axe DevTools eller WAVE ligesom øvrigt webindhold.
Tjekliste: Farvekontrast
Brug denne tjekliste til at verificere kontrastniveauet på dit websted eller i dit dokument:
- Normal brødtekst og overskrifter har en kontrastratio på mindst 4,5:1 mod baggrunden (WCAG 1.4.3)
- Stor tekst (≥ 18 pt regular eller ≥ 14 pt fed) har mindst 3:1 mod baggrunden (WCAG 1.4.3)
- Placeholdertekst i formularer er erstattet med synlige etiketter — eller opfylder kontrastkravet (WCAG 1.4.3)
- Tekst over billeder og gradienter er testet manuelt i alle varierende baggrundsområder
- Brugergrænseflade-komponenter (checkbokse, inputfelter, fokusindikatorer) har mindst 3:1 kontrast (WCAG 1.4.11)
- Informationsbærende ikoner og grafik har mindst 3:1 kontrast (WCAG 1.4.11)
- Links adskiller sig fra omgivende tekst med andet end farve alene (WCAG 1.4.1)
- Logoer og dekorativ tekst er undtaget fra kontrastkravet og ikke inkluderet i ovenstående