Jak navrhnout dobře čitelný a přístupný web ve Sketchi? Aneb kontrast je náš přítel.

Naším cílem je dosáhnout toho, aby byl web dobře čitelný, kontrastní a dal se jednoduše skenovat očima. Dnes vám doporučím jeden nástroj.

Dobrý vs. špatný kontrast textu

Když na Dribbblu to mají všichni takhle…

Určitě to znáte. Denní chleba web designera je třeba Dribbble nebo Behance, kde se inspirujeme, co zrovna frčí, kdo a co jak vyřešil a podobně.

Je to neskutečný zdroj dobrých prací. Většinou. Je potřeba si uvědomit, že přestože jde o výběrové práce, ne každý musí mít hned pravdu a musíme se podle něj řídit. Berme práce ostatních s rezervou a používejme mozek a vzdělávejme se.

Všechny ty weby jsou tak krásné a čisté. Proč?

Designeři pracují hodně s odstíny barev textu. Musím uznat, že tlumenější odstíny barev působí jemněji a ladněji pro naše oči. Při návrhu reálného webu, ale narazíme. Chceme totiž, aby byl kvalitní a přístupný pro všechny.

Ten web je tak kráááásný a čistýýýý.

Kontrast textů je důležitý

Nejdůležitější na webu je obsah. Text je to, co nás zajímá. Musí být dobře čitelný a rozpoznatelný. Toho dosáhneme tak, že bude ve vysokém kontrastu s jeho pozadím.

Já jsem v tomto dlouho chyboval. „Všichni na tom Dribbblu prezentují své návrhy s vybledlými texty, které vypadají tak čistě a elegantně,“ říkal jsem si.

Když jsem pak ukazoval svoje návrhy ostatním, upozorňovali mě na čitelnost textu. Na jeho kontrast. Pokorně jsem informaci přijal a vzal si rady k srdci.

Pak mi kolega Lukáš (zdravím tě) doporučil nástroj (plugin) do Sketche.

Plugin do Sketche, který se hodí

Ten nástroj se jmenuje Stark. Možná jej znáte. Kdo ne, tomu snad pomůže.

Co nástroj umí?

Umí tyto dvě věci:

  1. Simulovat poruchy zraku
  2. Vyhodnotit kontrast mezi dvěma vrstvami, které si zvolíme (text a pozadí)

Simulace poruchy zraku

Je dobré si na konci návrhu webu zapnout tento nástroj a vyzkoušet si, jak se zobrazí člověku s danou zrakovou poruchou.

Nabídka možností pro simulaci poruch zraku
Simulace poruchy zraku

Kontrola kontrastu

Pro mě o dost důležitější je kontrola kontrastu. Plugin funguje tak, že vybereme dvě vrstvy, mezi nimiž chceme kontrast porovnat, a nástroj poté vyhodnotí podle standardu, jestli jsme uspěli nebo ne.

Ukázka horšího kontrastu

Ukázka vyhodnocení kontrastu mezi pozadím a textem. V tomto případě text na pozadí možná přečteme, ale pro dosáhnutí standardu musíme kontrast zvýšit, abychom utvrdili, že web přečte opravdu každý, na každém zařízení a s případnou poruchou zraku.

Ukázka dobrého kontrastu

V této ukázce jsme si vedli lépe. Kontrast je dostačující a odpovídá všem standardům. Můžeme s čistým svědomím pokračovat v návrhu.

Jak si hlídám kontrast já

Nebudeme si nic nalhávat. Pokud dodržíme standardy kontrastu, ubírá to lehce (ne závratně) na vzhledu webu. Ale na druhou stranu je přístupný a použitelný pro maximální množství publika.

Je dobré najít kompromis

Nejprve je potřeba ujasnit si, kdo si bude web prohlížet. Budou to staří lidé? Je možnost, že ho navštíví lidé s poruchou zraku? Z jakého zařízení si ho budou prohlížet? Atd.

Já se přiznám, že jsem si kontrast začal hlídat nedávno. Používám pro kontrolu Stark. Nicméně vyhodnocení beru s rezervou. V momentě, kdy se mi zobrazí samé červené křížky, zamyslím se nad tím a kontrast zvýším.

V momentě, kdy se zobrazí jedna zelená faječka, bude text dobře čitelný ve většině případů a to mi někdy stačí. Podle situace.

Dělám kompromis mezi přístupností a designem. Ne vždy se snažím o stoprocentní dodržení standardu, ale vždy texty minimálně nástrojem zkontroluji. Většinou zjistím, že je potřeba barvu textů ještě upravit.

V ideálním případě bychom měli pro maximální přístupnost webu dodržet co nejlepší kontrastní standard.

Stark je dobrý pomocník a doufám, že se vám nástroj bude líbit.🙂


Více o mně najdete na mém webu.