Kalkulačka kontrastu farieb
Zadajte farbu textu a farbu pozadia. Hneď uvidíte pomer kontrastu, či spĺňa hranice WCAG pre bežný a veľký text a ako text vyzerá. Ak farby nevyhovujú, kalkulačka navrhne úpravu textu.
- Výsledok hneď
- Hranice WCAG 2.2 AA a AAA
- Nič sa neodosiela
Zadajte farbu v tvare #rgb alebo #rrggbb, napríklad #1e3a8a.
Ukážka bežného textu (16 px): Kaderníctvo v Prešove, objednajte sa online.
Veľký text (24 px)
Objednať saHranice kontrastu podľa WCAG
| Čo sa kontroluje | Úroveň AA | Úroveň AAA |
|---|---|---|
| Bežný text | aspoň 4,5 : 1 | aspoň 7 : 1 |
| Veľký text (okolo 24 px alebo 19 px tučne a viac) | aspoň 3 : 1 | aspoň 4,5 : 1 |
| Prvky rozhrania (okraje polí, ikony) | aspoň 3 : 1 | nie je samostatná hranica |
Bežný cieľ pri firemných weboch je úroveň AA. Pomer sa počíta z relatívnej svetlosti oboch farieb: čierna na bielom má 21 : 1, rovnaké farby 1 : 1. Pomer nehádajte od oka, sivý text na bielom vyzerá v kancelárii elegantne, no na slnku ho nikto neprečíta.
Čo robiť, keď farby nevyhovujú
Najjednoduchšie je stmaviť text alebo zosvetliť pozadie. Tlačidlo „Navrhnúť úpravu textu“ upraví len svetlosť textu, odtieň nechá a zastaví sa pri prvom vyhovujúcom pomere. Farbu značky meňte opatrne: často stačí použiť ju na plochy a tlačidlá a text napísať tmavšou verziou.
Časté otázky
Aký kontrast stačí?
Prečo na kontraste záleží?
Počíta kalkulačka aj obrázok v pozadí?
Čítajte aj
Chcete web s čitateľnými farbami a tmavým režimom?
Kontrast riešime pri návrhu webu a redizajne, svetlý aj tmavý režim s prepínačom navrhujeme ako súčasť webu alebo aplikácie. Cena závisí od rozsahu, ponuku pošleme do 48 hodín.
