Att klara WCAG:s färgkontrast utan att gissa

För vanlig brödtext kräver WCAG-nivå AA ett kontrastförhållande på minst 4,5:1 mot bakgrunden. Stor text behöver 3:1. Gränssnittskomponenter och meningsbärande grafik behöver 3:1. Nivå AAA höjer text till 7:1 och stor text till 4,5:1. Förhållandena löper från 1:1 (identiska färger) till 21:1 (rent svart på rent vitt).

Detta går inte att bedöma med ögat. Två par som ser lika läsbara ut på din skärm kan ligga på var sin sida om gränsen, så förhållandet måste räknas ut.

Gränsvärdena

De kommer från tre framgångskriterier: 1.4.3 Kontrast (minimum) på AA, 1.4.6 Kontrast (förstärkt) på AAA, och 1.4.11 Kontrast för icke-text på AA, som täcker kontrollernas visuella gränser och de delar av grafiken du behöver för att förstå den.

Stor text betyder minst 18 punkter, eller 14 punkter om den är fet, vilket motsvarar ungefär 24 px normal eller omkring 18,5 px fet. Det betyder inte "en rubrik": en rubrik på 20 px är vanlig text så långt reglerna är berörda och behöver hela 4,5:1.

Några saker är undantagna: rent dekorativ text, text i en inaktiv kontroll, text som ingår i en bild med annat betydelsebärande visuellt innehåll, och logotyper. Platshållartext och hjälptext är inte undantagna.

Vad förhållandet faktiskt mäter

Formeln jämför de två färgernas relativa luminans:

ratio = (L_lighter + 0.05) / (L_darker + 0.05)

Relativ luminans är ett tal från 0 (svart) till 1 (vitt) som representerar hur mycket ljus en färg avger. Den beräknas genom att sRGB-gammakurvan tas bort från varje kanal och kanalerna sedan viktas:

L = 0.2126 R + 0.7152 G + 0.0722 B     (on linearised channels)

De 0.05 som läggs till på båda sidor modellerar lite omgivande ljus som reflekteras i skärmen, vilket är varför maximum är 21 och inte oändligt.

Två saker följer av det. Förhållandet beror bara på luminans, inte på nyans, så två färger kan skilja sig våldsamt i nyans och ändå vara nästan osynliga mot varandra. Och det är symmetriskt, så det spelar ingen roll vilken färg du kallar förgrund.

Relativ luminans är inte ljusstyrka

Titta på vikterna. Grönt bidrar med omkring 72 % av luminansen, rött med omkring 21 % och blått med knappt 7 %. Det är en modell av människans syn, inte av hur mättad en färg ser ut, och den ger resultat som känns fel tills man vant sig.

• Rent gult #FFFF00 på vitt är omkring 1,07:1, nästan osynligt, trots att gult känns som en stark färg.
• Samma gula på svart är omkring 19,6:1, nästan lika högt som vitt på svart.
• Rent blått #0000FF på svart är omkring 2,4:1 och faller på allt, trots att det ser kraftfullt och mättat ut.

Det är också därför HSL-ljushet är ett dåligt närmevärde. Två färger kan båda ligga på 50 % ljushet i HSL och ha mycket olika luminans, eftersom HSL behandlar nyans och ljushet som oberoende och synen inte gör det. Konvertera och mät sedan, i stället för att anta att ett steg i ljushet är ett steg i kontrast.

Misstagen som fortsätter att hända

Grå brödtext på vitt. Detta är det stora. Den ljusaste grå som klarar AA på vitt är omkring #767676, vilket ger 4,54:1. Ett steg ljusare, #777777, ger 4,48:1 och faller. Populära "dämpade" gråtoner som #999999 hamnar kring 2,9:1, mindre än två tredjedelar av kravet. Vill du ha AAA på vitt behöver du ungefär #595959, som är exakt 7:1.

Platshållartext och hjälptext. De sätts flera nyanser ljusare än brödtexten eftersom de är sekundära. De är fortfarande text och behöver fortfarande 4,5:1.

Halvgenomskinliga färger. Ett förhållande hämtat från den deklarerade färgen är meningslöst om elementet ligger på 60 % opacitet. Räkna fram den sammansatta färg som faktiskt syns på skärmen och mät den.

Text över bilder, gradienter och video. Förhållandet ändras från pixel till pixel, och det är den värsta pixeln som räknas. Den vanliga lösningen är en dämpande yta bakom texten snarare än att hoppas att fotot förblir mörkt.

Knappar i varumärkesfärg. Vit text på en varumärkesfärg i mellantonen hamnar mycket ofta mellan 3:1 och 4,5:1, klarar sig som grafiskt objekt och faller som etikett. Gör knappen mörkare, eller acceptera underkännandet medvetet.

Fokusmarkeringar och knappar med bara ikon. Båda faller under 3:1-regeln för icke-text. En fokusring i en aningen annan nyans av samma färg är en vanlig miss, liksom en grå ikon som är en knapps enda innehåll.

Mörkt läge genom invertering. Att vända på en ljus palett bevarar inte förhållandena, eftersom luminansen inte är symmetrisk kring mitten. Rent vitt på rent svart ger maximala 21:1, men många upplever haloeffekten som obehaglig, så en bruten vit på en mycket mörk grå, till exempel #E6E6E6 på #121212 med omkring 15:1, är en vanlig kompromiss.

Att mäta från en skärmbild. En pipett på kanten av kantutjämnad text tar en blandning av text och bakgrund, inte textens färg. Ta prov mitt i ett tjockt streck, eller ännu hellre, läs värdena ur din CSS.

Ett arbetssätt som slipper gissningar

Bestäm bakgrunden först, gör sedan förgrunden mörkare eller ljusare tills den passerar gränsen med lite marginal, och anteckna det paret. Bygg paletten av godkända par snarare än av godkända färger: en färg är inte tillgänglig på egen hand, bara i kombination. Kontrollera varje tillstånd också, inte bara viloläget, och båda temana om du levererar ett mörkt läge.

En sista anmärkning. En nyare perceptuell modell, APCA, utvecklas för en framtida version av WCAG och beter sig ganska annorlunda, särskilt för ljus text på mörk bakgrund. Den är värd att känna till, men siffrorna att följa i dag är WCAG 2-förhållandena ovan.