Čo je Farebný kontrast?
Farebný kontrast je pomer jasu medzi textom a jeho pozadím, ktorý určuje čitateľnosť obsahu. WCAG štandard vyžaduje minimálny kontrastný pomer 4.5:1 pre bežný text a 3:1 pre veľký text.
Definícia Farebný kontrast
Čo je farebný kontrast
Farebný kontrast vyjadruje rozdiel v jasnosti medzi dvoma farbami — typicky medzi textom a jeho pozadím. Čím vyšší je kontrastný pomer, tým je text čitateľnejší. Podľa štandardu WCAG musí kontrastný pomer dosiahnuť minimálne 4.5:1 pre bežný text a 3:1 pre veľký text (nad 18px tučný alebo 24px normálny).
Nedostatočný kontrast postihuje nielen ľudí so zrakovým postihnutím, ale aj bežných používateľov v nepriaznivých podmienkach — napríklad pri slnečnom svetle na mobile alebo na monitoroch s nižšou kvalitou.
Kontrastné pomery podľa WCAG
- Úroveň AA — minimálne 4.5:1 pre bežný text, 3:1 pre veľký text
- Úroveň AAA — minimálne 7:1 pre bežný text, 4.5:1 pre veľký text
- Grafické prvky — minimálne 3:1 pre ikony, okraje formulárov a grafy
Nástroje na kontrolu kontrastu
Existuje viacero bezplatných nástrojov na overenie kontrastného pomeru:
- WebAIM Contrast Checker — rýchla online kontrola dvoch farieb
- Lighthouse — automatický audit prístupnosti v Chrome DevTools
- Stark — plugin pre Figma na kontrolu kontrastu priamo pri dizajnovaní
- axe DevTools — rozšírenie prehliadača na hĺbkový audit prístupnosti
Praktický príklad
Príklad: Webstránka reštaurácie so svetlošedým textom na bielom pozadí.
Farba textu je #999999 na bielom pozadí #FFFFFF — kontrastný pomer je iba 2.85:1, čo nespĺňa ani úroveň AA. Starší zákazníci alebo ľudia so slabším zrakom text nedokážu prečítať.
Riešenie: Zmena farby textu na #595959 (kontrastný pomer 7:1) zabezpečí čitateľnosť pre všetkých a splní aj prísnejšiu úroveň AAA.
Často kladené otázky
Aký je minimálny farebný kontrast pre web?
Podľa WCAG 2.1 úroveň AA je minimálny kontrastný pomer 4.5:1 pre bežný text a 3:1 pre veľký text (nad 18px tučný alebo 24px normálny).
Ako skontrolovať farebný kontrast?
Použite bezplatné nástroje ako WebAIM Contrast Checker, Lighthouse v Chrome DevTools alebo rozšírenie axe DevTools. Tieto nástroje automaticky vypočítajú kontrastný pomer.
Prečo je farebný kontrast dôležitý?
Nedostatočný kontrast spôsobuje problémy s čitateľnosťou pre ľudí so zrakovým postihnutím, starších ľudí aj bežných používateľov v nepriaznivých svetelných podmienkach. Je to aj právna požiadavka v mnohých krajinách.
Súvisiace pojmy
Potrebujete pomôcť s webom?
Napíšte mi a poradím vám s vaším projektom. Prvá konzultácia je zadarmo a nezáväzná.