Přístupné webové stránky

Příručka pro knihovny

Uživatelské nástroje

Nástroje pro tento web

Umístění: Metodické příručky pro knihovny » Přístupné webové stránky » Ověření kontrastu
Historie:
pristupnost:overeni_kontrastu

Rozdíly

Zde můžete vidět rozdíly mezi vybranou verzí a aktuální verzí dané stránky.

Odkaz na výstup diff

Obě strany předchozí revizePředchozí verze
Následující verze		Předchozí verze
pristupnost:overeni_kontrastu [2020/09/15 15:11] – lindapristupnost:overeni_kontrastu [2020/09/24 13:34] (aktuální) – epub
Řádek 1: Řádek 1:
 ====== Ověření kontrastu ====== ====== 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 [[https://webaim.org/resources/contrastchecker/|WebAIM Contrast Checker]]. Je sice dostupný pouze v angličtině, jeho rozhraní je však jednoduché a intuitivní.+Jedním z nástrojů, který umožňuje zjistit, zda kontrast textu a pozadí stránky odpovídá požadavkům na přístupnost, je [[https://webaim.org/resources/contrastchecker/|WebAIM Contrast Checker]]. Je sice dostupný pouze v angličtině, ale jeho rozhraní je 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í. +Validátor kontrastu je užitečný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ř. [[pristupnost:zjisteni_barev|Colorzilla]]).+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é stránky umí získat hexadecimální kód použité barvy (např. [[pristupnost:zjisteni_barev|ColorZilla]]).
  
  
Řádek 12: Řádek 12:
 ===== Práce s validátorem WebAIM Contrast Checker ===== ===== Práce s validátorem WebAIM Contrast Checker =====
  
-  - Ve webovém prohlížeči zadejte adresu validátoru: https://webaim.org/resources/contrastchecker/ (viz obr. 1). \\ {{:pristupnost:webaim_contrast_checker.png|Obr. 1: Rozhraní nástroje WebAIM Contrast Checker}} \\ //Obr. 1: Rozhraní nástroje WebAIM Contrast Checker (zdroj: [[https://webaim.org/resources/contrastchecker/|WebAIM Contrast Checker]], získáno 2020-04-27)// +  - Ve webovém prohlížeči zadejte adresu validátoru: https://webaim.org/resources/contrastchecker/ (viz obr. 1). \\ {{:pristupnost:webaim_contrast_checker.png|Obr. 1: Rozhraní nástroje WebAIM Contrast Checker}} \\ \\  //Obr. 1: Rozhraní nástroje WebAIM Contrast Checker (zdroj: [[https://webaim.org/resources/contrastchecker/|WebAIM Contrast Checker]], získáno 2020-04-27)// \\ \\  
-  - 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**) +  - 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). \\ \\  
-  - Do pole Background Color zadejte požadovanou hexadecimální hodnotu barvy pozadí (pro změnu barvy je obvykle nutné použít klávesu **enter**)  +  - Do pole **Background Color** zadejte požadovanou hexadecimální hodnotu barvy pozadí (pro změnu barvy je obvykle nutné použít klávesu enter). \\ \\  
-  - V případě potřeby použijte posuvník pro úpravu jasu barvy (Lightness). \\ +  - V případě potřeby použijte posuvník pro úpravu jasu barvy (**Lightness**). \\ 
  
 <WRAP center tip > <WRAP center tip >
 ==== Jak zjistit hodnotu barev na pozadí nebo popředí stránky ==== ==== 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 [[pristupnost:overeni_kontrastu#testovani_kontrastu_pomoci_validatoru_pristupnosti_wave|(viz dále)]], se kterými je WebAIM Contrast Checker propojen. Využít lze také doplněk prohlížeče [[pristupnost:zjisteni_barev|CollorZilla]].+Pro zjištění hodnoty barvy pozadí je možné použít [[pristupnost:overeni_kontrastu#testovani_kontrastu_pomoci_validatoru_pristupnosti_wave|validátor přístupnosti WAVE]], se kterými je WebAIM Contrast Checker propojen. Využít lze také doplněk prohlížeče [[pristupnost:zjisteni_barev|ColorZilla]].
 </WRAP> \\  </WRAP> \\ 
  
Řádek 27: Řádek 27:
 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. 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 [[pristupnost:wcag#kriteria_uspesnosti_aneb_3_urovne_priority|metodiky WCAG]]).+Dole se pak zobrazuje, zda výsledek splňuje požadavky na vhodný kontrast podle velikosti textu. Nechybějí ani příklady zobrazení textu v uvedených barvách pro úroveň přístupnosti AA a úroveň AAA (podle [[pristupnost:metodika_wcag#kriteria_uspesnosti_aneb_3_urovne_priority|metodiky WCAG]]).
  
-V případě, že je kontrast v pořádku dle metodiky WCAG, zobrazí se zeleně zvýrazněný text "Pass". +V případě, že je podle metodiky WCAG kontrast v pořádku, zobrazí se zeleně zvýrazněný text **Pass**. 
-Pokud je kontrast nevyhovující, zobrazí se červená text text "Fail" (viz obr. 2). \\ {{:pristupnost:contrast_checker_vysledky.png| Obr. 2: Výsledky testování kontrastu}} \\ //Obr. 2: Výsledky testování kontrastu (zdroj: [[https://webaim.org/resources/contrastchecker/|WebAIM Contrast Checker]], získáno 2020-04-27)//+Pokud je kontrast nevyhovující, zobrazí se červený text **Fail** (viz obr. 2). \\ {{:pristupnost:contrast_checker_vysledky.png| Obr. 2: Výsledky testování kontrastu}} \\ //Obr. 2: Výsledky testování kontrastu (zdroj: [[https://webaim.org/resources/contrastchecker/|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.+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 ===== ===== Testování kontrastu pomocí validátoru přístupnosti WAVE =====
-WebAIM Contrast Checker je součástí validátoru přístupnosti [[pristupnost:celkove_overeni_pristupnosti#hodnoceni_kontrastu_textu_a_pozadi|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: +WebAIM Contrast Checker je součástí validátoru přístupnosti [[pristupnost:celkove_overeni_pristupnosti#hodnoceni_kontrastu_textu_a_pozadi|WAVE]]. Pokud se na testované stránce vyskytne problém nízkého kontrastu textu a pozadí, díky validátoru je možné zjistit poměr kontrastu přímo z hodnocení webové stránky: 
-  - Do validátoru na adrese https://wave.webaim.org/ zadejte adresu požadované stránky. +  - Do validátoru na adrese https://wave.webaim.org/ zadejte adresu požadované stránky. \\ \\  
-  - Po načtení výsledků validace zvolte na šedé boční liště vlevo záložku **Contrast**. +  - Po načtení výsledků validace zvolte na šedé boční liště vlevo záložku **Contrast**. \\ \\  
-  - Kliknutím vyberte ikonu označující nízký kontrast prvku, který chcete zkontrolovat {{:pristupnost:cotrast-icon.png|Ikona označující nízký kontrast popředí a pozadí}}. +  - Kliknutím vyberte ikonu označující nízký kontrast prvku, který chcete zkontrolovat {{:pristupnost:cotrast-icon.png|Ikona označující nízký kontrast popředí a pozadí}}.\\  
-  - Na boční liště se zobrazí výsledek kontroly kontrastu nástrojem WebAIM Contrast Checker (viz obr. 3). Podrobnosti o validátoru WAVE najdete [[pristupnost:celkove_overeni_pristupnosti|v samostatné nápovědě]].{{:pristupnost:wave-contrast.png|Obr. 3: Výsledky testování kontrastu ve validátoru WAVE}} //Obr. 3: Výsledky testování kontrastu ve validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-04-27)//+  - Na boční liště se zobrazí výsledek kontroly kontrastu nástrojem WebAIM Contrast Checker (viz obr. 3). \\ \\  {{:pristupnost:wave-contrast.png|Obr. 3: Výsledky testování kontrastu ve validátoru WAVE}} \\  //Obr. 3: Výsledky testování kontrastu ve validátoru WAVE (zdroj: [[https://wave.webaim.org/|WAVE]], získáno 2020-04-27)// \\ \\  
 +Podrobnosti o validátoru WAVE najdete [[pristupnost:celkove_overeni_pristupnosti|v samostatné nápovědě]]. 
 + 
 + 
 +<-kontrola_hierarchie_nadpisu|Kontrola hierarchie nadpisů^obsah|Obsah^zjisteni_barev|Zjištění barev->
pristupnost/overeni_kontrastu.1600175502.txt.gz · Poslední úprava: 2020/09/15 15:11 autor: linda

Nástroje pro stránku

Kromě míst, kde je explicitně uvedeno jinak, je obsah této wiki licencován pod následující licencí: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki