UX / UI Vysoký dopad Ľahké 20–40 min

Kontrast textu voči pozadiu

Text musí mať dostatočný kontrast (WCAG AA 4,5:1).

Čo to je

Kontrast je rozdiel svetlosti medzi textom a pozadím. Svetlosivý text na bielom pozadí má nízky kontrast a zle sa číta. WCAG AA vyžaduje pomer aspoň 4,5:1 pre bežný text.

Prečo to riešiť

Nízky kontrast vyraďuje používateľov so slabším zrakom a zhoršuje čitateľnosť pre všetkých, zvlášť na mobile na slnku. Je to častý prístupnostný nedostatok a Google ho v auditoch hlási.

Ako na to

1Overte pomer kontrastu (nástroj v prehliadači alebo online kontrast checker).
2Pre bežný text cieľte na ≥ 4,5:1, pre veľký text ≥ 3:1.
3Vyhnite sa svetlosivému textu (#ccc, #ddd) na bielom pozadí.
4Netlmte text príliš nízkou priehľadnosťou (opacity).

Príklad

Zle

.text { color: #bbbbbb; background: #ffffff; } /* ~1.9:1 — nečitateľné */

Správne

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

Záver

Dostatočný kontrast je základ čitateľnosti aj prístupnosti. Naša statická heuristika upozorní na zjavne svetlé farby, ale presný pomer overte v prehliadači. Tmavší text na svetlom pozadí (a naopak) je bezpečná voľba.

Súvisiace témy