Farvekontrast og tilgængelighed: WCAG-krav, tjek og løsninger

Lysegrå tekst på hvid baggrund ser stilren ud i en designfil. På en telefon i skarpt sollys, eller for en svagsynet, er den tung at læse. Det er også den mest almindelige tilgængelighedsfejl, der findes: WebAIM Million 2026 (åbner i en ny fane) fandt tekst med lav kontrast på 83,9 % af forsiderne på de en million største hjemmesider, med i gennemsnit 34 forskellige forekomster pr. side.

Den gode nyhed er, at kontrast kan måles, at grænseværdierne er klare, og at løsningerne for det meste er billige. Denne guide giver dig tallene, de gratis værktøjer og en måde at rette brandfarver på uden at starte forfra.

Hvad er et kontrastforhold?

Et kontrastforhold er et tal, der sammenligner den relative lysstyrke, eller luminans, i to farver, som regel teksten og dens baggrund. WCAG beregner det med en fast formel, og resultatet går fra 1:1 (ingen forskel, hvid på hvid) til 21:1 (sort på hvid). Jo højere tal, desto lettere er de to farver at skelne fra hinanden.

Formlen er (L1 + 0,05) / (L2 + 0,05), hvor L1 er den relative luminans for den lyseste farve og L2 for den mørkeste. Du kommer aldrig til at skulle regne den ud i hånden, men én detalje betyder noget: kun lysstyrken tæller, ikke farvetonen. Derfor kan rød tekst på grøn baggrund se livlig ud og alligevel få en dårlig score.

Den anden detalje, som mange overser, er afrunding. W3C's forklarende dokument til 1.4.3 (åbner i en ny fane) siger, at beregnede værdier »ikke bør afrundes (f.eks. opfylder 4,499:1 ikke grænseværdien på 4,5:1)«. Grå #767676 på hvid (4,54:1) består altså, mens #777777 på hvid (4,48:1) dumper, selv om ingen kan se forskel med det blotte øje.

Hvilket kontrastforhold kræver WCAG?

På niveau AA, som de fleste love og kontrakter henviser til, skal almindelig tekst have mindst 4,5:1 mod baggrunden og stor tekst 3:1 (succeskriterie 1.4.3). Komponenter i brugerfladen og grafik med betydning skal have 3:1 mod farverne ved siden af (1.4.11). Det strengere niveau AAA kræver 7:1 for almindelig tekst og 4,5:1 for stor tekst (1.4.6).

Hvorfor netop 4,5:1? W3C forklarer, at forholdet »kompenserer for det tab af kontrastfølsomhed, som brugere med et synstab svarende til en synsstyrke på omkring 20/40 typisk oplever« (omtrent 0,5 i decimal synsstyrke). Det er med andre ord sat efter personer med moderat nedsat syn, hvilket omfatter mange ældre kunder, der aldrig ville sige, at de har et handicap.

Noget tekst er undtaget: logoer og varemærkenavne, ren dekorativ tekst, tekst, der ikke er synlig for nogen, tekst i et billede med meget andet visuelt indhold og tekst i inaktive (deaktiverede) kontroller. Dit logo kan forblive, som det er. Det kan et afsnit i logoets blege farve ikke.

Hvad tæller som stor tekst?

Stor tekst betyder i WCAG mindst 18 punkt eller mindst 14 punkt, hvis den er fed. W3C omregner det til cirka 24 CSS-pixels og 18,5 pixels fed. Alt mindre skal have de fulde 4,5:1. Brødtekst, billedtekster, formularetiketter, priser og links i sidefoden er næsten aldrig stor tekst, så de skal have det højere forhold.

Sådan virker det i praksis. Grå #949494 på hvid giver 3,03:1. Det er fint til en overskrift på 28 pixels, men dumper for et afsnit på 16 pixels i samme farve. Mange hjemmesider består på overskrifterne og dumper på alt nedenunder.

Tynde og dekorative skrifttyper kræver ekstra omhu. W3C bemærker, at på grund af kantudjævning »kan særligt tynde eller usædvanlige skrifttyper blive gengivet af browseren med en meget svagere farve« end den, du har valgt. Har din brandskrift en tynd vægt, så giv dig selv en margen over 4,5:1 i stedet for at sigte efter 4,51.

