Kontrastkrav på webben — vad kräver WCAG?
Låg kontrast är ett av de vanligaste tillgänglighetsproblemen på webben — och ett av de mest konkreta att åtgärda, eftersom kraven är mätbara. WCAG anger exakta gränsvärden: 4,5:1 för normal text, 3:1 för stor text och 3:1 för meningsbärande grafik och komponenter i gränssnittet. För offentlig sektor och många privata aktörer är det lagkrav, inte rekommendationer. Här går vi igenom vad siffrorna betyder, vem som måste uppfylla dem och var det oftast brister.
Vad kräver WCAG?
Två kriterier på AA-nivå styr kontrasten. WCAG 1.4.3 gäller text: normal text ska ha minst 4,5:1 i kontrast mot sin bakgrund, stor text minst 3:1. Stor text är ungefär 24 pixlar, eller 18,5 pixlar om den är fet — gränsen är satt för att större tecken går att urskilja även vid lägre kontrast.
WCAG 1.4.11 gäller det som inte är text men ändå bär mening: ikoner, diagram, kanten på ett inmatningsfält, fokusmarkeringen runt en knapp. Sådan grafik och sådana komponentdelar ska ha minst 3:1 mot angränsande färger. Det är kriteriet som gör att ett nästan osynligt formulärfält eller en ljusgrå ikon kan fälla sidan, även om all text klarar sig.
Kontrastvärdet beräknas ur färgernas ljushet enligt en formel i WCAG. Så länge bakgrunden är en enda färg är det alltså ett objektivt mått, inte en bedömningsfråga.
Vem omfattas?
Offentlig sektor omfattas av DOS-lagen (lagen om tillgänglighet till digital offentlig service), som pekar på den europeiska standarden EN 301 549 — i praktiken WCAG på nivå A och AA. Sedan den 28 juni 2025 gäller dessutom tillgänglighetslagen (2023:254) för privata aktörer som omfattas av EU:s tillgänglighetsdirektiv: bland annat e-handel, banktjänster, persontransporter och elektronisk kommunikation. Kärnan är tjänster riktade till konsumenter — ren B2B omfattas inte.
Vanliga brister vi ser
- Ljusgrå text på vit bakgrund — designtrenden som oftast hamnar under 4,5:1. Brödtext, hjälptexter och placeholder-texter i formulär är klassiska syndare.
- Text lagd ovanpå bilder eller gradienter — hero-ytor med rubriken direkt på ett foto. Kontrasten varierar över ytan, och delar av texten hamnar ofta mot för ljus bakgrund.
- Knappar och formulärfält med för svaga kanter — fältet syns knappt mot bakgrunden, vilket fäller 1.4.11 även när texten i det är godkänd.
- Ikoner som ensamma bär information men ligger under 3:1 — en ljusgrå papperskorg eller pil som användaren förväntas hitta.
- Fokusmarkeringar med för låg kontrast — markeringen finns, men syns inte tillräckligt mot bakgrunden.
Text ovanpå bilder — där mätning inte räcker
Mot en enfärgad bakgrund är kontrast ren matematik. Men ligger texten på ett foto eller en gradient finns ingen enskild bakgrundsfärg att mäta mot — kontrasten kan vara utmärkt i ena änden av rubriken och obefintlig i den andra. Automatiska verktyg hoppar typiskt över de fallen helt.
Det är därför många webbplatser ser "gröna" ut i ett kontrastverktyg men ändå har rubriker som är svårlästa i praktiken — just de ytor som oftast brister är de som aldrig granskas.
Så testar CompliantHQ det här
Basskanningen — som även ingår i provperioden — mäter kontrasten maskinellt på varje skannad sida, som en del av ett automatiskt svep med ett sextiotal regler mot WCAG 2.0/2.1/2.2 på nivå A och AA. Text mot enfärgad bakgrund får ett exakt uppmätt värde mot gränserna 4,5:1 och 3:1.
För text ovanpå bilder och gradienter — där maskinell mätning inte fungerar — tar skannern en skärmdump och låter en vision-AI bedöma läsbarheten. AI:ns slutsatser redovisas alltid som bedömningar, aldrig som konstaterade överträdelser: du ser var den misstänker problem och kan avgöra själv.
Så åtgärdar du
- Mörka texten eller ljusa upp bakgrunden tills värdet når 4,5:1 — kontrasten beror bara på de två färgerna, så det räcker att justera ena sidan.
- Lägg en mörk halvtransparent platta eller toning bakom text som ligger på bilder — då får texten en kontrollerad bakgrund oavsett foto.
- Ge formulärfält och knappar tydliga kanter med minst 3:1 mot bakgrunden.
- Kontrollera varje tillstånd — hovring, fokus och felmarkeringar ärver inte automatiskt godkända färger.
- Skriv in gränsvärdena i designsystemet, så att nya komponenter föds godkända i stället för att lagas i efterhand.
Det här ingår i granskningen
- Text ovanpå bilder och gradienter — där kontrast inte kan mätas maskinellt — bedöms av vision-AI på en skärmdump.
WCAG-kriterier som omfattas
- 1.4.3 Kontrast (minimum) — texten ska ha tillräcklig kontrast mot bakgrunden för att kunna läsas även med nedsatt syn — ljusgrå text på vit botten är det typiska felet. (AA)
- 1.4.11 Kontrast för icke-text — även det som inte är text — ikoner, kanter på inmatningsfält, delar av diagram — ska ha tillräcklig kontrast för att gå att urskilja. (AA)
Vanliga frågor
Vad betyder kontrast 4,5:1?
Det är förhållandet mellan textens och bakgrundens ljushet, beräknat enligt en formel i WCAG. Samma färg mot samma färg ger 1:1, svart mot vitt ger det högsta möjliga värdet. 4,5:1 är gränsen för normal text på AA-nivå.
Vad räknas som stor text?
Ungefär 24 pixlar, eller 18,5 pixlar om texten är fet. Stor text behöver bara nå 3:1 i stället för 4,5:1.
Gäller kontrastkraven logotyper och dekorativ text?
Nej — text i en logotyp och text som är rent dekorativ undantas i WCAG 1.4.3. Men undantaget är smalt: en rubrik är inte dekorativ bara för att den är snyggt stilad.
Räcker det med ett automatiskt kontrastverktyg?
För text mot enfärgad bakgrund, ja — där är mätningen exakt. Text ovanpå bilder och gradienter kan inte mätas maskinellt, eftersom bakgrunden inte är en enda färg. Där behövs en visuell bedömning — av ett öga eller en vision-AI.
Vill du se vad vi hittar på din webbplats?
Kör en gratis skanning — alla fyra moduler ingår i 30 dagar, inget betalkort krävs.