Farebný kontrast pre text, tlačidlá a ikony

Prečo na kontraste záleží

Bledý text stojí čitateľov. Ľudia so slabým zrakom, starší čitatelia a ktokoľvek, kto sa pozerá na telefón na jasnom svetle, potrebujú jasný rozdiel medzi textom a pozadím. Pravidlá Web Content Accessibility Guidelines (WCAG) od W3C preto stanovujú minimálne hodnoty pre text, pre ovládacie prvky ako tlačidlá a vstupné polia a pre ikony a grafiku. Dajú sa zmerať a skontrolovať pred spustením.

Ako funguje kontrastný pomer

Kontrastný pomer porovnáva, aké svetlé sú dve farby. WCAG sa nepozerá na odtieň, ale na relatívnu svietivosť: hodnotu medzi 0 pre najtmavšiu čiernu a 1 pre najsvetlejšiu bielu. Tri kanály, červený, zelený a modrý, sa prepočítajú a vážia: zelená sa počíta najviac, červená menej a modrá najmenej. Pomer je (L1 + 0,05) / (L2 + 0,05), kde L1 je svietivosť svetlejšej farby. Výsledok je medzi 1:1 pre dve rovnaké farby a 21:1 pre čiernu na bielej.

V praxi sú dôležité dve pravidlá W3C. Po prvé, hodnoty sa nezaokrúhľujú: pomer 4,499:1 nespĺňa hranicu 4,5:1. Po druhé, kontrast sa meria voči pozadiu, ktoré je pre text nastavené. Ak stránka nastaví iba farbu textu a žiadnu farbu pozadia, W3C to považuje za nesplnenie, pretože predvolené pozadie návštevníka nie je známe. Vždy nastavuj obe farby spolu.

Tri kritériá úspešnosti

• 1.4.3 Kontrast (minimálny), úroveň AA: text a obrázky textu potrebujú aspoň 4,5:1, veľký text aspoň 3:1.
• 1.4.6 Kontrast (zvýšený), úroveň AAA: text potrebuje aspoň 7:1, veľký text aspoň 4,5:1. Je to prísnejšia úroveň a najviac pomáha pri dlhých textoch.
• 1.4.11 Netextový kontrast, úroveň AA: aspoň 3:1 voči susedným farbám pre všetko, čo potrebuješ vidieť, aby si rozpoznal ovládací prvok a jeho stav (napríklad okraj vstupného poľa alebo indikátor zamerania), a pre časti grafiky potrebné na pochopenie obsahu, ako ikony alebo čiary v grafe.

Čo sa považuje za veľký text

Veľký text má aspoň 18 bodov alebo aspoň 14 bodov tučným písmom. W3C to prepočítava na približne 24 pixelov a približne 18,5 pixela tučným písmom. Veľký text smie mať menší kontrast, pretože písmená sú väčšie a ich ťahy širšie. Pozor na tenké písma: podľa W3C môže vyhladzovanie spôsobiť, že tenké alebo nezvyčajné písma pôsobia bledšie ako ich definovaná farba. Odporúča hrubšie písma alebo dvojicu farieb jasne nad minimom.

Čo nemusí vyhovieť

• Neaktívne komponenty, napríklad vypnuté tlačidlo.
• Čistá dekorácia a text, ktorý nikto nevidí.
• Text, ktorý je súčasťou loga alebo názvu značky.
• Náhodný text na obrázku s iným podstatným obsahom, napríklad uličná tabuľa na fotografii.

Časté chyby

