Färg är ett av de starkaste verktygen i en designers verktygslåda – men den som inte tänker på kontrast riskerar att stänga ute en stor del av sina användare. Text med för svag kontrast blir svår att läsa för personer med nedsatt syn, för de många som har någon form av färgblindhet, och för alla som försöker läsa i starkt solljus eller på en billig skärm. Lägg till att synen försämras med åldern, och det står klart att god kontrast inte är en detalj för specialfall – det är grundläggande, bra design.
Numera är det dessutom ett lagkrav. Genom EU:s tillgänglighetsdirektiv ställs krav på att både offentliga och allt fler privata digitala tjänster ska vara tillgängliga, och den standard som pekas ut är WCAG (Web Content Accessibility Guidelines). Kontrast är en central del av den. Den goda nyheten: när du väl förstår principerna är det enkelt att göra rätt. Du kan kontrollera kontrasten mellan två färger direkt i vårt verktyg medan du läser.
Vad är kontrast (kontrastförhållande)?
Kontrast mäts som ett kontrastförhållande mellan två
färger – till exempel text mot sin bakgrund. Skalan går från
1:1 till 21:1. Ett förhållande på 1:1 betyder
att färgerna är identiskt ljusa (ingen kontrast alls), medan 21:1 är den
maximala kontrasten: helt svart mot helt vitt.
Förhållandet räknas fram ur färgernas relativa luminans – alltså hur mycket ljus varje färg upplevs sända ut, inte vilken nyans den har. Det är därför två färger kan se olika ut men ändå ha svag kontrast: en mellangrå text på en mellangrå bakgrund har liknande luminans oavsett att tonerna skiljer sig. Du behöver inte räkna för hand – poängen är att förstå att det är ljushetsskillnaden, inte färgskillnaden, som avgör om något går att läsa.
WCAG-nivåerna: AA och AAA
WCAG definierar två godkännandenivåer för kontrast. AA är den nivå de flesta riktlinjer och lagkrav utgår från, medan AAA är en strängare nivå att sikta mot när du vill ge bästa möjliga läsbarhet.
För vanlig text gäller (kriterium WCAG 1.4.3):
- AA: minst 4,5:1 för normal text, och 3:1 för stor text.
- AAA: minst 7:1 för normal text, och 4,5:1 för stor text.
Med stor text menas minst 18 punkter, eller 14 punkter om texten är fet. Större text har tjockare bokstavsformer och tål därför lägre kontrast. För grafiska element och komponenter i gränssnittet – ikoner, diagramlinjer, kanten på ett inmatningsfält, en aktiv knapp – gäller kravet 3:1 (kriterium WCAG 1.4.11). Det räcker alltså inte att texten på en knapp har god kontrast; själva knappen måste också gå att urskilja mot sin omgivning.
Färg får inte vara ensam informationsbärare
En regel som är lätt att glömma: färg får aldrig vara det enda sättet att förmedla information (kriterium WCAG 1.4.1). Anledningen är enkel – en användare som inte kan skilja rött från grönt missar hela budskapet om skillnaden bara ligger i färgen.
Använd därför alltid något mer än färg:
- Ett felmeddelande ska ha en text eller ikon, inte bara en röd ram runt fältet.
- En länk i löptext bör vara understruken, inte bara färgad.
- Ett diagram bör skilja serierna åt med mönster, etiketter eller former utöver färgen.
Tänk på färgen som en förstärkning av budskapet – aldrig som hela budskapet.
Vanliga misstag
Samma problem dyker upp om och om igen. Här är de vanligaste kontrastfällorna att hålla utkik efter:
- Ljusgrå text på vitt. Den snygga, dämpade grå tonen ligger nästan alltid under 4,5:1. Populär i design, hopplös att läsa.
- Färgade knappar med för ljus text. Vit text på en ljus eller mättad accentfärg (gul, ljusgrön, cyan) klarar sällan kraven – kontrollera alltid kombinationen.
- Platshållartext som riktig text. Grå placeholder-text har ofta för svag kontrast, och den får aldrig ersätta en synlig etikett.
- Tunn text i små storlekar. Ett tunt typsnitt (thin/light) minskar den upplevda kontrasten även när siffrorna precis går igenom.
Så testar du
Gissa aldrig – mät. Att testa kontrast tar sekunder och sparar dig från problem längre fram.
- Använd ett kontrastverktyg. I vårt verktyg för att kontrollera kontrasten anger du helt enkelt text- och bakgrundsfärg och ser förhållandet samt om det klarar AA och AAA.
- Kontrollera båda textstorlekarna – en färg kan klara kravet för stor text men falla för brödtext.
- Testa även i mörkt läge om din sida har det. Färger som fungerar mot vitt behöver ofta justeras mot mörk bakgrund.
- Simulera färgblindhet för att fånga fall där viktig information vilar enbart på färg.
Vår färgväljare visar dessutom WCAG-kontrasten direkt medan du utforskar en färg, så du fångar problem redan när du väljer paletten.
Praktiska tips
Tillgänglighet blir enklast när den byggs in från början i stället för att lappas ihop i efterhand. Några vanor som gör stor skillnad:
- Börja med hög kontrast och lätta upp. Utgå från en tydligt läsbar kombination och mjuka upp den bara så länge den fortfarande klarar kraven – inte tvärtom.
- Spara en tillgänglig textfärg per bakgrund. Bestäm en godkänd text mot varje bakgrundsfärg och återanvänd den konsekvent i stället för att improvisera från fall till fall.
- Dokumentera i designsystemet. Skriv ner de godkända färgparen som tokens eller riktlinjer, så gör hela teamet rätt utan att behöva testa om varje gång.
Behöver du bygga en genomtänkt palett från grunden hittar du våra verktyg för färgpalett användbara, och vill du se hur färgvalen hänger ihop med resten av designen guidar vi dig i artikeln om att välja färger till din webbplats.
Tillgängliga färger handlar inte om att kompromissa med utseendet – det handlar om att göra design som fungerar för alla. Med rätt siffror i bakhuvudet och ett verktyg nära till hands blir det snabbt en självklar del av arbetsflödet.