Färgkontrast och WCAG: Komplett guide för designers

Dålig kontrast är det absolut vanligaste tillgänglighetsfelet på webben. Enligt WebAIM:s årliga analys av en miljon webbplatser har över 80% kontrastproblem. Det är ett enormt antal användare som kämpar för att läsa text varje dag.

Problemet är ofta att kontrast kollas för sent i processen. Designers väljer färger baserat på estetik, utvecklare implementerar dem, och först vid en granskning upptäcks att vit text på ljusgrön bakgrund inte fungerar. Då är det dyrt att göra om.

I denna guide går vi igenom exakt vad WCAG kräver, vilka undantag som finns, och hur du bygger in kontrasttänk från start i din designprocess.

De magiska siffrorna (AA-nivå)

WCAG definierar kontrast som förhållandet mellan förgrunds- och bakgrundsfärgens relativa luminans. En ratio på 1:1 betyder identiska färger (ingen kontrast), medan 21:1 är maximum (svart mot vitt).

För att uppfylla lagkraven (WCAG 2.1/2.2 nivå AA) gäller följande:

Om du siktar på AAA-nivå (rekommenderat för maximal läsbarhet) höjs kraven till 7:1 för normal text och 4.5:1 för stor text.

När kontrastkraven INTE gäller

Det finns situationer där kontrastkraven inte är obligatoriska. Att känna till dessa undantag hjälper dig undvika onödigt arbete:

1. Logotyper och varumärkestext – Text som är del av en logotyp eller varumärkesnamn har inget minimikrav. Din företagslogga behöver inte ändras.

2. Inaktiva element – Knappar eller formulärfält som är disabled och inte går att interagera med är undantagna. Men var försiktig – överanvänd inte detta!

3. Rent dekorativ text – Text som inte förmedlar information, till exempel bakgrundsmönster med upprepade ord.

4. Text i bilder som innehåller annan visuell information – Om en bild visar ett foto av en skylt, och det finns alternativ text som beskriver innehållet, är texten på skylten undantagen.

Viktigt: Undantagen är snäva. Om du är osäker, anta att kravet gäller.

Ett vanligt misstag: Placeholder-text i formulär är INTE undantagen. Den måste också klara 4.5:1 – vilket ofta inte sker med standardgrått.

Verktyg för att testa kontrast

Det finns många sätt att kontrollera kontrast. Här är de mest använda:

Design-verktyg:

Webbaserade verktyg:

Automatiska scanners:

Kom ihåg att automatiska verktyg missar kontrast på bilder, gradient-bakgrunder och dynamiskt genererat innehåll. Manuell granskning behövs alltid som komplement.

Praktiska tips för designers

1. Testa tidigt i processen. Innan du presenterar en design för kunden, kör kontrasten genom ett verktyg. Det tar 30 sekunder och sparar timmar senare.

2. Bygg färgpar, inte enskilda färger. Definiera vilka kombinationer som är tillåtna: 'Primärblå text på vit bakgrund: OK. Primärblå text på ljusgrå: EJ OK.'

3. Håll text borta från bilder. Text över fotografier är nästan alltid problematisk eftersom bakgrunden varierar. Lägg texten på en solid yta istället.

4. Var extra försiktig med grått. Grå nyanser är luriga – de ser ofta ut att ha tillräcklig kontrast men klarar sällan 4.5:1 mot vit bakgrund. #767676 är gränsen.

5. Dokumentera godkända kombinationer. Skapa en kontrastmatris i ert designsystem som visar vilka färger som får kombineras.

Kontrast för grafiska element (WCAG 2.1)

WCAG 2.1 introducerade kriterium 1.4.11 som kräver 3:1 kontrast för grafiska element som är nödvändiga för att förstå innehållet. Detta inkluderar:

En vanlig miss: Minimalistiska formulär med bara en underline som fältmarkering. Om underline är ljusgrå på vit bakgrund syns den knappt.

De vanligaste kontrastproblemen vi hittar

Efter att ha skannat tusentals webbplatser med Xrayd ser vi samma mönster om och om igen:

1. Ljusgrå brödtext – Designers vill ha 'soft' känsla men grå under #767676 når inte 4.5:1 mot vitt.

2. Vit text på pastellfärger – Ljusblå, ljusgrön, ljusorange – ingen av dem fungerar med vit text.

3. Färgade knappar med vit text – Speciellt gröna och orange call-to-actions.

4. Placeholder-text i formulär – Standardgrått når sällan kravet.

5. Footer-länkar – Ofta mörkgrå text på mörkare grå bakgrund.

Dessa problem är enkla att fixa om de hittas tidigt. Mörkna textfärgen eller ljusna bakgrunden – ofta räcker en minimal justering.