Färgkontrastvärde

Färgkontrastvärde mäter luminansskillnaden mellan text och bakgrund för att bedöma läsbarhet för personer med nedsatt syn.

Vad är ett färgkontrastvärde?

Färgkontrastvärde mäter hur olika två färger ser ut för det mänskliga ögat. Det jämför en förgrundsfärg (vanligtvis text) med dess bakgrund och uttrycker resultatet som ett förhållande, till exempel 4,5:1. Ett värde på 1:1 innebär ingen skillnad alls. Maximum, 21:1, är rent svart på rent vitt.^[1]

Varför är färgkontrast viktigt?

Bra kontrast gör det lättare för alla att läsa. Det är avgörande för personer med nedsatt syn, äldre, användare med färgseendebrister (färgblindhet) och alla som läser en skärm i starkt solljus. Dålig kontrast är också ett vanligt hinder för personer med behov av kognitiv tillgänglighet.

Enligt WebAIM:s studie 2024 av en miljon startsidor var låg kontrasttext det allra vanligaste tillgänglighetsfelet. Det hittades på 81 % av de testade sidorna.^[1] På stora, innehållstunga webbplatser — myndighetsinformation, bankinstrumentpaneler, försäkringsformulär — kan dålig kontrast göra kritisk information oläslig.

Hur beräknas kontrastvärdet?

WCAG använder en formel baserad på relativ luminans — ett mått på upplevd ljusstyrka:

Kontrastvärde = (L1 + 0,05) / (L2 + 0,05)

L1 är den ljusare färgens luminans. L2 är den mörkare färgens. Formeln viktar varje färgkanal efter hur det mänskliga ögat fungerar: grönt bidrar mest till upplevd ljusstyrka, blått minst.^[1]

Du behöver inte räkna detta för hand. Många gratisverktyg gör det automatiskt.

Vad kräver WCAG?

WCAG har tre kontrastregler:

1.4.3 Kontrast (minimum) — Nivå AA

Normal text: minst 4,5:1
Stor text (18px+ eller 14px fetstil+): minst 3:1
Logotyper och dekorativ text är undantagna

1.4.6 Kontrast (förbättrad) — Nivå AAA

Normal text: minst 7:1
Stor text: minst 4,5:1

1.4.11 Icke-textkontrast — Nivå AA (tillagt i WCAG 2.1)

Knappar, formulärfält, fokusindikatorer och informationsbärande ikoner: minst 3:1 mot omgivande färger^[2]

Nivå AA är den lagstadgade standarden enligt EU:s och Storbritanniens tillgänglighetsregler. Det gör 4,5:1 för brödtext till det mål de flesta organisationer måste uppnå.

Hur testar man kontrastvärden?

Flera verktyg gör testningen enkel:

Askem färgkontrastkontroll — Ett gratis onlineverktyg som testar alla fem WCAG 2.1-kriterier, föreslår korrigeringar för underkända par och inkluderar simulering av färgblindhet.
Webbläsarens DevTools — Chrome och Firefox visar kontrastvärden i sina tillgänglighetspaneler och färgväljare.
Automatiserade skanningsverktyg — Verktyg som axe, Lighthouse och WAVE flaggar kontrastbrister som del av standardskanningar.
Designverktyg — Figma och Adobe XD har inbyggda eller plugin-baserade kontrastverktyg, så designers kan åtgärda problem innan koden skrivs.

Automatiserade verktyg fungerar bra för enfärgade bakgrunder. Text över bilder, övertoningar eller videor kräver manuell kontroll.

Vilka är de vanligaste kontrastfelen?

Dessa mönster dyker upp i revisioner gång på gång:

Ljusgrå text på vitt — Populärt i minimalistisk design men ofta under 4,5:1.
Platshållartext i formulärfält — Stylad med mycket låg kontrast för att se "inaktiv" ut. WCAG gäller ändå.
Varumärkesfärger — Två mellantoner som ser olika ut för en designer kan ändå misslyckas i kontrasttestet.
Ikonknappar — Enligt WCAG 2.1 måste ikoner som används som kontroller uppfylla 3:1-regeln för icke-textkontrast.
Inaktiverade element — Tekniskt undantagna från WCAG:s kontrastregler, men många organisationer behåller minimikontrast för användbarhetens skull.

Innehålls- och designteam bör kontrollera sina varumärkespaletter mot WCAG innan de låser sina färgval. IT-team bör lägga till kontrastkontroller i sin automatiserade testpipeline. Juridiska team bör veta att kontrastfel är bland de enklaste problemen för tillsynsmyndigheter att upptäcka. Kontrastproblem dyker också ofta upp i formella tillgänglighetsrevisioner.

Vad sägs om WCAG 3.0?

Den nuvarande kontrastformeln har kända svagheter, särskilt med blå text och mycket feta typsnitt. WCAG 3.0, som fortfarande är under utveckling, föreslår en ny metod som kallas APCA (Advanced Perceptual Contrast Algorithm). APCA hanterar fler teckenstorlekar, vikter och färgkombinationer bättre. APCA är ännu inte en officiell standard.^[3]

Så hjälper Askem

På stora innehållswebbplatser — myndighetsportaler, bankinstrumentpaneler, försäkringsformulär — dyker kontrastfel ofta upp i stora mängder när en mall eller varumärkesfärg ändras. Kontinuerlig tillgänglighetsövervakning kontrollerar kontrastvärden på varje sida mot WCAG 1.4.3 och 1.4.11 automatiskt. Verktyg som Askem fångar dessa brister direkt och skickar en varning, istället för att låta dem gå oupptäckta till nästa revisionscykel. Rapporter visar vilka sidor som berörs, vilket gör det enkelt för design- och innehållsteam att prioritera åtgärder.

Källor

W3C — WCAG 2.2 Success Criterion 1.4.3 Contrast (Minimum): https://www.w3.org/TR/WCAG22/#contrast-minimum
W3C — WCAG 2.2 Success Criterion 1.4.11 Non-text Contrast: https://www.w3.org/TR/WCAG22/#non-text-contrast
W3C — WCAG 3.0 APCA contrast method (Working Draft): https://www.w3.org/TR/wcag-3.0/