Kontrast textu podle WCAG: nejčastější nález a jeho oprava
Kontrast je rozdíl v jasu mezi textem a jeho pozadím – vyjadřuje se poměrem, například 4,5 : 1. Vyšší hodnota zpravidla znamená lepší čitelnost. WCAG stanovuje minimální hodnoty podle velikosti a typu obsahu; slabý kontrast patří mezi problémy, se kterými se při auditech setkáváme často.
Běžný problém: barva se posuzuje jen od oka
Slabý kontrast často vznikne při snaze o jemný vizuální styl. Designér zvolí světle šedý text na bílém pozadí a na kvalitním monitoru může výsledek působit čitelně.
Zákazník ho však čte na levném telefonu, na slunci, přes ušpiněné sklo, s unavenýma očima nebo se slabším zrakem – a text může být obtížně čitelný. Nejde přitom jen o lidi se zdravotním postižením: nízký kontrast zhoršuje čitelnost i v běžných podmínkách.
Často jde o šedé popisky pod poli, světlý text na barevném tlačítku, zástupný text ve formuláři místo skutečného popisku nebo „druhotný“ text v patičce. V návrhu mohou působit jako detail, ale přímo ovlivňují čitelnost.
Jak kontrast změřit a vyhodnotit
Kontrast se neodhaduje od oka, ale měří – a WCAG 2.2 na úrovni AA má jasné hranice:
- Běžný text: alespoň 4,5:1.
- Velký text (zhruba od 24 px nebo od 19 px tučně): stačí 3:1.
- Vizuální informace potřebné k rozpoznání ovládacích prvků, ikon a stavů zaměření: zpravidla alespoň 3:1. Kritérium má přesný rozsah a výjimky, proto se neposuzuje každý dekorativní okraj.
Automatický nástroj dokáže u mnoha prvků vypočítat poměr barvy textu a pozadí a uvést konkrétní hodnotu. U přechodů, obrázkového pozadí, průhlednosti nebo některých stavů prvku může být nutné manuální měření. Proto automatickou kontrolu doplňujeme ověřením člověkem.
Řešením bývá drobná úprava odstínu, ne nový návrh celého webu. Často stačí šedou #999 ztmavit na #595959 a nález zmizí, aniž by se vzhled citelně změnil.
Co vám měřitelná pravidla přinesou
- Text bude čitelnější i bez ideálního monitoru, světla nebo zraku.
- Měřitelné pravidlo lze zařadit do designového systému a průběžných kontrol.
- Mnoho nálezů lze opravit úpravou barvy bez přestavby rozhraní.
Další krok
Chcete vědět, kde může mít váš web problém s kontrastem? Ozvěte se nám – bezplatný vstupní sken ukáže první automaticky zjistitelné problémy a u vyhodnotitelných prvků uvede naměřené hodnoty. Zbývající kombinace a interaktivní stavy lze prověřit cíleným manuálním měřením.