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
- „Vidíš, nevidíš, běžíš“ – od března se celá Česká republika opět rozsvítí sérií Nočních běhů pro Světlušku - 6. 3. 2025
- Hledáme dobrovolníky na Noční běh pro Světlušku 2025 v Brně - 3. 3. 2025
- Časté bariéry na webech a v aplikacích: Jak je odhalit a odstranit (pozvánka na webinář, 21. 3. 2025) - 3. 3. 2025