Varför färgkontraster är viktigare än du tror
En webbplats som ser snygg ut för en ung person med god syn kan vara helt oläslig för någon med nedsatt syn eller för äldre. Felaktiga färgkontraster är en av de vanligaste orsakerna till dålig tillgänglighet på nätet. Tyvärr gör många företag som bygger egna webbplatser, designers och utvecklare misstaget att välja text- och bakgrundsfärger som smälter ihop, till exempel mörk text på mörk bakgrund eller ljus text på ljus bakgrund.
Enligt WCAG (Web Content Accessibility Guidelines) finns det tydliga riktlinjer för hur starka kontrasterna bör vara. Dessa riktlinjer är inte bara bra för människor med funktionsnedsättningar – de förbättrar också läsbarheten för alla användare, oavsett skärm eller miljö.
Så här påverkas olika grupper
- Äldre: Synen försämras ofta med åldern, vilket gör det svårare att uppfatta svaga kontraster. En text som är lättläst för en 25-åring kan vara omöjlig att läsa för en 65-åring.
- Personer med synnedsättning: Många med till exempel grå starr, diabetisk retinopati eller färgblindhet är beroende av starka kontraster för att kunna läsa text.
- Alla andra: Även personer med normal syn upplever bättre läsbarhet när kontrasterna är tydliga. Dessutom minskar risken för ögontrötthet vid längre läsning.
Så mäter du färgkontraster enligt WCAG
WCAG delar in kontraster i tre nivåer: A, AA och AAA. För de flesta webbplatser rekommenderas minst nivå AA, som kräver en kontrastkvot på:
- 4,5:1 för normal text (mindre än 18 punkter eller fetstil mindre än 14 punkter).
- 3:1 för stor text (18 punkter eller mer, eller fetstil 14 punkter eller mer).
Det finns flera verktyg för att kontrollera kontrasterna, till exempel:
- WebAIM Contrast Checker
- Colour Contrast Analyser
- Tillägget WAVE för webbläsare
Vanliga misstag och hur du undviker dem
Många designers och utvecklare gör följande fel:
- För liten textfärg: Text i grå nyanser på vit bakgrund är svårläst för många.
- För liknande färger: Blå text på en ljusblå bakgrund eller grön text på en mörkgrön bakgrund smälter ihop.
- Upphöjd text i fel färg: En vit text på en ljusgrå bakgrund kan vara svår att urskilja.
- Länkar i samma färg som brödtext: Länkar bör alltid ha en tydlig kontrast för att synas.
En bra regel är att alltid testa dina färger med ett kontrastverktyg innan du publicerar. Om du är osäker, välj en mörkare text på ljus bakgrund eller tvärtom – det är alltid säkrare.
Hur du skapar bra kontraster i din design
Här är några konkreta tips för att säkerställa att dina färgkontraster håller hög kvalitet:
1. Använd mörka färger på ljusa bakgrunder (eller tvärtom)
Det enklaste sättet att uppnå bra kontraster är att välja en mörk textfärg på en ljus bakgrund, till exempel svart text på vit bakgrund. Undvik att använda grå text på vit bakgrund – det är ofta för svagt.
2. Testa kontrasten innan du publicerar
Använd ett verktyg som WebAIM Contrast Checker för att kontrollera att din text uppfyller WCAG:s krav. Du kan också prova att zooma in på texten – om den blir svår att läsa är kontrasten för svag.
3. Använd tillräckligt stor text
Ju mindre texten är, desto starkare kontrast krävs. WCAG rekommenderar minst 16 punkter för brödtext, men 18 punkter är ännu bättre för läsbarheten.
4. Undvik färgberoende
Se till att texten är läsbar även om användaren inte kan se färgerna. Till exempel bör länkar inte bara vara blå – de bör också vara understrukna eller ha en annan stil för att sticka ut.
5. Tänk på knappar och interaktiva element
Knappar och länkar bör ha en tydlig kontrast både i normalt tillstånd och när de är aktiva eller hoverade. En knapp med ljus text på en mörk bakgrund ska vara lätt att urskilja.
Exempel på bra och dåliga kontraster
Dåligt exempel
Den här texten är i en grå nyans på en ljusgrå bakgrund. Kontrastkvoten är endast 1,8:1, vilket är långt under WCAG:s rekommendationer.
Bra exempel
Den här texten är svart på vit bakgrund. Kontrastkvoten är 21:1, vilket är långt över WCAG:s krav.
Slutsats: Tillgänglighet gynnar alla
Att följa WCAG:s riktlinjer för färgkontraster är inte bara en fråga om lagstiftning – det handlar om att göra din webbplats tillgänglig för alla. En webbplats med bra kontraster är lättare att läsa, minskar ögontrötthet och ökar användarupplevelsen för alla besökare, oavsett deras förutsättningar.
Så nästa gång du designar en webbplats, tänk på kontrasterna först. Dina användare – oavsett ålder eller synförmåga – kommer att tacka dig.