Färgkontrast för text, knappar och ikoner

Varför kontrast spelar roll

Blek text kostar läsare. Personer med nedsatt syn, äldre läsare och alla som tittar på en mobil i starkt ljus behöver en tydlig skillnad mellan text och bakgrund. W3C:s Web Content Accessibility Guidelines (WCAG) anger därför minimivärden för text, för kontroller som knappar och inmatningsfält, och för ikoner och grafik. De går att mäta och kontrollera före lansering.

Så fungerar kontrastförhållandet

Kontrastförhållandet jämför hur ljusa två färger är. WCAG tittar inte på kulören utan på den relativa luminansen: ett värde mellan 0 för det mörkaste svarta och 1 för det ljusaste vita. De tre kanalerna rött, grönt och blått omvandlas och viktas: grönt väger tyngst, rött mindre och blått minst. Förhållandet är (L1 + 0.05) / (L2 + 0.05), där L1 är luminansen för den ljusare färgen. Resultatet ligger mellan 1:1 för två likadana färger och 21:1 för svart på vitt.

Två regler från W3C spelar roll i praktiken. För det första avrundas värdena inte: ett förhållande på 4,499:1 klarar inte gränsen 4,5:1. För det andra mäts kontrasten mot den bakgrund som är angiven för texten. Om en sida bara anger en textfärg och ingen bakgrundsfärg räknar W3C det som ett fel, eftersom besökarens standardbakgrund är okänd. Ange alltid båda färgerna tillsammans.

De tre framgångskriterierna

• 1.4.3 Kontrast (minimum), nivå AA: text och bilder av text behöver minst 4,5:1, stor text minst 3:1.
• 1.4.6 Kontrast (förbättrad), nivå AAA: text behöver minst 7:1, stor text minst 4,5:1. Det är den striktare nivån och hjälper mest vid långa texter.
• 1.4.11 Kontrast för icke-textuellt innehåll, nivå AA: minst 3:1 mot färgerna bredvid, för allt du behöver se för att känna igen en kontroll och dess tillstånd (till exempel ramen kring ett inmatningsfält eller en fokusindikator) och för de delar av grafik du behöver för att förstå innehållet, som ikoner eller linjer i ett diagram.

Vad som räknas som stor text

Stor text är minst 18 punkter, eller minst 14 punkter i fetstil. W3C räknar om det till ungefär 24 pixlar och ungefär 18,5 pixlar i fetstil. Stor text får ha lägre kontrast eftersom bokstäverna är större och strecken bredare. Var försiktig med tunna typsnitt: enligt W3C kan kantutjämning få tunna eller ovanliga typsnitt att se blekare ut än sin angivna färg. W3C rekommenderar tjockare typsnitt eller ett färgpar som ligger klart över minimum.

Vad som inte behöver klara kraven

• Inaktiva komponenter, som en avaktiverad knapp.
• Ren dekoration och text som ingen kan se.
• Text som är en del av en logotyp eller ett varumärkesnamn.
• Tillfällig text i en bild med annat betydande innehåll, som en gatuskylt på ett foto.

Vanliga misstag

• Ljusgrått på vitt. Grått för datum, bildtexter eller sekundär text är ofta för blekt: #999999 på vitt når bara 2,84:1. Det ljusaste rena grå som klarar AA för normal text på vitt är #767676 med 4,54:1.
• Text på bilder. Kontrasten ändras med varje del av fotot. W3C listar bakgrundsbilder utan tillräcklig kontrast som ett fel (F83). Lägg texten på en enfärgad yta, gör bilden bakom mörkare eller placera texten bredvid bilden. Kontrollera den ljusaste punkten bakom texten.
• Platshållartext. Den grå ledtråden i ett tomt inmatningsfält är text, och 1.4.3 gäller för den. Ett ljust grått som #9ca3af på vitt når bara 2,53:1. En platshållare ersätter inte heller en synlig etikett.
• Hovrings- och fokustillstånd. Text som visas eller ändras när muspekaren hovrar eller tangentbordsfokus hamnar på den måste klara samma värden. En hovringseffekt får inte sänka kontrasten för en kontroll eller försvaga fokusindikatorn. En fokusindikator som du själv utformar behöver 3:1 mot bakgrunden bredvid.
• Vit text på ljusa varumärkesfärger. Orange, gula, ljusgröna eller turkosa knappar med vit text klarar sig ofta inte: vitt på #ff6600 når 2,93:1.
• Bleka ramar och ikoner. Om ramen är det enda som visar var ett inmatningsfält finns behöver den 3:1: #cccccc på vitt har 1,60:1. Ikoner som bär betydelse utan text, som en pil för en rullgardinsmeny eller en stängningsikon, behöver också 3:1.
• Att bara kontrollera ett tema. Om din webbplats har ett mörkt läge, kontrollera dess färgpar separat. En färg som fungerar på vitt kan misslyckas på en mörk bakgrund.

Rätta en varumärkespalett utan att tappa varumärket

1. 1Skriv ner varje färg med dess roll: text, bakgrund, accent eller knapp, ram. Många problem börjar när en färg gör alla jobb.
2. 2Behåll varumärkesfärgen där reglerna är lättare att uppfylla eller inte gäller: i logotypen, på stora ytor, för dekoration och för stora rubriker.
3. 3För text och små element, använd en mörkare eller ljusare nyans av samma kulör. Om bara ljusheten ändras förblir färgen igenkännbar: vit text på #c74f00, en mörkare orange, når 4,61:1.
4. 4Eller ändra textfärgen i stället. Mörk text på en ljus varumärkesfärg fungerar ofta bättre än vit: #1a1a1a på #ff6600 når 5,92:1.
5. 5Definiera ett grått för sekundär text som klarar kraven, till exempel #767676 på vitt, och använd det överallt i stället för flera bleka gråtoner.
6. 6Kontrollera varje tillstånd: normalt, hovring, fokus, fel och mörkt läge. Spara de slutliga färgerna som variabler i din stilmall, så att ingen väljer en blek färg för hand igen.

Kontrollera dina färger med Do4U

Kontroll av färgkontrast räknar ut de här värdena för dina egna färger. Du anger dina färger, en per rad, och ger var och en en roll: text, bakgrund, accent (till exempel en knapp) eller ram. Koden kontrollerar varje rimligt par mot AA och AAA för normal och stor text och mot 3:1 för ramar, ikoner och knappytor, utan att avrunda uppåt. För varje par som inte klarar kraven får du den närmaste färgen som klarar dem, en gång mörkare och en gång ljusare, i samma kulör. Do4U bygger också en justerad palett, kontrollerar den igen som helhet och exporterar den som CSS custom properties, SCSS eller JSON. Allt körs i kod, utan AI, och kontrollen är gratis.

Kontrollen känner bara till de färgpar du anger. Den kan inte se teckenstorlekar, bilder bakom text, transparens eller hovrings- och fokustillstånd, så testa även de färdiga sidorna. Do4U bygger utkastet, du kontrollerar och bestämmer.