Historien bakom färgkontrastkontrollen

För låg kontrast är ett av de vanligaste tillgänglighetsproblemen på webben. Reglerna ser ut som magiska tal, men vart och ett har ett skäl, kopplat till hur ögat tappar känslighet med åldern och hur skärmar skapar ljus.

Två överlappande färgprover bredvid en lysande kontrastskala
Två överlappande färgprover bredvid en lysande kontrastskala

Var 4,5 och 7 kommer ifrån

WCAG 2.0 blev en W3C-rekommendation i december 2008. Författarna utgick från ett minimum på 3:1 i standarden ISO 9241-3 och höjde det för att väga upp den förlust av kontrastkänslighet som en synskärpa på ungefär 20/40 ger, vanligt runt 80 års ålder. Det gav 4,5:1 för nivå AA. Nivå AAA, 7:1, gör samma sak för en synskärpa på ungefär 20/80.

Relativ luminans

Formeln räknar först om varje sRGB-kanal till linjärt ljus och viktar rött, grönt och blått med 0,2126, 0,7152 och 0,0722, samma vikter som tv-standarden ITU-R BT.709, eftersom ögat är känsligast för grönt. Förhållandet är den ljusare luminansen plus 0,05 delat med den mörkare plus 0,05. Talet 0,05 står för ljus som skärmen reflekterar och begränsar skalan till 1:1 upp till 21:1, svart på vitt.

Mer än text

Stor text, minst 24 px eller 18,66 px i fetstil, går att läsa med lägre kontrast och behöver bara 3:1 för AA. WCAG 2.1 från juni 2018 lade till framgångskriteriet 1.4.11 Kontrast för icke-textuellt innehåll: kanter på inmatningsfält, fokusmarkeringar, ikoner och de delar av ett diagram som behövs för att förstå det ska nå 3:1 mot det som finns bredvid.

Färgblindhet och framtiden

Ungefär 1 av 12 män och 1 av 200 kvinnor har nedsatt färgseende, oftast för rött och grönt. Kontrast mäts på luminans, så ett godkänt par går fortfarande att läsa, men färger som bara skiljer sig i nyans kan se likadana ut. Simuleringen använder modellen av Machado, Oliveira och Fernandes från 2009. Utkast till WCAG 3 undersöker APCA, en nyare metod som också tar hänsyn till textstorlek och om texten är mörk på ljust eller ljus på mörkt.

Ofta ställda frågor

Räcker bra kontrast för tillgänglighet?

Nej. Det är ett krav bland många. WCAG kräver också att färg inte är det enda sättet att visa betydelse, till exempel genom att lägga till en ikon eller understrykning på en länk eller ett fel.

Visar simuleringen exakt vad en person ser?

Den är en god uppskattning av fullständig dikromasi. Många har en mildare form och alla ser lite olika, så använd den som vägledning.

Ska jag använda APCA i stället för WCAG 2-förhållandet?

För överensstämmelse i dag gäller WCAG 2-förhållandet. WCAG 2.2 från oktober 2023 behåller samma formel, och lagar och standarder som EN 301 549 hänvisar till den. APCA är fortfarande under utveckling.

Redo att prova det?

Öppna PictorX i din webbläsare - ingen installation, inget kreditkort krävs för att starta.

Öppna färgkontrastkontrollen