Hlavní navigace

Má váš web správně vyvážené barvy?

 Autor: 29
Petr Stohwasser 10. 1. 2008

Analyzér kontrastu barev je šikovný nástroj na zjišťování vzájemného kontrastu dvou barev. Pomocí něj lze dosáhnout dostatečně kontrastního textu na webových stránkách, avšak umí toho mnohem více. Jak vnímají www stránky například barvoslepí uživatelé? Za pomoci analyzéru se můžete na web podívat očima některých zrakově hendikepovaných uživatelů.

Proti první verzi doznal nový analyzér několika změn a rozšíření, která si představíme a ukážeme si, jak pracovat s tímto užitečným (a bohužel stále málo rozšířeným) programem. S verzí 2.0 také operují nová Pravidla tvorby přístupného webu; konkrétně se jedná o pravidlo číslo 6.

První spuštění

Při prvním spuštění se objeví následující obrazovka:

1 - Colour Contrast Analyzer

Největším rozdílem oproti první verzi je výpočet kontrastu podle nového algoritmu – světelnosti. Tento algoritmus používají nová Pravidla pro tvorbu přístupného webuWCAG 2.0. Dává trochu jiné a podrobnější výsledky než algoritmus starší – rozdíl jasu/rozdíl barvy, a je o něco přísnější. Ostatně v tomto programu si můžeme algoritmus zvolit a výsledky porovnat; se starším logaritmem však operují pouze starší česká pravidla přístupnosti a WCAG 1.0.

Jak to funguje

Nahoře se nacházejí dvě políčka, do kterých zadáváme barvu v hexadecimálním zápisu či pomocí RGB notace (změnu na příslušnou formu zápisu lze provést v nabídce Možnosti), případně můžeme barvu vybrat z palety barev, která se objeví po rozkliknutí roletky.

V nabídce Možnosti můžeme navíc nechat zobrazit posuvníky pro ruční doladění barevného odstínu. Měnit lze také velikost, styl a font písma popisků programu.

Pro pohodlné určení barvy je k dispozici kapátko, u kterého si můžete navíc určit i velikost plochy – od 1 px do 8×8 px. Větší plocha kapátka se hodí zejména v případech, kdy barva není na celé ploše, na které se nachází text, stejná (např. různé přechody apod.). Pokud v takovém případě zvolíte větší plochu kapátka, použije se „průměrná barva“ vybrané plochy.

2 - Světelnost

Výběr plochy kapátka

3 - ukázka

Po kliknutí na ikonu kapátka se zobrazí lupa čtvercového tvaru umožňující pohodlné nasátí barvy, například i malého písma.

Po zadání obou barev se v dolní části obrazovky zobrazí výsledky i s ukázkou pro normální a větší text. Pokud zaškrtneme políčko Zobrazit detaily, objeví se vysvětlující a doplňující informace.

Důležité:

Pro česká Pravidla tvorby přístupného webu je důležitý výsledek s označením „AA“. Pokud se ve výsledcích objeví hláška „Vyhovuje (AA)“ a jako algoritmus je zvolena „Světelnost“, je dle těchto pravidel přístupnosti kontrast dostatečný. Pokud se ve výsledcích objeví i hláška „Vyhovuje (AAA)“, kontrast je na velmi dobré úrovni.

Po zaškrtnutí políčka Ukázat výsledky kontrastu i pro snížený barvocit se objeví výsledky kontrastu i pro některé zrakové handicapy.

4 - kontrast

Za mírný nedostatek lze považovat absenci zobrazení zelené „fajfky“ v případě, že kontrast je dostatečný, tak jako tomu bylo v první verzi.

Simulace zrakového postižení

V analyzéru kontrastu barev verze 2.0 můžeme najít velmi zajímavou a užitečnou funkci, kterou je simulace zrakového postižení. Máme tak skvělou možnost nechat si zobrazit stránku tak, jak ji vidí člověk s příslušným zrakovým handicapem, a posoudit, zda je pro tyto uživatele naše stránka vůbec použitelná.

Po kliknutí na Simulace zrakového postižení vyjede roletka se třemi možnostmi – Vybrat okno, Vybrat obrázek a Výřez obrazovky.

Vybrat okno

Pokud zvolíme tuto možnost, objeví se nám následující obrazovka:

5 - podrobnosti

Vlevo nahoře máme seznam otevřených oken, pod ním možnosti náhledu vybraného okna. Dále můžeme nastavit i kvalitu komprese a náhled případně uložit.

Nyní si ukážeme, jak vypadá Lupa.cz například pro uživatele s protanopií (omezená schopnost rozeznat červenou barvu) a pro uživatele s šedým zákalem.

Pozn.: Po výběru okna a náhledu je třeba vždy stisknout tlačítko Náhled (případně použít klávesovou zkratku Alt+n).

ž - prothanopie

Protanopie (omezená schopnost rozeznat červenou barvu)

7 - katarakta

Katarakta (šedý zákal)

Vybrat obrázek

