Pro testování dostatečného kontrastu barev lze v současné době použít celou řadu nástrojů. Ten, který bychom Vám rádi dnes představili, funguje jako rozšíření pro Google Chrome, jmenuje se Color Contrast Analyzer a vyvinuli jej v IT Accessibility Office na NC State University.
Nástroj funguje na principu analýzy snímku obrazovky, určuje pixel po pixelu, kde se mění kontrast a ověřuje shodu s danou úrovní standardu WCAG 2.0. Což mimo jiné přináší tu výhodu, že je možné pomocí něj jednoduše testovat texty v obrázcích a texty, které mají jako pozadí barevný přechod nebo obrázek. K otestování je možné si vybrat
- určitou část stránky (zde jsem narazil na problém, že je možné výběr udělat pouze nad přehybem stránky),
- viditelnou část stránky,
- celou webovou stránku.
Výsledkem analýzy je zobrazení náhledu stránky se zvýrazněním prvků, které splňují danou úroveň shody se standardem WCAG 2.0.
Jak nástroj používat
Po stažení rozšíření se na panelu Chrome objeví jeho ikona (Chrome doporučuji restartovat, aby byly k dispozici všechny funkce tohoto rozšíření). Po načtení stránky, kterou chceme zkontrolovat, si aktivací ikonky otevřeme menu s možnostmi volby rozsahu testované oblasti. Pokud zvolíme „Celou stránku“, spustíme test s přednastavenými hodnotami. Zvolíme-li „Vymezit oblast stránky“ (Capture Page Region), zobrazí se na stránce výběrové okno, které můžete přesouvat, měnit mu velikost a vybrat si tak jen tu oblast, kterou chceme testovat. Test spustíme potvrzením tlačítka O.K. Tato možnost je výhodná, chceme-li zkontrolovat jen určitou část stránky, protože výrazně zkrátí čas testu.
V Nastavení (Options) můžeme zvolit vyhodnocení shody s doporučením WCAG 2.0 pro úrovně AA nebo AAA.
Po skončení testu se zobrazí stránka překrytá šedou maskou, z níž vystupují pouze ty prvky, u kterých jsou hranice mezi barvami natolik odlišné, aby splňovaly zvolené požadavky na dostatečný kontrast. Jestliže je nějaký vizuální prvek na stránce, který není zobrazen na výstupní masce, pak tento prvek stránky není dostatečně kontrastní vzhledem k parametrům, podle kterých kontrast testujeme.
Metodika WCAG 2.0 používá pro měření dostatečného vzájemného kontrastu barev algoritmus světelnosti, u kterého kromě použitých barev hraje roli i velikost písma. Nástroj s ní ale nepočítá a její změření je tak na nás. Jak na to je možné se dočíst například v článku Jak změřit velikost písma na webové stránce.
Další možnosti
Kromě webových stránek lze tímto způsobem analyzovat téměř jakýkoliv soubor, který umí Chrome otevřít: jedná se například o formáty JPEG, PNG a PDF. U PDF souborů je analýza omezena pouze na viditelnou část dokumentu.
Doporučení WCAG 2.0 pro dostatečný kontrastní poměr se týkají pouze k textu. Nástroj ale umí odhalovat i případné chyby u netextových položek, jakými jsou například okraje formulářových prvků či ohraničení položek v menu, protože i u těchto objektů - přestože jejich dostatečný kontrast WCAG 2.0 nijak neřeší - je jejich zvýraznění užitečné.
Videoukázka práce s rozšířením Colour Contrast Analyzer
Článek připravili Radek Pavlíček a Martin Klein.
Související odkazy
Americký WebAIM zahájil další ze svých průzkumů mezi uživateli screen readerů: