Pripojenie zlyhalo. Skúste to prosím znova.

Preskočiť na obsah
SEO Tools
Pomocník a dokumentácia
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

  1. 1Overte pomer kontrastu (nástroj v prehliadači alebo online kontrast checker).
  2. 2Pre bežný text cieľte na ≥ 4,5:1, pre veľký text ≥ 3:1.
  3. 3Vyhnite sa svetlosivému textu (#ccc, #ddd) na bielom pozadí.
  4. 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