Kontrast för icke-text

Vad kriteriet kräver

Kontrastregeln i 1.4.3 gäller enbart text; 1.4.11 utvidgar en svagare version (3:1 istället för 4.5:1) till ytterligare två kategorier. För det första måste visuella indikatorer för UI-komponenter — det som talar om att en knapp är en knapp, var fokusringen befinner sig, var formulärfältsgränsen går — nå 3:1 mot den intilliggande ytan. För det andra måste de delar av meningsfull grafik som användaren behöver identifiera — diagramstaplar, ikoner som förmedlar tillstånd, indikatorpunkter — nå 3:1.

Hur du uppfyller det

• Ge varje formulärfält en synlig kant med minst 3:1 mot sidbakgrunden.
• Utforma fokusindikatorer (:focus-visible-kontur) med minst 3:1 mot både komponenten och sidan.
• För spök-/konturknappar måste kanten i sig nå 3:1 mot sidbakgrunden.
• För toggle-switchar måste banan och tummen ha 3:1 kontrast där de möts.
• För ikoner som bär betydelse (“info” i, varningstriangel, bock) måste ikonstrecken nå 3:1 mot sin bakgrund.
• För diagramserier måste färgerna för staplar och linjer vara 3:1 ifrån varandra, eller kombineras med mönster eller textur.

Vanliga fel

• Formulärfält utan synlig kant, eller en #e5e5e5 på #fff-kant vid 1,3:1 — osynlig för synskadade användare.
• Fokuskonturens standardwebbläsarstil åsidosatt med outline: none utan att ersättas.
• Spökknappar med vit text på transparent bakgrund och en 1 px grå kant — knappen är i praktiken osynlig.
• Toggle-switchar med en knappt synlig tumme på ett nästintill matchande spår i “av”-läget.
• Statusikoer i hörnet av ett kort (en grön bock, ett rött kryss) där färgen knappt kontrasterar mot kortbakgrunden.
• Pajdiagram med skivornas färger vid 2:1 mot varandra — seende användare ser fortfarande gränserna, men knappt; synskadade användare ser en enda massa.

Varför det spelar roll

1.4.11 tillkom i WCAG 2.1 och överraskar rutinmässigt team — de flesta kontrastkontroller täcker bara text. Formulärfältskanter, fokusringar och spökknappar är de kanoniska felmönstren. Verktyg som axe och Stark kontrollerar nu icke-text-kontrast, men designers hoppar fortfarande över det vid designtillfället eftersom den mentala standardmodellen är “kontrast = textkontrast”. Åtgärden innebär vanligtvis att kanter görs tjockare och grå toner mörkare i designsystemet.