Färgkontrast och tillgänglighet: WCAG-krav, test och lösningar

Ljusgrå text på vit bakgrund ser stilren ut i en designfil. På en mobil i starkt solljus, eller för någon med synnedsättning, är den tung att läsa. Det är också det vanligaste tillgänglighetsfelet som finns: WebAIM Million 2026 (öppnas i en ny flik) hittade text med låg kontrast på 83,9 % av startsidorna hos de en miljon största webbplatserna, med i genomsnitt 34 olika förekomster per sida.

Den goda nyheten är att kontrast går att mäta, att gränsvärdena är tydliga och att lösningarna oftast är billiga. Den här guiden ger dig siffrorna, de kostnadsfria verktygen och ett sätt att rätta profilfärger utan att börja om från början.

Vad är ett kontrastvärde?

Ett kontrastvärde är ett tal som jämför den relativa ljusheten, eller luminansen, hos två färger, oftast texten och dess bakgrund. WCAG räknar ut det med en fast formel, och resultatet går från 1:1 (ingen skillnad, vitt på vitt) till 21:1 (svart på vitt). Ju högre tal, desto lättare är färgerna att skilja åt.

Formeln är (L1 + 0,05) / (L2 + 0,05), där L1 är den relativa luminansen för den ljusare färgen och L2 för den mörkare. Du kommer aldrig att behöva räkna ut den för hand, men en detalj spelar roll: det är bara ljusheten som räknas, inte kulören. Därför kan röd text på grön bakgrund se livfull ut och ändå få ett dåligt värde.

Den andra detaljen som många missar är avrundningen. W3C:s förklarande dokument för 1.4.3 (öppnas i en ny flik) säger att beräknade värden ”inte ska avrundas (till exempel uppfyller 4,499:1 inte gränsvärdet 4,5:1)”. Grått #767676 på vitt (4,54:1) godkänns alltså, medan #777777 på vitt (4,48:1) underkänns, fast ingen kan skilja dem åt med blotta ögat.

Vilket kontrastvärde kräver WCAG?

På nivå AA, som de flesta lagar och avtal hänvisar till, behöver vanlig text minst 4,5:1 mot bakgrunden och stor text 3:1 (framgångskriterium 1.4.3). Gränssnittskomponenter och grafik som bär betydelse behöver 3:1 mot färgerna bredvid (1.4.11). Den strängare nivån AAA kräver 7:1 för vanlig text och 4,5:1 för stor text (1.4.6).

Varför just 4,5:1? W3C förklarar att värdet ”kompenserar för den förlust av kontrastkänslighet som användare med en synnedsättning motsvarande ungefär 20/40 i synskärpa brukar ha” (ungefär 0,5 i decimalsynskärpa). Med andra ord är det satt för personer med måttligt nedsatt syn, vilket omfattar många äldre kunder som aldrig skulle kalla sig personer med funktionsnedsättning.

En del text är undantagen: logotyper och varumärkesnamn, rent dekorativ text, text som inte är synlig för någon, text i en bild med mycket annat visuellt innehåll och text i inaktiverade kontroller. Din logotyp kan vara som den är. Ett stycke i logotypens bleka färg kan inte det.

Vad räknas som stor text?

Stor text i WCAG betyder minst 18 punkter, eller minst 14 punkter om den är fet. W3C räknar om det till ungefär 24 CSS-pixlar och 18,5 pixlar i fetstil. Allt som är mindre behöver hela 4,5:1. Brödtext, bildtexter, formuläretiketter, priser och länkar i sidfoten är nästan aldrig stor text, så de behöver det högre värdet.

Så här blir det i praktiken. Grått #949494 på vitt ger 3,03:1. Det fungerar för en rubrik på 28 pixlar men underkänns för ett stycke på 16 pixlar i samma färg. Många webbplatser klarar sig på rubrikerna och underkänns på allt under dem.

Tunna och dekorativa typsnitt kräver extra omsorg. W3C påpekar att ”särskilt tunna eller ovanliga typsnitt kan återges av webbläsare med en mycket blekare färg” än den du har valt, på grund av kantutjämning. Har ditt profiltypsnitt en tunn vikt, lämna en marginal över 4,5:1 i stället för att sikta på 4,51.

