Color Contrast Analyzer: rozšíření na testování kontrastu pro Google Chrome

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

• Color Contrast Analyzer for Chrome na webu NC State University
• Color Contrast Analyzer for Chrome: Text in Images, Gradients, PDFs and More
• Color Contrast Analyzer na Google Chrome Store

How to measure font size on a web page

Web Content Accessibility Guidelines 2.0 methodology uses relative luminance algorithm for the evaluation of contrast. This algorithm is based not only on used colors, but also on size of text. The visual presentation of text and images of text have a contrast ratio of at least 4.5:1 for text size up to 18 point or 14 point bold or a contrast ratio of at least 3:1 for text size bigger than 18 point or 14 point bold.

It sounds logical and at first sight there are no difficulties. Especially in cases, when we work with text, size of which is defined in points. We launch for example Colour Contrast Analyzer, measure the values and we get the result. But what to do when the text size is defined in other units - em, pixels, percents...? In what case does the text have its size 18 point or 14 point bold? This is what we have to know to determine which value of contrast ratio (4.5:1 ar 3:1) is relevant for us.

Some, yet not an easy-to-use solution offers the large scale (text) definition from WCAG 2.0:

For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use.

This paragraph contains the answer to question how we can easily convert various units. But still we don´t know, how to easily measure size of a particular text where we want to evaluate its contrast.

In practice I use the solution based on add-on Context Font for Firefox and conversion table Convert em,px,pt and % in CSS. Because Context Font add-on measures sizes in pixels, it´s necessary to convert sizes 14 and 18 points to pixels. Then the visual presentation of text and images of text have a contrast ratio of at least 4.5:1 for text size up to 24 pixels (18 points, 1.5em, 150%) or 19 pixels (14 points, 1.2em, 120%) bold or a contrast ratio of at least 3:1 for text size bigger than 24 pixels or 19 pixels bold.

I realize that the values are rounded, but based on my own experience I don´t think that this rounding has any negative impact on the accessibility of the text.

Jak změřit velikost písma na webové stránce

Metodika WCAG 2.0 i česká Pravidla přístupnosti používají 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. Minimální kontrastní poměr pro běžné písmo do velikosti 18 bodů nebo tučné písmo do velikosti 14 bodů je 4,5:1, pro běžné písmo nad 18 bodů nebo tučné písmo nad 14 bodů je minimální kontrastní poměr 3:1.

Což všechno zní logicky a na první pohled bezproblémově. Obzvlášť v případě, kdy pracujeme s textem, který má definovánu velikost v bodech. Spustíme například Colour Contrast Analyzer, změříme hodnoty, a je to. Jak ale postupovat, pokud pro definování velikosti písma zvolíme jiné jednotky - em, px, procenta...? Kdy má takový text velikost 18 či 14 bodů (u tučného písma), abychom mohli určit, která hodnota kontrastního poměru je pro něj relevantní?

Jisté - ale v praxi ne úplně jednoduše použitelné - řešení nabízí vysvětlení termínu large scale (text) z metodiky WCAG 2.0. Zde se píše:

For many mainstream body text fonts, 14 and 18 point is roughly equivalent to 1.2 and 1.5 em or to 120% or 150% of the default size for body text (assuming that the body font is 100%), but authors would need to check this for the particular fonts in use.

Tento odstavec nám dává odpověď na otázku, jak to je s těmi velikostmi písma. Stále ale nevíme, jak velikost textu, jehož kontrast chceme otestovat, jednoduše změřit.

Řešení, které používám já, kombinuje add-on Context Font pro Firefox a převodní tabulku Convert em,px,pt and % in css. Protože Context Font měří velikosti v pixelech, je potřeba si mezní hodnoty 14 a 18 bodů převést na pixely. Pak:

Minimální kontrastní poměr pro běžné písmo do velikosti 24 pixelů (18 bodů, 1.5em, 150%) nebo tučné písmo do velikosti 19 pixelů (14 bodů, 1.2em, 120%) je 4,5:1, pro běžné písmo nad 24 pixelů nebo tučné písmo nad 19 bodů je minimální kontrastní poměr 3:1.

Jsem si vědom toho, že hodnoty při převodech jsou zaokrouhleny, ale na základě vlastních zkušeností se nedomnívám, že by zaokrouhlení hodnot mělo nějaký zásadní vliv na výslednou přístupnost měřeného textu.

Související odkazy

• Testování kontrastu barev