Kontrast (minimum)

Vad kriteriet kräver

Text och bilder av text måste ha ett kontrastförhållande på minst 4,5:1 mot sin bakgrund. Stor text — definierad som 18pt (24px) normal vikt eller 14pt (18,66px) fet — kräver bara 3:1. Förhållandet beräknas från förgrunds- och bakgrundsfärgernas relativa luminans. Logotyper, varumärkesnamn och rent dekorativ text är undantagna. Inaktiva kontroller är också undantagna, men observera: det undantaget är smalare än designers vanligtvis tror.

Hur du uppfyller det

• Kör varje text-på-bakgrund-kombination genom en kontrastkontroll (axe DevTools, WebAIM, Stark, Figma-tillägg). Nå minst 4,5:1.
• För ljusgrå platshållartext i formulärfält, höj den till minst 4,5:1 mot fältbakgrunden — platshållartext är text.
• Granska hero-sektioner med text över bild. Bakgrundsfärgen varierar per pixel, så kontrollera det sämsta området eller lägg till ett mörkt överlager.
• För mörkt läge, beräkna om varje förhållande — färgtoken som klarar vitt misslyckas ofta på nästan svart.
• För varumärkesfärger som misslyckas på vitt, gör varumärkesfärgen mörkare enbart för text; behåll originalet för grafik.
• För knappar är det etikett-mot-knappbakgrundskontrasten som gäller — inte knapp-mot-sidkontrasten.

Vanliga fel

• Ljusgrå hjälptext (#999 på #fff = 2,85:1) i formulärfält — misslyckas grovt.
• Vit text på en varumärkefärgad knapp där varumärkesfärgen har medelhög mättnad (orange, gulgrön, teal).
• Hero-rubriker placerade över fotografier utan överlager — kontrasten varierar över bilden och sjunker ofta under 3:1.
• Platshållartext som använder samma färg som etiketten men med mindre vikt, vilket gör den till sidans lägst kontrasterade element.
• “Inaktiva” eller “avaktiverade” knappar stilsatta vid 2:1, vilket är godkänt om de verkligen är icke-interaktiva — men de är ofta fortfarande fokuserbara, vilket bryter mot undantaget.
• Mörkt-läge-token som speglar ljust läge utan omberäknade förhållanden — #bbb på #222 är nära godkänt men inte riktigt.

Varför det spelar roll

1.4.3 är det vanligaste enskilda felet i WCAG-granskningar, utan undantag. Lighthouse, axe, Stark och alla automatiserade verktyg flaggar det tillförlitligt, så det är också det billigaste att upptäcka. Åtgärden är vanligtvis en enda design-token-ändring som sprider sig genom hela systemet — gör det en gång, testa en gång, leverera. Att hoppa över det är nästan alltid en avvägning mellan varumärke och tillgänglighet som slutar i ett klagomål.