Contrast ratio umožňuje rychle a online ověřit kontrastní poměr dvou barev (typicky barvy popředí a pozadí). Do dvou editačních polí stačí zadat informace o barvách, jejichž vzájemný kontrast chci zjistit, nástroj tyto informace v reálném čase vyhodnotí a zobrazí výsledek. Zadané barvy se současně aplikují i na samotnou stránku, takže je možné i pouhým pohledem zjistit, zda tato barevná kombinace bude dostatečně kontrastní a čitelná.
Hodnota kontrastního poměru je zobrazena v kruhu a ve chvíli, kdy tento kruh získá focus, zobrazí se informace o tom, jak si aktuální kontrast stojí z hlediska požadavků standardu WCAG 2.0. Pokud bych se chtěl podívat, jak bude stránka vypadat v opačném gardu, je možné se mezi barvami pozadí a popředí (textu) přepínat pomocí tlačítka Set as background color.
Informace o naměřených hodnotách jsou přístupné i pro uživatele screen readerů – když tabulátorem přejdu z polí pro zadání hodnot barev, dostanu se na hodnotu s výsledkem měření a když zde stisknu šipku dolů, přečte se také informace z bubliny s oznámením o míře shody s požadavky WCAG 2.0.
Co mi ale u Contrast ratio trochu chybí, je nějaká aspoň stručná nápověda k tomu, jakými způsoby je možné hodnoty barev zadávat.
Za tip na nástroj děkuji Martinu Kleinovi.
Související odkazy
- Color Contrast Analyzer: rozšíření na testování kontrastu pro Google Chrome
- Jak vybrat barvy pro grafický návrh s ohledem na přístupnost
Více k tématu na POSLEPU
A11y Color Palette: nástroj pro měření kontrastu barev
Musí být text neaktivního prvku rozhraní dostatečně kontrastní?
Jak na jednoduchý audit přístupnosti – otestujte si bezbariérovost svého webu
Jak vybrat barvy pro grafický návrh s ohledem na přístupnost
IAAP EU Accessibility Event 2023: Seznamte se s novinkami v digitální přístupnosti v Evropě