Bežný text
Cieliť minimálne 4.5:1, ideálne 4.8:1+ ako bezpečnú rezervu.
Merineo WCAG Contrast Helper
Interný nástroj na rýchlu kontrolu kontrastu medzi textom a pozadím podľa WCAG. Slúži hlavne na prevenciu problémov v PageSpeed Insights / Lighthouse accessibility audite.
Input
Zadajte platnú HEX farbu, napríklad #1a1a1a.
Zadajte platnú HEX farbu, napríklad #ffffff.
Pre PageSpeed Insights / Lighthouse je najčastejší problém audit „Background and foreground colors do not have a sufficient contrast ratio“. Pre bežný text cielite aspoň 4.5:1, ideálne s miernou rezervou.
Nastavenia
Posledné kombinácie
Result
4.48:1
Tesne pod cieľom
Ukážka veľkého nadpisu
Toto je ukážka bežného textu, ktorý by mal byť čitateľný aj pri horšom displeji, nižšom jase alebo pre používateľov so slabším zrakom.
AA textFail
AA veľký textFail
AAA textFail
AAA veľký textFail
Minimálna bezpečná veľkosť textu:
Vyhodnocujem…
Čo neprešlo
Použiteľnosť kombinácie
Návrhy kompromisov
Bulk input
Zadajte jednu farbu na riadok. Podporovaný je HEX vo formáte #000 alebo #000000. Voliteľne môžete pridať názov: Primary: #8e44ac.
Bulk result
Zatiaľ nie je vygenerovaná žiadna tabuľka.
| Text | Background | Ratio | AA text | AA large/UI | AAA text | Action |
|---|
WCAG teória
Prečo sa kontroluje kontrast
Kontrola kontrastu podľa WCAG overuje, či je text alebo UI prvok dostatočne rozlíšiteľný voči pozadiu. Nehodnotí estetiku farieb, ale ich čitateľnosť a prístupnosť.
Pomáha predchádzať problémom s čitateľnosťou pre používateľov so zhoršeným zrakom, poruchami vnímania farieb, pri slabšom displeji alebo v horších svetelných podmienkach.
Základné pojmy
- Contrast ratio
- Kontrastný pomer medzi farbou popredia a pozadia. Výsledok je napríklad
4.5:1. - Foreground
- Farba textu, ikony alebo vizuálneho prvku.
- Background
- Farba pozadia, na ktorom je text alebo prvok umiestnený.
- Relative luminance
- Matematická hodnota svetlosti farby, z ktorej sa počíta kontrastný pomer.
Úrovne a limity
Menej ako 3:1 — Fail
Kombinácia nie je bezpečná ani pre veľký text alebo základné UI prvky. V praxi ju treba upraviť.
Ukážka textu s nízkym kontrastom
3:1 — AA veľký text / UI
Minimum pre veľký text, výrazné nadpisy, ikony, hranice inputov a netextové UI komponenty. Nepoužívať pre bežný odsekový text.
Použiteľné iba s výhradami
4.5:1 — AA bežný text
Štandardné minimum pre bežný text. Toto je hlavná hranica, ktorú treba riešiť pri odsekoch, menu, popisoch, cenách, tlačidlách a formulároch.
Použiteľné pre bežný text podľa WCAG AA
7:1 — AAA bežný text
Prísnejšia úroveň. Nie je vždy povinná, ale dáva veľmi dobrú rezervu pre čitateľnosť.
Veľmi dobrý kontrast s rezervou
Praktické odporúčania
Malý / meta text
Pri malých a tenkých fontoch radšej nepoužívať hraničné hodnoty. Odporúčané je 4.8:1+.
Veľké nadpisy
Môžu prejsť od 3:1, ale iba ak sú naozaj veľké alebo výrazné.
UI prvky
Ikony, input border, focus state alebo grafické objekty by mali mať minimálne 3:1.
Text na obrázku
Pri obrázkoch, gradientových pozadiach a overlayoch môže byť reálny kontrast iný než výpočet z jednej farby.
Brand farby
Ak sa brand farba nesmie meniť, zamknite ju a upravujte iba druhú farbu kombinácie.