Analyzér konrastu barev CSS 0.2b

Úvod

o co jde?Pravidlo 2.2 metodiky WCAG 1.0 uvádí, že barva popředí a pozadí musí být dostatečně kontrastní, aby byl obsah čitelný i pro osoby se zrakovým postižením nebo při zobrazení na displejích s jinou barevnou škálou. WAI také na svém webu uvádí algoritmus, jak kontrast barev počítat a jaká hodnota je považována za dostatečnou.
(David Špinar, 17.2.2004, Weblog Přístupnost)

optimálníOptimálních hodnot se můžeme dopátrat na webu AERT, kde pod položkou 2.2 (mimochodem se strašně ošklivým názvem) najdeme jak hraniční (minimální) hodnoty, tak i samotný algorimus výpočtu. Jen zopakuji, že minimální hodnota pro rozdíl jasů je 125 bodů (max. 255) a pro rozdíl barev 500 bodů (max. 765). Čím jsou tyto čísla větší, tím je písmo více kontrastní a tudíž více čitelné.

Fičurky

0.2bvýcuc několika drobností:

• Načítá i barvy z CSS souborů vložených do HTML pomocí @import "[http://domain.tld/|./]cokoliv.css". Což logicky nefunguje a uploadovaných souborů.
• Načítá i barvy z CSS souborů vložených do HTML pomocí <link rel="stylesheet" href="[http://domain.tld/|./]cokoliv.css" .* />.
• Akceptuje i URI bez konkrétně zadaného souboru (URI na adresář - např://soundake.info/).
• Zobrazuje názvy barev definované v CSS 2.0.
• Akceptuje i URI na adresář i bez koncového lomítka.

Limity

CSSSkript rozpozná pouze barvy zadané dle předpisu CSS 2.0. Proto je dobré, před započetím testování ověřit validitu souboru.

soubor z diskuZpracovává pouze soubory s platným mimetype text/css nebo text/html (RFC 2318), přičemž je velikost omezena na celkem přijatelných 20kB. Omezena je i velikost souborů na webu.

webové stránkyOmezena je i velikost souborů na webu. Akceptovány soubory s příponami .html, .htm, .xml, .asp, .php, .phtml, .php3, .php4, .php5 a logicky i .css.

ruční zadáváníBarvy se dají zadat i ručně. Zde můžeme zadat jak kompletní CSS dokument, tak i samotné barvy, které je nutné oddělit středníkem. U hexadecimálně zapsaných nezapomenout na #!.

počet barevPočet barev v souboru či textu není omezen. Roste však doba nutná ke spočítání všech barev a jejich vykreslení. Zároveň se zvyšuje nepřehlednost tabulky. Navíc používání vysokého počtu barev a jejich odstínů není pro tvorbu www stran příliš vhodné.

Tabulka barev

co vidímeZobrazuje veškeré kombinace barev. Všechny jsou vyjádřeny pomocí zkráceného hexadecimálního vyjádření. Po najetí na barevnou kombinaci vyskočí okénko (prozatím jen bublinka), kde najdete následující údaje:

• hex: pozadí/text (RGB prostor - hexadecimální vyjádření)
• rgb: pozadí/text (RGB prostor - decadické vyjádření)
• hsb: pozadí/text (HSB prostor)
• css: pozadí/text (pojmenované barvy dle CSS)
• bd: xxx (rozdíl jasů)
• cd: xxx(rozdíl barev)
• res: [vyhovuje|částečně|nevyhovuje] (vyhodnocení)

poznámkaMnohdy se stane, že určitá barevná kombinace je nevyhovující, přestože je vaším zrakem čitelná. WCAG však pamatuje i na zrakově slabší občany minimální hodnoty jsou proto nastaveny poněkud výše (někde se uvádějí i hodnoty 200 pro jas a 400 pro barvu), než by musely býti.

Zdroje & relevantní odkazy

• Web Content Accessibility Guidelines 1.0 -> Guideline 2.2
• Algoritmus výpočtu kontrastu barev
• weblog Přístupnost Davida Špinara
• Kontrast barev Sovy v síti
• Colour Contrast Analyser od JuicyStudio