Gäller kontrastkraven knappar, ikoner, fokusmarkeringar och diagram?

Ja. Enligt framgångskriterium 1.4.11 (nivå AA) behöver allt som användaren måste se för att identifiera en kontroll, dess läge eller en grafik ha 3:1 mot färgerna bredvid. Det gäller ramar runt formulärfält, ikoner utan textetikett, fokusramar, lägen för kryssrutor och reglage samt linjer och segment i diagram. Text inuti en knapp behöver fortfarande 4,5:1.

• Formulärfält: en ljusgrå ram i #CCCCCC på vitt ger 1,61:1. Om den svaga linjen är det enda som visar var man ska skriva underkänns fältet.
• Knappar: WCAG kräver inte en synlig ram runt varje knapp. W3C:s förklarande dokument för 1.4.11 (öppnas i en ny flik) säger att en avgränsning bara behövs när det inte finns något annat visuellt sätt att identifiera kontrollen. Om en knapp bara känns igen på sin färgade form behöver formen 3:1 mot sidan.
• Ikoner: ett förstoringsglas för sökning, ett hjärta för önskelistan eller en varukorgsikon utan text bredvid behöver 3:1.
• Fokusmarkeringar: ramen som visar tangentbordsfokus måste kontrastera mot bakgrunden runt omkring. Vår guide till WCAG 2.2 tar upp de nyare kriterierna för fokus.
• Diagram: linjer i ett linjediagram och tårtbitar i ett cirkeldiagram behöver 3:1, om inte samma värden också visas som text.
• Inaktiverade kontroller är undantagna, men användaren behöver ändå kunna se om en knapp går att trycka på.

Länkar i löpande text är ett specialfall. Om de bara markeras med färg, utan understrykning, kräver W3C:s teknik G183 (öppnas i en ny flik) 3:1 mellan länkfärgen och den omgivande texten, samtidigt som båda behöver 4,5:1 mot bakgrunden. Att hitta tre färger som uppfyller allt det är svårt. En understrykning är mycket enklare.

Hur kontrollerar jag färgkontrasten?

Använd ett kostnadsfritt kontrastverktyg för enskilda färgpar, webbläsarens utvecklarverktyg för publicerade sidor och en automatisk skanning för att hitta problemområden på hela webbplatsen. Kontrollera sedan med ögonen det som verktygen missar: text på foton och övertoningar, lägen vid hovring och fokus, platshållartext och felmeddelanden. Det mesta tar några minuter per sidmall.

• WebAIM Contrast Checker (öppnas i en ny flik): skriv in två hexkoder och få kontrastvärdet, med godkänt eller underkänt för vanlig text, stor text och grafiska objekt. Reglaget för ljushet är praktiskt när du letar efter närmaste nyans som godkänns.
• Colour Contrast Analyser (öppnas i en ny flik): ett kostnadsfritt skrivbordsprogram från Vispero för Windows och macOS. Dess pipett hämtar färgen från vilken pixel som helst på skärmen, vilket är användbart för text på bilder, pdf-filer och appar, och programmet har en simulator för färgblindhet.
• Chrome DevTools: inspektera en text och öppna färgväljaren. Dess avsnitt om kontrastvärde (öppnas i en ny flik) visar linjer för AA och AAA och kan föreslå en färg som godkänns. Panelen CSS Overview listar alla kontrastproblem på sidan.
• Automatiska verktyg: webbläsartillägg och Lighthouse flaggar text med låg kontrast på en hel sida, men de markerar ofta text på bilder eller övertoningar som något som behöver granskas manuellt i stället för att godkänna eller underkänna den.

Där verktygen inte räcker till får du kontrollera för hand. Vid text på en stor toppbild mäter du mot den ljusaste delen av bilden bakom de ljusaste bokstäverna; W3C listar bakgrundsbilder utan tillräcklig kontrast som ett känt fel (F83). Hovra över knappar, tabba till dem, framkalla ett fel i ett formulär och byt till mörkt läge om du erbjuder det. Ett mörkt tema kan också underkännas: grått #757575 på bakgrunden #121212 ger 4,07:1. Vår guide om hur du testar webbplatsens tillgänglighet placerar kontrasten bland de andra snabba manuella kontrollerna.