Gælder kontrastkravene for knapper, ikoner, fokusindikatorer og diagrammer?

Ja. Efter succeskriterie 1.4.11 (niveau AA) skal alt, hvad folk skal kunne se for at identificere en kontrol, dens tilstand eller en grafik, have 3:1 mod farverne ved siden af. Det dækker rammer om formularfelter, ikoner uden tekstetiket, fokusrammer, tilstande for afkrydsningsfelter og kontakter samt linjer og segmenter i diagrammer. Tekst inde i en knap skal stadig have 4,5:1.

• Formularfelter: en lysegrå ramme i #CCCCCC på hvid giver 1,61:1. Hvis den svage streg er det eneste, der viser, hvor man skal skrive, dumper feltet.
• Knapper: WCAG kræver ikke en synlig ramme om hver knap. W3C's forklarende dokument til 1.4.11 (åbner i en ny fane) siger, at en afgrænsning kun er nødvendig, når der ikke er nogen anden visuel måde at genkende kontrollen på. Hvis en knap kun kan genkendes på sin farvede form, skal formen have 3:1 mod siden.
• Ikoner: et forstørrelsesglas til søgning, et hjerte til ønskelisten eller et kurv-ikon uden tekst ved siden af skal have 3:1.
• Fokusindikatorer: den ramme, der viser tastaturfokus, skal kontrastere mod baggrunden omkring den. Vores guide til WCAG 2.2 gennemgår de nyere kriterier om fokus.
• Diagrammer: linjer i et kurvediagram og stykker i et lagkagediagram skal have 3:1, medmindre de samme værdier også vises som tekst.
• Deaktiverede kontroller er undtaget, men folk skal stadig kunne se, om en knap kan trykkes på.

Links i løbende tekst er et særtilfælde. Hvis de kun er markeret med farve og ikke er understreget, kræver W3C's teknik G183 (åbner i en ny fane) 3:1 mellem linkfarven og den omgivende tekst, mens begge stadig skal have 4,5:1 mod baggrunden. Det er svært at finde tre farver, der opfylder alt det. En understregning er meget lettere.

Hvordan tjekker jeg farvekontrast?

Brug et gratis kontrastværktøj til bestemte farvepar, browserens udviklerværktøjer til live sider og en automatisk scanning til at finde problemområder på hele hjemmesiden. Tjek derefter med øjnene det, som værktøjerne overser: tekst på fotos og farveovergange, tilstande ved hover og fokus, pladsholdertekst og fejlmeddelelser. Det meste tager få minutter pr. sideskabelon.

• WebAIM Contrast Checker (åbner i en ny fane): indtast to hex-koder, og få kontrastforholdet med bestået eller dumpet for almindelig tekst, stor tekst og grafiske objekter. Skyderen for lyshed er praktisk, når du leder efter den nærmeste nuance, der består.
• Colour Contrast Analyser (åbner i en ny fane): et gratis skrivebordsprogram fra Vispero til Windows og macOS. Pipetten henter farven fra en hvilken som helst pixel på skærmen, hvilket er nyttigt til tekst på billeder, pdf'er og apps, og programmet har en simulator for farveblindhed.
• Chrome DevTools: inspicér et stykke tekst, og åbn farvevælgeren. Dens afsnit om kontrastforhold (åbner i en ny fane) viser linjer for AA og AAA og kan foreslå en farve, der består. Panelet CSS Overview oplister alle kontrastproblemer på siden.
• Automatiske værktøjer: browserudvidelser og Lighthouse markerer tekst med lav kontrast på en hel side, men de angiver ofte tekst på billeder eller farveovergange som noget, der skal gennemgås manuelt, i stedet for at lade den bestå eller dumpe.

Hvor værktøjerne ikke slår til, må du måle i hånden. Ved tekst på et stort topbillede skal du måle den lyseste del af billedet bag de lyseste bogstaver; W3C nævner baggrundsbilleder uden tilstrækkelig kontrast som en kendt fejl (F83). Hold musen over knapper, gå til dem med Tab-tasten, fremkald en fejl i en formular, og skift til mørk tilstand, hvis du tilbyder det. Et mørkt tema kan også dumpe: grå #757575 på baggrunden #121212 giver 4,07:1. Vores guide til hvordan du tester din hjemmesides tilgængelighed placerer kontrast sammen med de andre hurtige manuelle tjek.

