Použití vysokého barevného kontrastu pro přístupnější design

Webové standardy pro barevný kontrast

Barevný kontrastní poměr měří rozdíl v kontrastu mezi dvěma barvami. Čím vyšší je hodnota, tím je objekt (text, obrázek, grafika) v popředí od pozadí vzdálenější.

Barvy mohou kontrastovat mnoha různými způsoby, například v odstín, hodnota a nasycení. Barevný kontrastní poměr se vypočítá podle vzorce poskytnutého W3C, hlavní mezinárodní organizací pro standardy World Wide Web.

Může mít hodnotu mezi 1: 1 (žádný kontrast, popředí a pozadí mají stejnou barvu) a 21: 1 (maximální kontrast který existuje pouze mezi černobílým).

Nejdůležitější směrnice WCAG pro webový obsah (WCAG) 2.0 poskytuje webovým vývojářům a tvůrcům obsahu srovnávací měřítka pro minimální (úroveň AA) a vylepšenou (úroveň AAA) hodnotu přijatelného poměru barevného kontrastu.

Úroveň AA vyžaduje alespoň Poměr 4,5: 1 pro běžný text, a 3: 1 pro velký text. Je mnohem snazší číst velký text jako titulky, proto potřebuje nižší barevný kontrast.

Pokud chcete dosáhnout úrovně AAA, což je zvýšená úroveň, musíte navrhnout své barevné schéma s větší péčí, protože vyžaduje alespoň Kontrastní poměr 7: 1 pro normální text, a 4,5: 1 pro velké. Pokud je text součástí loga nebo obchodní značky, není na úrovni WCAG požadován minimální barevný kontrast.

Můžeme zavolat pouze na vizuálně přístupné webové stránky barevný kontrast mezi každým objektem v popředí a jeho pozadím dosahuje alespoň úrovně AA.

Výhody vysokého poměru barevného kontrastu

Zajištěním lepší čitelnosti nezasahujete pouze zrakově postižené uživatele, ale také lidé, kteří čtou váš obsah na malých obrazovkách například na smartphonu nebo smartwatch špatné světelné podmínky, a dále monitorů s nižší kvalitou.

Lidé také čtou rychleji, když je mezi textem a pozadím vyšší kontrast, takže bude s největší pravděpodobností trvat déle, než se s obsahem stránek začnou nudit..

Pokud se obáváte, že použití vyššího kontrastního poměru bude mít negativní vliv na estetiku vašeho návrhu, musíte se podívat na webový projekt Contrast Rebellion, který s příklady ze skutečného života dokazuje, že se stále mohou držet pravidel vysokého poměru kontrastu. v atraktivních a chladných provedeních.

Aplikace Kontrola barevného kontrastu

Existuje mnoho skvělých bezplatných nástrojů po celém webu, které mohou návrhářům pomoci kontrolovat poměr barevného kontrastu jejich webových stránek.

Nejjednodušší způsob, jak otestovat svůj design pro barevný kontrast, je vybrat hlavní barvy pomocí aplikace Photoshop nebo vhodného rozšíření prohlížeče, jako je tento pro Firefox, a zkopírovat hodnoty do jedné z níže uvedených aplikací.

Nejdůležitější věc, kterou je třeba si uvědomit, je, že vždy potřebujete porovnejte barvu popředí, například barvu textu, s okolní oblastí (barva pozadí).

1. Kontrola barevného kontrastu WebAim

WebAim (Web Accessibility In Mind) je organizace podporující webovou dostupnost, která nabízí vývojářům jednoduchou, ale spolehlivou kontrolu barevného kontrastu mezi mnoha dalšími skvělými nástroji pro usnadnění přístupu, jako je Wave, což je aplikace pro obecné usnadnění přístupu, která vám může pomoci rychle zhodnotit problémy s přístupností svých stránek.

Kontrola barevného kontrastu produktu WebAim vám řekne pokud vaše barvy projdou testy WCAG AA a AAA, jak pro normální, tak i pro velké texty.

2. Zkontrolujte kontrast barevného kontrastu

Jonathan Snook, který v současné době pracuje jako vedoucí vývojář v Shopify, hostil svůj praktický nástroj pro kontrolu barevného kontrastu již více než deset let. Aplikace Snook vám umožní změnit hodnoty HSL a RGB popředí a barvu pozadí po jednom pohodlné posuvníky rozsahu dokud nedosáhnete výsledku, který je v souladu se standardy WCAG 2.0.

CheckMyColours

CheckMyColours vytvořené Giovanni Scala vám umožní kontrolovat barevný kontrast všech barevných kombinací pozadí na pozadí na živých webových stránkách.

To počítá kontrastní poměr jasu, rozdíl jasu, a barevný rozdíl, a poskytne vám úplnou zprávu o výsledcích. Zpráva CheckMyColours vám může výrazně usnadnit pochopení toho, jak můžete zlepšit vizuální přístupnost svých stránek.

Návrhář barevného schématu

Barevné schéma Designer není zvláště barevný kontrast kontrola, ale nástroj pro navrhování kompletních barevných schémat.

Zahrneme ji do této kolekce, protože má funkci, která vám umožní vidět, jak vaše barevné schéma vnímají lidé s různými typy zrakového postižení. Můžete otestovat své barvy pro plnou barevnou slepotu, protanopii, deuteranopii a mnoho dalších zrakových postižení. Aplikace má novější verzi nazvanou Paletton, která umožňuje ještě sofistikovanější simulaci vidění (můžete také testovat věci, jako je mizivý LED displej nebo slabý CRT displej).

W3C vám také nabízí obrovský seznam nástrojů pro nástroje Web Accessibility Evaluation, kde můžete najít mnoho dalších nástrojů pro barevný kontrast, jako je například toto užitečné kolo pro usnadnění přístupu..

Tipy pro vytváření vizuálně přístupných webových stránek

Pokud chcete vytvořit vizuálně přístupné webové stránky, je to vždy dobrý nápad Vyvarujte se použití barvy pouze pro vyjádření funkčnosti nebo významu. Typické příklady jsou ikony, které mění barvu na základě jejich aktuálního stavu.

Pokud je to možné, vždy navrhnout další vizuální podněty které pomáhají lidem, kteří vidí různé funkce v porozumění funkcím.

Nikdy nezapomeňte věnujte zvýšenou pozornost barevnému kontrastu tlačítek, odkazů a nabídek, jako jsou prostředky navigace na vašich stránkách. Pokud se uživatelé nemohou na vašich stránkách snadno pohybovat, rychle je ztratíte. Dostupné barvy pro tlačítka volání na akci jsou také rozhodující pro dobrou míru konverze.

Je to dobrá praxe workflow testovat barevný kontrastní poměr co nejdříve v procesu návrhu, protože bude těžké přesvědčit svého klienta, aby změnil barevné schéma webu později v procesu návrhu.

Nyní si přečtěte: Praktický přístup k výběru webových stránek barevné schéma