Hur åtgärdar jag låg kontrast utan att ändra min grafiska profil?

Oftast genom att lägga till en mörkare nyans av din profilfärg för text och små element, och behålla originalet för stora rubriker, bakgrunder och illustrationer. Många profilfärger underkänns bara i små storlekar. Att byta vit text mot mörk text på en ljus profilfärg räcker ofta, och de flesta besökare märker bara att sidan blivit lättare att läsa.

1. Ta fram en textsäker version av varje profilfärg, med minst 4,5:1 mot dina huvudbakgrunder, och använd den för brödtext, länkar och små ikoner.
2. Använd den klara originalfärgen för stora rubriker (där räcker 3:1), bakgrunder, illustrationer och dekor.
3. Byt knapptexten från vit till mörk på ljusa profilfärger.
4. Lägg en heltäckande eller halvgenomskinlig platta bakom text som ligger på foton.
5. Kontrollera alla lägen: hovring, fokus, besökt, vald, fel och platshållare.
6. Spara de godkända färgparen som design tokens eller temainställningar, så att nya sidor ärver dem i stället för att uppfinna nya.

Design för färgblindhet: varför färg inte räcker

Kontrast och färg är två olika problem. Ungefär 1 av 12 män och 1 av 200 kvinnor har nedsatt färgseende, oftast i form av rödgrön färgblindhet, enligt Colour Blind Awareness (öppnas i en ny flik). WCAG 1.4.1 (öppnas i en ny flik) (nivå A) säger att färg inte får vara det enda visuella sättet att förmedla information, så kombinera den med text, ikoner, mönster eller understrykningar.

• Fel i formulär: en röd ram ensam underkänns. Lägg till ett meddelande som ”Ange ett postnummer” bredvid fältet, gärna med en ikon.
• Lager och status: en grön eller röd prick bredvid en produkt säger ingenting till många kunder. Skriv ”I lager” eller ”Slutsåld”.
• Diagram: en teckenförklaring som bygger på att man matchar färger är svår att läsa. Sätt etiketter direkt på linjerna eller använd mönster och olika linjestilar.
• Länkar: stryk under dem i brödtext, av skälen ovan.

Vill du se problemet själv kan Chrome DevTools simulera olika typer av nedsatt färgseende, och Colour Contrast Analyser har också en simulator. Kontrast hjälper även här: värdet mäter ljushet, inte kulör, så två färger med högt kontrastvärde går att skilja åt även när kulörerna liknar varandra. Mer om hur personer med synnedsättning och andra funktionsnedsättningar ställer in sina enheter hittar du i hur personer med funktionsnedsättning använder webben.

Räcker högkontrastlägen och kontrastknappar?

Nej. Kontrastteman i operativsystemet och kontrastknappar på sidan hjälper personer som vet att de behöver mer kontrast och slår på det. WCAG bedömer dock din sida i dess standardläge, så de färger som varje besökare ser först måste fortfarande godkännas. En knapp är ett extra val för dem som vill ha mer, inte en lösning på färger som underkänns.

En del personer med funktionsnedsättning använder kontrastteman i Windows, som ersätter dina färger med deras egna. Det är värt att testa webbplatsen med ett sådant tema påslaget: ikoner som är byggda med bakgrundsbilder kan försvinna, och fokusmarkeringar som bara ritas med box-shadow kan bli osynliga. Mediefrågan prefers-contrast i CSS låter dig dessutom erbjuda en version med högre kontrast till dem som har bett om det i sina systeminställningar.

Vår egen widget har en kontrastanpassning och en profil för färgblindhet, och en del besökare tycker att de är användbara. Vi skulle ändå säga samma sak till dig: om din brödtext är #999999 på vitt, ändra din CSS. Widgeten ger en besökare som vill ha mer kontrast ett sätt att få det. Den gör inte att standardfärger som underkänns blir godkända, och det står också i WCAG-referensen i vår dokumentation.