Hvordan retter jeg lav kontrast uden at ændre mit brand?

Som regel ved at tilføje en mørkere nuance af din brandfarve til tekst og små elementer og beholde originalen til store overskrifter, baggrunde og illustrationer. Mange brandfarver dumper kun i små størrelser. Det er ofte nok at skifte hvid tekst ud med mørk tekst på en lys brandfarve, og de fleste besøgende vil kun opdage, at siden er blevet lettere at læse.

1. Lav en tekstsikker udgave af hver brandfarve med mindst 4,5:1 mod dine primære baggrunde, og brug den til brødtekst, links og små ikoner.
2. Brug den klare originalfarve til store overskrifter (der er 3:1 nok), baggrunde, illustrationer og pynt.
3. Skift knapteksten fra hvid til mørk på lyse brandfarver.
4. Læg en fuldt dækkende eller halvgennemsigtig flade bag tekst, der ligger på fotos.
5. Tjek alle tilstande: hover, fokus, besøgt, valgt, fejl og pladsholder.
6. Gem de farvepar, der består, som design tokens eller temaindstillinger, så nye sider arver dem i stedet for at opfinde nye.

Design til farveblinde: hvorfor farve alene ikke er nok

Kontrast og farve er to forskellige problemer. Omkring 1 ud af 12 mænd og 1 ud af 200 kvinder har nedsat farvesyn, oftest rød-grøn farveblindhed, ifølge Colour Blind Awareness (åbner i en ny fane). WCAG 1.4.1 (åbner i en ny fane) (niveau A) siger, at farve ikke må være den eneste visuelle måde at formidle information på, så kombinér den med tekst, ikoner, mønstre eller understregning.

• Fejl i formularer: en rød ramme alene dumper. Tilføj en besked som »Skriv et postnummer« ved siden af feltet, gerne med et ikon.
• Lager og status: en grøn eller rød prik ved siden af et produkt siger ikke mange kunder noget. Skriv »På lager« eller »Udsolgt«.
• Diagrammer: en signaturforklaring, der kræver, at man matcher farver, er svær at læse. Sæt etiketter direkte på linjerne, eller brug mønstre og forskellige linjetyper.
• Links: understreg dem i brødtekst af de grunde, der er nævnt ovenfor.

Vil du selv se problemet, kan Chrome DevTools simulere forskellige typer nedsat farvesyn, og Colour Contrast Analyser har også en simulator. Kontrast hjælper også her: forholdet måler lyshed, ikke farvetone, så to farver med et højt kontrastforhold kan skelnes, selv når farvetonerne ligner hinanden. Mere om, hvordan svagsynede og personer med andre handicap indstiller deres enheder, finder du i hvordan personer med handicap bruger nettet.

Er højkontrasttilstande og kontrastknapper nok?

Nej. Kontrasttemaer i styresystemet og kontrastknapper på siden hjælper folk, der ved, at de har brug for mere kontrast, og slår det til. WCAG bedømmer dog din side i dens standardtilstand, så de farver, som alle besøgende ser først, skal stadig bestå. En knap er en ekstra mulighed for dem, der vil have mere, ikke en løsning på farver, der dumper.

Nogle personer med handicap bruger kontrasttemaer i Windows, som erstatter dine farver med deres egne. Det er værd at teste din hjemmeside med et af dem slået til: ikoner, der er bygget med baggrundsbilleder, kan forsvinde, og fokusmarkeringer, der kun er tegnet med box-shadow, kan blive usynlige. CSS-medieforespørgslen prefers-contrast giver dig desuden mulighed for at tilbyde en udgave med højere kontrast til dem, der har bedt om det i deres systemindstillinger.

Vores egen widget har en kontrasttilpasning og en profil til farveblinde, og nogle besøgende finder dem nyttige. Vi vil alligevel sige det samme til dig: hvis din brødtekst er #999999 på hvid, så ret din CSS. Widgetten giver en besøgende, der ønsker mere kontrast, en måde at få det på. Den får ikke standardfarver, der dumper, til at bestå, og det står også i WCAG-referencen i vores dokumentation.