Jak splnit barevný kontrast podle WCAG bez hádání

U běžného textu v odstavcích požaduje úroveň AA podle WCAG kontrastní poměr vůči pozadí nejméně 4,5:1. Velký text potřebuje 3:1. Prvky rozhraní a významově nosná grafika potřebují 3:1. Úroveň AAA zvyšuje text na 7:1 a velký text na 4,5:1. Poměry se pohybují od 1:1 (totožné barvy) po 21:1 (čistá černá na čisté bílé).

Okem to posoudit nejde. Dvě dvojice, které na vašem monitoru vypadají stejně čitelně, mohou ležet na opačných stranách prahu, takže se poměr musí spočítat.

Prahové hodnoty

Vycházejí ze tří kritérií úspěšnosti: 1.4.3 Kontrast (minimální) na úrovni AA, 1.4.6 Kontrast (zvýšený) na úrovni AAA a 1.4.11 Netextový kontrast na úrovni AA, které pokrývá vizuální hranice ovládacích prvků a ty části grafiky, jež potřebujete k jejímu pochopení.

Velký text znamená nejméně 18 bodů, nebo 14 bodů, pokud je tučný, což vychází zhruba na 24px u běžného řezu nebo asi 18,5px u tučného. Neznamená to „nadpis“: nadpis o velikosti 20px je z pohledu pravidel běžný text a potřebuje plných 4,5:1.

Několik věcí je vyňato: čistě dekorativní text, text v neaktivním ovládacím prvku, text, který je součástí obrázku obsahujícího další podstatný vizuální obsah, a logotypy. Zástupný text v polích a nápovědný text vyňaty nejsou.

Co poměr vlastně měří

Vzorec porovnává relativní luminanci obou barev:

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

Relativní luminance je číslo od 0 (černá) do 1 (bílá), které vyjadřuje, kolik světla barva vyzařuje. Počítá se tak, že se u každého kanálu odstraní gama křivka sRGB a kanály se pak zváží:

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

Hodnota 0.05 přičtená na obou stranách modeluje trochu okolního světla odraženého od obrazovky, a proto je maximem 21, a ne nekonečno.

Plyne z toho dvojí. Poměr závisí jen na luminanci, ne na odstínu, takže dvě barvy mohou být odstínem naprosto odlišné a přesto být vůči sobě téměř neviditelné. A je symetrický, takže nezáleží na tom, kterou barvu nazvete popředím.

Relativní luminance není jas

Podívejte se na ty váhy. Zelená přispívá k luminanci asi 72 %, červená asi 21 % a modrá sotva 7 %. Je to model lidského vidění, ne toho, jak sytě barva působí, a dává výsledky, které působí špatně, dokud si na ně nezvyknete.

• Čistá žlutá #FFFF00 na bílé má asi 1,07:1, tedy je téměř neviditelná, přestože žlutá působí jako silná barva.
• Táž žlutá na černé má asi 19,6:1, skoro tolik co bílá na černé.
• Čistá modrá #0000FF na černé má asi 2,4:1 a neprojde ničím, i když působí výrazně a sytě.

Proto je také světlost v HSL špatnou náhradou. Dvě barvy mohou obě ležet na 50% světlosti v HSL a mít velmi odlišnou luminanci, protože HSL považuje odstín a světlost za nezávislé, zatímco zrak ne. Převeďte a změřte, místo abyste předpokládali, že krok ve světlosti je krokem v kontrastu.

Chyby, které se pořád opakují

Šedý text v odstavcích na bílé. Tohle je ta hlavní. Nejsvětlejší šedá, která na bílé projde na AA, je zhruba #767676, což vychází na 4,54:1. O krok světlejší #777777 má 4,48:1 a neprojde. Oblíbené „tlumené“ šedé jako #999999 se pohybují kolem 2,9:1, tedy pod dvěma třetinami požadavku. Pokud chcete na bílé AAA, potřebujete zhruba #595959, což je přesně 7:1.

Zástupný a nápovědný text. Sází se o několik odstínů světleji než hlavní text, protože jsou druhotné. Pořád je to text a pořád potřebuje 4,5:1.

Poloprůhledné barvy. Poměr spočítaný z deklarované barvy nemá smysl, pokud prvek běží na 60% krytí. Spočítejte složenou barvu, která se na obrazovce skutečně objeví, a měřte tu.

Text přes obrázky, přechody a video. Poměr se mění pixel od pixelu a rozhoduje ten nejhorší z nich. Obvyklým řešením je tlumicí vrstva za textem, ne naděje, že fotka zůstane tmavá.

Tlačítka ve firemní barvě. Bílý text na středně tmavé firemní barvě velmi často skončí mezi 3:1 a 4,5:1, takže projde jako grafický objekt a neprojde jako popisek. Ztmavte tlačítko, nebo to selhání vědomě přijměte.

Indikátory zaměření a tlačítka jen s ikonou. Obojí spadá pod netextové pravidlo 3:1. Častým přehlédnutím je zaměřovací prstenec v mírně odlišném odstínu téže barvy, stejně jako šedá ikona, která je jediným obsahem tlačítka.

Tmavý režim vytvořený inverzí. Převrácení světlé palety poměry nezachová, protože luminance není kolem středu symetrická. Čistá bílá na čisté černé dá maximálních 21:1, ale mnoha lidem je to rozzáření nepříjemné, takže běžným kompromisem je lomená bílá na velmi tmavé šedé, například #E6E6E6 na #121212 s poměrem asi 15:1.

Měření ze snímku obrazovky. Kapátko na okraji vyhlazeného textu vzorkuje směs textu a pozadí, ne barvu textu. Vzorkujte střed silného tahu, nebo lépe, přečtěte hodnoty přímo ze svého CSS.

Postup, který se obejde bez hádání

Nejprve zafixujte pozadí, pak popředí ztmavujte nebo zesvětlujte, dokud práh nepřekročí s malou rezervou, a tu dvojici si zaznamenejte. Paletu stavte ze schválených dvojic, ne ze schválených barev: barva není přístupná sama o sobě, jen v kombinaci. Zkontrolujte také každý stav, ne jen ten klidový, a oba motivy, pokud dodáváte tmavý režim.

Poslední poznámka. Pro budoucí verzi WCAG se vyvíjí novější percepční model APCA, který se chová dost jinak, zvlášť u světlého textu na tmavém pozadí. Stojí za to o něm vědět, ale čísla, kterým je třeba vyhovět dnes, jsou poměry z WCAG 2 uvedené výše.