Barevný kontrast textu, tlačítek a ikon

Proč na kontrastu záleží

Bledý text stojí čtenáře. Lidé se slabým zrakem, starší čtenáři i kdokoli, kdo se dívá na telefon na ostrém světle, potřebují jasný rozdíl mezi textem a pozadím. Pravidla pro přístupnost webového obsahu (WCAG) od W3C proto stanoví minimální hodnoty pro text, pro ovládací prvky, jako jsou tlačítka a vstupní pole, a pro ikony a grafiku. Dají se změřit a zkontrolovat před spuštěním.

Jak funguje kontrastní poměr

Kontrastní poměr porovnává, jak jsou dvě barvy světlé. WCAG se nedívá na odstín, ale na relativní jas: hodnotu mezi 0 pro nejtmavší černou a 1 pro nejsvětlejší bílou. Tři kanály, červený, zelený a modrý, se přepočítají a zváží: zelená se počítá nejvíc, červená méně a modrá nejméně. Poměr je (L1 + 0,05) / (L2 + 0,05), kde L1 je jas světlejší barvy. Výsledek leží mezi 1:1 pro dvě stejné barvy a 21:1 pro černou na bílé.

V praxi jsou důležitá dvě pravidla W3C. Zaprvé se hodnoty nezaokrouhlují: poměr 4,499:1 nesplňuje hranici 4,5:1. Zadruhé se kontrast měří vůči pozadí, které je pro text nastavené. Pokud stránka nastaví jen barvu textu a žádnou barvu pozadí, W3C to považuje za selhání, protože výchozí pozadí návštěvníka není známé. Vždy nastav obě barvy společně.

Tři kritéria úspěšnosti

• 1.4.3 Kontrast (minimální), úroveň AA: text a obrázky textu potřebují alespoň 4,5:1, velký text alespoň 3:1.
• 1.4.6 Kontrast (zvýšený), úroveň AAA: text potřebuje alespoň 7:1, velký text alespoň 4,5:1. Je to přísnější úroveň a nejvíc pomáhá u dlouhých textů.
• 1.4.11 Kontrast netextových prvků, úroveň AA: alespoň 3:1 vůči sousedním barvám, a to u všeho, co potřebuješ vidět, abys poznal ovládací prvek a jeho stav (například rámeček vstupního pole nebo indikátor fokusu), a u částí grafiky potřebných k pochopení obsahu, jako jsou ikony nebo čáry v grafu.

Co se počítá jako velký text

Velký text má alespoň 18 bodů, nebo alespoň 14 bodů tučně. W3C to převádí na zhruba 24 pixelů a zhruba 18,5 pixelu tučně. Velký text smí mít menší kontrast, protože písmena jsou větší a jejich tahy širší. Pozor na tenká písma: podle W3C může vyhlazování způsobit, že tenká nebo neobvyklá písma vypadají bledší než jejich definovaná barva. Doporučuje silnější písma nebo barevnou dvojici zřetelně nad minimem.

Co procházet nemusí

• Neaktivní komponenty, například vypnuté tlačítko.
• Čistá dekorace a text, který nikdo nevidí.
• Text, který je součástí loga nebo názvu značky.
• Vedlejší text na obrázku s jiným podstatným obsahem, například uliční cedule na fotografii.

Časté chyby

• Světle šedá na bílé. Šedá pro data, popisky nebo vedlejší text bývá příliš bledá: #999999 na bílé dosahuje jen 2,84:1. Nejsvětlejší čistě šedá, která na bílé projde AA pro běžný text, je #767676 se 4,54:1.
• Text na obrázcích. Kontrast se mění s každou částí fotografie. W3C uvádí obrázky na pozadí bez dostatečného kontrastu jako selhání (F83). Dej text na jednolitou plochu, ztmav obrázek za ním nebo umísti text vedle obrázku. Zkontroluj nejsvětlejší místo za textem.
• Text placeholderu. Šedá nápověda v prázdném vstupním poli je text a platí pro ni 1.4.3. Světle šedá jako #9ca3af na bílé dosahuje jen 2,53:1. Placeholder navíc nenahrazuje viditelný popisek.
• Stavy při najetí myší a fokusu. Text, který se objeví nebo změní při najetí myší nebo při fokusu klávesnice, musí splňovat stejné hodnoty. Efekt při najetí nesmí snížit kontrast ovládacího prvku ani oslabit indikátor fokusu. Indikátor fokusu, který si navrhneš sám, potřebuje 3:1 vůči sousednímu pozadí.
• Bílý text na jasných firemních barvách. Oranžová, žlutá, světle zelená nebo tyrkysová tlačítka s bílým textem často neprojdou: bílá na #ff6600 dosahuje 2,93:1.
• Bledé rámečky a ikony. Pokud je rámeček jediné, co ukazuje, kde je vstupní pole, potřebuje 3:1: #cccccc na bílé má 1,60:1. Ikony, které nesou význam bez textu, například šipka rozbalovací nabídky nebo ikona zavření, také potřebují 3:1.
• Kontrola jen jednoho motivu. Pokud má tvůj web tmavý režim, zkontroluj jeho barevné dvojice zvlášť. Barva, která funguje na bílé, může na tmavém pozadí selhat.

Oprav firemní paletu, aniž bys ztratil značku

1. 1Zapiš si každou barvu s její rolí: text, pozadí, akcent nebo tlačítko, rámeček. Mnoho problémů začíná tím, že jedna barva dělá všechno.
2. 2Firemní barvu ponech tam, kde se pravidla splňují snáz nebo neplatí: v logu, na velkých plochách, pro dekoraci a pro velké nadpisy.
3. 3Pro text a malé prvky použij tmavší nebo světlejší odstín stejného tónu. Pokud se mění jen světlost, barva zůstane rozpoznatelná: bílý text na #c74f00, tmavší oranžové, dosahuje 4,61:1.
4. 4Nebo místo toho změň barvu textu. Tmavý text na jasné firemní barvě často funguje lépe než bílý: #1a1a1a na #ff6600 dosahuje 5,92:1.
5. 5Definuj jednu šedou pro vedlejší text, která projde, například #767676 na bílé, a používej ji všude místo několika bledých šedých.
6. 6Zkontroluj každý stav: normální, najetí myší, fokus, chybu a tmavý režim. Výsledné barvy ulož jako proměnné ve stylech, aby už nikdo bledou barvu nevybíral ručně.

Zkontroluj své barvy s Do4U

Kontrola barevného kontrastu vypočítá tyto hodnoty pro tvé vlastní barvy. Zadáš své barvy, jednu na řádek, a každé přidělíš roli: text, pozadí, akcent (například tlačítko) nebo rámeček. Kód zkontroluje každou smysluplnou dvojici vůči AA a AAA pro běžný a velký text a vůči 3:1 pro rámečky, ikony a plochy tlačítek, bez zaokrouhlování nahoru. Ke každé dvojici, která neprojde, dostaneš nejbližší barvu, která projde, jednou tmavší a jednou světlejší, ve stejném tónu. Do4U také sestaví upravenou paletu, znovu ji zkontroluje jako celek a vyexportuje ji jako vlastní vlastnosti CSS, SCSS nebo JSON. Vše běží v kódu, bez AI, a kontrola je zdarma.

Kontrola zná jen barevné dvojice, které zadáš. Nevidí velikosti písma, obrázky za textem, průhlednost ani stavy při najetí a fokusu, proto otestuj i hotové stránky. Do4U sestaví koncept, ty kontroluješ a rozhoduješ.