Uživatelské nástroje

Nástroje pro tento web


pristupnost:overeni_kontrastu

Toto je starší verze dokumentu!


Ověření kontrastu

Jedním z nástrojů, pomocí kterého je možné zjistit, zda kontrast textu a pozadí stránky odpovídá požadavkům na přístupnost, je WebAIM Contrast Checker. Je sice dostupný pouze v angličtině, jeho rozhraní je však jednoduché a intuitivní.

Validátor kontrastu je vhodným nástrojem zejména při tvorbě webu a hledání vhodných barevných kombinací. Pro kontrolu kontrastu již existujících webových stránek je vhodný spíše validátor přístupnosti WAVE, který je s validátorem kontrastu propojen. Pro existující stránky lze případně také použít validátor kontrastu v kombinaci s některým z nástrojů, který z webovém stránky umí získat hexadecimální kód použité barvy (např. Colorzilla).

Obecné informace a doporučení týkající se kontrastu (nejen pro webové vývojáře) najdete v přehledném článku Barevný kontrast na webu a nástroje, které s ním pomohou.

Práce s validátorem WebAIM Contrast Checker

  1. Ve webovém prohlížeči zadejte adresu validátoru: https://webaim.org/resources/contrastchecker/ (viz obr. 1).
    Obr. 1: Rozhraní nástroje WebAIM Contrast Checker

    Obr. 1: Rozhraní nástroje WebAIM Contrast Checker (zdroj: WebAIM Contrast Checker, získáno 2020-04-27)

  2. Do pole Foreground Color zadejte požadovanou hexadecimální hodnotu barvy popředí, tj. písma (pro změnu barvy je obvykle nutné použít klávesu enter)

  3. Do pole Background Color zadejte požadovanou hexadecimální hodnotu barvy pozadí (pro změnu barvy je obvykle nutné použít klávesu enter)

  4. V případě potřeby použijte posuvník pro úpravu jasu barvy (Lightness).

Jak zjistit hodnotu barev na pozadí nebo popředí stránky

Pro zjištění hodnoty barvy pozadí je možné použít validátor přístupnosti WAVE (viz dále), se kterými je WebAIM Contrast Checker propojen. Využít lze také doplněk prohlížeče CollorZilla.


Výsledky testování kontrastu

Vedle polí pro zadání barev popředí a pozadí se ve validátoru zobrazuje číselný poměr kontrastu (Ratio). Nejmenší přijatelný poměr kontrastu je 4,5:1.

Dole se pak zobrazuje zda výsledek splňuje požadavky na vhodný kontrast podle velikosti textu a příklady zobrazení textu v uvedených barvách pro úroveň přístupnosti AA a úroveň AAA (dle metodiky WCAG).

V případě, že je kontrast v pořádku dle metodiky WCAG, zobrazí se zeleně zvýrazněný text „Pass“. Pokud je kontrast nevyhovující, zobrazí se červená text text „Fail“ (viz obr. 2).
 Obr. 2: Výsledky testování kontrastu
Obr. 2: Výsledky testování kontrastu (zdroj: WebAIM Contrast Checker, získáno 2020-04-27)

Pokud chcete odkaz s výsledky testu kontrastu sdílet (e-mailem apod.), klikněte na odkaz „Permalink“ pod číselným poměrem kontrastu a poté zkopírujte adresu v adresním řádku prohlížeče.

Testování kontrastu pomocí validátoru přístupnosti WAVE

WebAIM Contrast Checker je součástí validátoru přístupnosti WAVE. Pokud se na testované stránce vyskytne problém nízkého kontrastu textu a pozadí, v rámci validátoru je možné zjistit poměr kontrastu přímo z hodnocení webové sránky:

  1. Do validátoru na adrese https://wave.webaim.org/ zadejte adresu požadované stránky.

  2. Po načtení výsledků validace zvolte na šedé boční liště vlevo záložku Contrast.

  3. Kliknutím vyberte ikonu označující nízký kontrast prvku, který chcete zkontrolovat Ikona označující nízký kontrast popředí a pozadí.

  4. Na boční liště se zobrazí výsledek kontroly kontrastu nástrojem WebAIM Contrast Checker (viz obr. 3). Obr. 3: Výsledky testování kontrastu ve validátoru WAVE Obr. 3: Výsledky testování kontrastu ve validátoru WAVE (zdroj: WAVE, získáno 2020-04-27)

Podrobnosti o validátoru WAVE najdete v samostatné nápovědě.

Tento web používá cookies. Používáním těchto stránek souhlasíte s ukládáním cookies do vašeho počítače. Také berete na vědomí, že jste si přečetli a porozuměli našim Zásadám ochrany osobních údajů. Pokud nesouhlasíte s odchodem z webu.Více informací
pristupnost/overeni_kontrastu.1600176173.txt.gz · Poslední úprava: 2020/09/15 15:22 autor: linda