Audit existujúcej stránky na accessibility compliance. Dizajn brand farieb — overiť, či text na primárnej farbe je čitateľný. Compliance — WCAG 2.1 AA je požiadavka pre EU public sector a US federal. Test, či dark mode farby majú dostatočný kontrast.

Large text definícia. 18pt regular alebo 14pt bold. Iné fonty = iné body size. Logos a UI komponenty. Sú výnimkou. Logo nemusí splňať contrast požiadavky. Tlačidlá. Border alebo background color tlačidla musí mať 3:1 voči pozadiu (graphic contrast). Hover stavy. Aj hover/focus/active musia mať dostatočný kontrast. APCA. Novší contrast algoritmus, ktorý lepšie modeluje skutočné vnímanie. WCAG 3.0 ho preberá.

WCAG Contrast Checker

Skontroluj contrast ratio medzi dvomi farbami. Pass/fail verdikt pre WCAG AA a AAA pri každej veľkosti textu.

Foreground

Background

Výsledok

Aa — Large text 24px / 18px bold

Aa — Normal text 16px

Aa — Small text 12px

Vytvoril JXXR1 · ♥ Sponzorovať · ☕ Kúp mi kávu

Načo to slúži?

WCAG (Web Content Accessibility Guidelines) určujú minimálny contrast ratio medzi textom a pozadím pre čitateľnosť. AA: 4,5:1 (normálny text), 3:1 (veľký text). AAA: 7:1 (normálny), 4,5:1 (veľký). Tento nástroj vypočíta ratio dvoch farieb a povie ti, či splňujú AA / AAA pre malý aj veľký text.

Kedy to použiť

Audit existujúcej stránky na accessibility compliance.
Dizajn brand farieb — overiť, či text na primárnej farbe je čitateľný.
Compliance — WCAG 2.1 AA je požiadavka pre EU public sector a US federal.
Test, či dark mode farby majú dostatočný kontrast.

Časté chyby

Large text definícia. 18pt regular alebo 14pt bold. Iné fonty = iné body size.
Logos a UI komponenty. Sú výnimkou. Logo nemusí splňať contrast požiadavky.
Tlačidlá. Border alebo background color tlačidla musí mať 3:1 voči pozadiu (graphic contrast).
Hover stavy. Aj hover/focus/active musia mať dostatočný kontrast.
APCA. Novší contrast algoritmus, ktorý lepšie modeluje skutočné vnímanie. WCAG 3.0 ho preberá.