Použitie vysokej farebnej kontrastu pre prístup k dizajnu

Webové štandardy pre farebný kontrast

Farebný kontrast meria rozdiel v kontraste medzi dvoma farbami. Čím vyššia je hodnota, tým je ľahšie rozlíšiť objekt (text, obrázok, grafiku) v popredí od pozadia.

Farby môžu kontrastovať mnohými rôznymi spôsobmi, ako napr odtieň, hodnota a nasýtenia. Farebný kontrastný pomer sa vypočíta podľa vzorca poskytnutého W3C, hlavnou organizáciou medzinárodných noriem pre World Wide Web.

To môže mať hodnotu medzi 1: 1 (žiadny kontrast vôbec, popredie a pozadie majú rovnakú farbu) a 21: 1 (maximálny kontrast že existuje len medzi čiernymi a bielymi).

Najnovšie smernice W3C pre prístupnosť obsahu obsahu (Web Content Accessibility Guidelines, WCAG 2.0) poskytujú vývojárom webu a tvorcom obsahu referenčné hodnoty pre minimálnu úroveň (úroveň AA) a zvýšenú hodnotu (úroveň AAA).

Úroveň AA vyžaduje minimálne Pomer 4,5: 1 pre bežný text, a 3: 1 pre veľký text. Je to oveľa jednoduchšie čítať veľký text ako titulky, preto je potrebný nižší farebný kontrast.

Ak chcete dosiahnuť úroveň úrovne AAA, ktorá je vylepšená úroveň, musíte navrhnúť farebnú schému s väčšou starostlivosťou, pretože to vyžaduje aspoň Kontrastný pomer 7: 1 pre bežný text, a 4.5: 1 pre veľké. Ak je text súčasťou loga alebo názvu značky, na úrovni WCAG neexistuje žiadna minimálna požiadavka na farebný kontrast.

Webovú stránku môžeme nazvať vizuálne prístupnou len vtedy, ak farebný kontrastný pomer medzi každým objektom popredia a jeho pozadím dosahuje minimálne úroveň AA.

Výhody vysokého pomeru farebného kontrastu

Zabezpečením lepšej čitateľnosti sa nezúčastňuje iba zrakovo postihnutých používateľov, ale aj ľudia, ktorí čítajú váš obsah na malých obrazovkách ako napríklad smartphone alebo smartwatch zlé podmienky osvetlenia, a ďalej monitory nižšej kvality.

Ľudia tiež čítajú rýchlejšie, keď je medzi textom a pozadím vyšší kontrast, takže s najväčšou pravdepodobnosťou bude trvať dlhšie, kým sa nudí obsahom stránky.

Ak sa obávate, že aplikácia vyššieho kontrastu bude mať negatívny vplyv na estetiku vášho dizajnu, musíte sa pozrieť na projekt webového kontrastného povstania, ktorý dokáže s príkladmi z reálneho života dokázať, že dodržiavanie pravidiel s vysokým kontrastným pomerom v atraktívnych a chladných vzorkách.

Aplikácie na kontrolu farebného kontrastu

Existuje veľa skvelých bezplatných nástrojov na celom webe, ktoré môžu pomôcť návrhárom skontrolovať farebný kontrastný pomer svojich webových stránok.

Najjednoduchší spôsob testovania dizajnu pre farebný kontrast je výber hlavných farieb buď pomocou programu Photoshop, alebo vhodného rozšírenia prehliadača, ako je tento pre Firefox, a skopírujte hodnoty do jednej z nižšie uvedených aplikácií.

Najdôležitejšou vecou, ​​ktorú si musíte pamätať, je, že vždy potrebujete porovnajte farbu popredia, napríklad farbu textu s jej okolím (farba pozadia).

1. WebAim Color Contrast Checker

WebAim (Web Accessibility In Mind) je organizácia podporujúca webovú dostupnosť, ktorá ponúka vývojárom jednoduchý, ale spoľahlivý kontrast farebného kontrastu medzi mnohými ďalšími skvelými nástrojmi dostupnosti, ako je Wave, aplikácia na hodnotenie všeobecnej dostupnosti, ktorá vám môže pomôcť rýchlo posúdiť problémy s prístupnosťou stránok.

Kontrola farebných kontrastov WebAim vám povie ak vaše farby prejdú testami WCAG AA a AAA, ako pre bežné, tak pre veľké texty.

2. Kontrola farebnej kontrastu

Jonathan Snook, ktorý v súčasnosti pracuje ako vedúci developer v spoločnosti Shopify, už viac ako desať rokov prevádzkuje svoj praktický nástroj kontroly kontrastu farieb. Aplikácia Snook vám umožňuje zmeniť hodnoty HSL a RGB farby popredia a pozadia jeden po druhom pomocou pohodlné posúvače rozsahu kým nedosiahnete výsledok, ktorý vyhovuje referenčným kritériám WCAG 2.0.

CheckMyColours

CheckMyColours vytvorený spoločnosťou Giovanni Scala umožňuje skontrolovať farebný kontrast všetkých kombinácií farieb popredia a pozadia na živom webe.

Vypočítava kontrastný pomer svietivosti, rozdiel jasu, a farebný rozdiel, a poskytuje vám úplnú správu o výsledkoch. Správa CheckMyColours môže výrazne uľahčiť pochopenie toho, ako môžete zlepšiť vizuálnu dostupnosť vášho webu.

Návrhár farebných schém

Návrhár farebných schém nie je zvlášť kontrolér farebného kontrastu, ale nástroj pre navrhovanie kompletných farebných schém.

Zahŕňame ju v tejto zbierke, pretože má funkciu, ktorá vám umožňuje zistiť, ako vaša farebná schéma vnímajú ľudia s rôznymi typmi zrakových postihnutí. Môžete otestovať svoje farby pre úplnú farebnú slepotu, protanopy, deuteranopy a mnoho ďalších zrakových postihnutí. Aplikácia má novšiu verziu s názvom Paletton, ktorá umožňuje dokonca aj sofistikovanejšiu simuláciu vízie (môžete tiež vyskúšať také veci ako mizerný LED displej alebo slabý displej CRT).

W3C vám tiež poskytuje obrovský zoznam nástrojov na hodnotenie dostupnosti webových stránok, kde nájdete mnoho ďalších nástrojov na kontrast farieb, ako je tento užitočný farebný kolieska Accessibility.

Tipy na vytvorenie vizuálne prístupných webových stránok

Ak chcete vytvoriť vizuálne prístupnú webovú stránku, vždy je to dobrý nápad vyhnite sa používaniu farby samotnej na vyjadrenie funkčnosti alebo významu. Ikony, ktoré menia farbu na základe aktuálneho stavu, sú typickými príkladmi.

Ak je to možné, vždy Navrhnite ďalšie vizuálne pokyny ktoré pomáhajú ľuďom, ktorí vidia farby pri chápaní funkčnosti inak.

Nikdy nezabudnite venujte zvýšenú pozornosť farebnému kontrastu tlačidiel, odkazov a ponúk, pretože sú to prostriedky na navigáciu na vašich stránkach. Ak sa nemôžu používatelia ľahko pohybovať na vašich stránkach, rýchlo ich stratíte. Dostupné farby pre tlačidlá s výzvou na akciu sú tiež dôležité pre dobré miery konverzie.

Je to dobré pracovné postupy na testovanie farebného kontrastného pomeru čo najskôr v procese návrhu, pretože bude ťažké presvedčiť svojho klienta, aby zmenil farebnú schému lokality neskôr v procese návrhu.

Prečítajte si: Praktický prístup k výberu farebnej schémy webových stránok