Po zvolení této možnosti se objeví podobná obrazovka jako v případě volby Vybrat okno. Jediný rozdíl je pouze v tom, že namísto seznamu otevřených oken je zde možnost výběru obrázku ve formátu JPEG či BMP v počítači.

Výřez obrazovky

Opět podobná funkce umožňující zobrazení jednotlivých náhledů. U této funkce máme navíc možnost přímo porovnat, jak vypadá náhled a skutečný obraz, který se nachází vně výřezu.

8 - výřez (šedý zákal)

Výřez části obrazovky (simulace šedého zákalu)

Ze seznamu vpravo nahoře pak stačí vybrat příslušný náhled. Celým oknem můžeme pohybovat pomocí myši či po stisknutí písmene „M“ pomocí šipek na klávesnici.

Slabiny a konkurence

Krom již zmíněné chybějící zelené „fajfky“ jako rychlého ukazatele, zda je kontrast dostatečný i pro zrakově hendikepované uživatele, je zřejmě největší slabinou program samotný. Přece jenom se jedná o další program, a při snaze si práci co nejvíce zjednodušit dají webdesigneři spíš na vlastní zrak v domnění, že „to stačí“, což je škoda.

Co se týká konkurence tohoto programu, v podstatě žádná není. Existují sice různé online validátory kontrastu či simulátory zrakových handicapů, avšak výhoda recenzovaného programu je ve sloučení všech těchto služeb do jedné aplikace a samozřejmě její nezávislost na internetovém připojení. Navíc již využívá také nového algoritmu pro výpočet kontrastu.

Za mírnou konkurenci by se dalo označit rozšíření pro Firefox – Colour Contrast Analyser Firefox Extension, díky němuž můžeme rychle a pohodlně ověřit všechny kontrasty na stránce. Neobsahuje však tolik funkcí jako Analyzér kontrastu barev verze 2.0 a je limitováno použitím pouze v prohlížeči Firefox.

EBF16

Autoři, kde stahovat, podmínky užití

Analyzér kontrastu barev verze 2.0 je freeware licencovaný pod Creative Commons License. Byl vyvinut Junem ve spolupráci se Stevenem Faulknerem. Do češtiny ho přeložil Petr Stohwasser (autor tohoto článku, stáhnout českou verzi programu si můžete na jeho blogu).

Stáhnout další jazykové verze či verzi pro Mac, případně dozvědět se další informace můžete na těchto stránkách.

Anketa

Testujete důkladně přístupnost vámi spravovaných webů?

Našli jste v článku chybu?
DigiZone.cz: Nejnovější špičkové TV ve videu

Nejnovější špičkové TV ve videu

DigiZone.cz: Na jaká videa se vlastně díváme

Na jaká videa se vlastně díváme

Podnikatel.cz: Vrcholový řídící zaměstnanec za 75 tisíc

Vrcholový řídící zaměstnanec za 75 tisíc

Vitalia.cz: Fyzioterapeutka: Chůze naboso? Rozhodně ano!

Fyzioterapeutka: Chůze naboso? Rozhodně ano!

Měšec.cz: TEST: Vyzkoušeli jsme pražské taxikáře

TEST: Vyzkoušeli jsme pražské taxikáře

120na80.cz: Zázrak ze smetiště: co léčí lopuch?

Zázrak ze smetiště: co léčí lopuch?

DigiZone.cz: Nova opět stahuje „milionáře“

Nova opět stahuje „milionáře“

Podnikatel.cz: Babišovi se nedá věřit, stěžovali si hospodští

Babišovi se nedá věřit, stěžovali si hospodští

Vitalia.cz: Voda z Vltavy před a po úpravě na pitnou

Voda z Vltavy před a po úpravě na pitnou

Vitalia.cz: Tohle jsou nejlepší česká piva podle odborníků

Tohle jsou nejlepší česká piva podle odborníků

120na80.cz: Co je padesátkrát sladší než cukr?

Co je padesátkrát sladší než cukr?

Vitalia.cz: 7 příčin neplodnosti u žen: pravda a mýty

7 příčin neplodnosti u žen: pravda a mýty

DigiZone.cz: DVB-T2 ověřeno: seznam TV zveřejněn

DVB-T2 ověřeno: seznam TV zveřejněn

Lupa.cz: Proč jsou firemní počítače pomalé?

Proč jsou firemní počítače pomalé?

Podnikatel.cz: „Lex Babiš“ Babišovi paradoxně pomůže

„Lex Babiš“ Babišovi paradoxně pomůže

Podnikatel.cz: 5 věcí, které o EET ještě nevíte

5 věcí, které o EET ještě nevíte

Lupa.cz: Blíží se konec Wi-Fi sítí bez hesla?

Blíží se konec Wi-Fi sítí bez hesla?

120na80.cz: Galerie: Čínští policisté testují českou minerálku

Galerie: Čínští policisté testují českou minerálku

Vitalia.cz: Když bílkoviny, tak jíme ty nekvalitní

Když bílkoviny, tak jíme ty nekvalitní

Lupa.cz: Patička e-mailu závazná jako vlastnoruční podpis?

Patička e-mailu závazná jako vlastnoruční podpis?