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

Lukáš Augusta
Nov 30, 2018 · 4 min read

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.

Image for post
Image for post
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ýýýý.

Image for post
Image for post

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.

Image for post
Image for post
Nabídka možností pro simulaci poruch zraku
Image for post
Image for post
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

Image for post
Image for post
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.

Navrhujte weby a aplikace?

Možná by se vám mohl líbit můj nový projekt, kde najdete lekce, jak lépe navrhovat uživatelská rozhraní (UI). Jmenuje se Designui.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store