UX / UI Vysoký dopad Snadné 20–40 min

Kontrast textu vůči pozadí

Text musí mít dostatečný kontrast (WCAG AA 4,5:1).

Co to je

Kontrast je rozdíl světlosti mezi textem a pozadím. Světle šedý text na bílém pozadí má nízký kontrast a špatně se čte. WCAG AA vyžaduje poměr alespoň 4,5:1 pro běžný text.

Proč to řešit

Nízký kontrast vyřazuje uživatele se slabším zrakem a zhoršuje čitelnost pro všechny, zvlášť na mobilu na slunci. Je to častý přístupnostní nedostatek a Google ho v auditech hlásí.

Jak na to

1Ověřte poměr kontrastu (nástroj v prohlížeči nebo online kontrast checker).
2Pro běžný text cílte na ≥ 4,5:1, pro velký text ≥ 3:1.
3Vyhněte se světle šedému textu (#ccc, #ddd) na bílém pozadí.
4Netlumte text příliš nízkou průhledností (opacity).

Příklad

Špatně

.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1, nečitelné */

Správně

.text { color: #374151; background: #ffffff; } /* ~10:1, OK */

Závěr

Dostatečný kontrast je základ čitelnosti i přístupnosti. Naše statická heuristika upozorní na zjevně světlé barvy, ale přesný poměr ověřte v prohlížeči. Tmavší text na světlém pozadí (a naopak) je bezpečná volba.

Související témata