• Svetlosivá na bielej. Sivá pre dátumy, popisky alebo vedľajší text je často príliš bledá: #999999 na bielej dosahuje iba 2,84:1. Najsvetlejšia čistá sivá, ktorá na bielej vyhovuje AA pre bežný text, je #767676 so 4,54:1.
• Text na obrázkoch. Kontrast sa mení s každou časťou fotografie. W3C uvádza obrázky na pozadí bez dostatočného kontrastu ako nesplnenie (F83). Daj text na jednofarebnú plochu, stmav obrázok za ním alebo umiestni text vedľa obrázka. Skontroluj najsvetlejšie miesto za textom.
• Zástupný text (placeholder). Sivá nápoveda v prázdnom vstupnom poli je text a vzťahuje sa naň 1.4.3. Svetlosivá ako #9ca3af na bielej dosahuje iba 2,53:1. Placeholder navyše nenahrádza viditeľný popis.
• Stavy pri prejdení myšou a zameraní. Text, ktorý sa zobrazí alebo zmení pri prejdení myšou alebo zameraní klávesnicou, musí spĺňať rovnaké hodnoty. Efekt pri prejdení myšou nesmie znížiť kontrast ovládacieho prvku ani oslabiť indikátor zamerania. Indikátor zamerania, ktorý si navrhneš sám, potrebuje 3:1 voči susednému pozadiu.
• Biely text na jasných farbách značky. Oranžové, žlté, svetlozelené alebo tyrkysové tlačidlá s bielym textom často nevyhovujú: biela na #ff6600 dosahuje 2,93:1.
• Bledé okraje a ikony. Ak je okraj jediné, čo ukazuje, kde je vstupné pole, potrebuje 3:1: #cccccc na bielej má 1,60:1. Ikony, ktoré nesú význam bez textu, napríklad šípka rozbaľovacieho zoznamu alebo ikona zatvorenia, tiež potrebujú 3:1.
• Kontrola iba jednej témy. Ak má tvoj web tmavý režim, skontroluj jeho dvojice farieb zvlášť. Farba, ktorá funguje na bielej, môže na tmavom pozadí nevyhovieť.

Uprav paletu značky bez straty značky

1. 1Zapíš si každú farbu s jej rolou: text, pozadie, akcent alebo tlačidlo, okraj. Mnohé problémy začínajú, keď jedna farba robí všetko.
2. 2Farbu značky ponechaj tam, kde sa pravidlá ľahšie plnia alebo sa neuplatňujú: v logu, na veľkých plochách, pre dekoráciu a pre veľké nadpisy.
3. 3Pre text a malé prvky použi tmavší alebo svetlejší tón toho istého odtieňa. Ak sa mení iba svetlosť, farba zostane rozpoznateľná: biely text na #c74f00, tmavšej oranžovej, dosahuje 4,61:1.
4. 4Alebo radšej zmeň farbu textu. Tmavý text na jasnej farbe značky často funguje lepšie ako biely: #1a1a1a na #ff6600 dosahuje 5,92:1.
5. 5Urči jednu sivú pre vedľajší text, ktorá vyhovuje, napríklad #767676 na bielej, a používaj ju všade namiesto viacerých bledých sivých.
6. 6Skontroluj každý stav: bežný, prejdenie myšou, zameranie, chyba a tmavý režim. Výsledné farby ulož ako premenné vo svojom štýle, aby už nikto nevyberal bledú farbu ručne.

Skontroluj svoje farby s Do4U

Kontrola farebného kontrastu vypočíta tieto hodnoty pre tvoje vlastné farby. Zadáš svoje farby, jednu na riadok, a každej dáš rolu: text, pozadie, akcent (napríklad tlačidlo) alebo okraj. Kód skontroluje každú zmysluplnú dvojicu voči AA a AAA pre bežný a veľký text a voči 3:1 pre okraje, ikony a plochy tlačidiel, bez zaokrúhľovania nahor. Pre každú dvojicu, ktorá nevyhovuje, dostaneš najbližšiu vyhovujúcu farbu, raz tmavšiu a raz svetlejšiu, v rovnakom odtieni. Do4U vytvorí aj upravenú paletu, znova ju skontroluje ako celok a exportuje ju ako vlastné vlastnosti CSS, SCSS alebo JSON. Všetko beží v kóde, bez AI, a kontrola je zadarmo.

Kontrola pozná iba dvojice farieb, ktoré zadáš. Nevidí veľkosti písma, obrázky za textom, priehľadnosť ani stavy pri prejdení myšou a zameraní, preto otestuj aj hotové stránky. Do4U vytvorí návrh, ty skontroluješ a rozhodneš.