Skip to content

Kontrasty se přitahují. Někdy.

Že rád jezdím na kole jsem na sebe propálil už při ukázce firewallu na Holokolo. Nyní tu mám cyklistický magazín MTBS.cz, kam se občas rád mrknu na recenze nových kol nebo zpravodajství z cyklistických závodů. Mám to štěstí, že můj zrak je víceméně v pořádku, přesto je dobrá výzva rozklíčovat všechny titulky. Zkuste si to sami:

Kontrast originál

Jak se vám to četlo?

Kdo za to může?

Hlavním viníkem je tu mizerný kontrast. Minimální kontrastní poměr 4.5/1 znají všichni už od základní školy kódování či designu. Ten nám tady bohužel nepomůže, protože se proti proměnlivému pozadí nedá korektně vyhodnotit:

Kontrast check

Rozumím tomu, že máte na webu hezké fotky, tak je chcete použít. Na druhou stranu tam ještě potřebujete nacpat titulky, tak co s tím designér udělá? Prskne tam poloprůhledné pozadí a titulky nasází přes něj.

U designéra na počítači to všechno vypadá perfektně, klient to schválí, kodér nakóduje, programátor nasadí a tak dál. Na konci je pak editor, který začne psát články a vkládat k nim fotky. Bohužel jiné, než měl designér ve své ukázce. A výsledek jste viděli.

Co s tím?

Nejbezpečnější varianta je vždy vrazit text pod obrázek. Devadesátkové kompresní weby už stejně nejsou v módě a spacing vašemu webu pomůže k lepší čitelnosti a přehlednosti.

Kontrast úprava

Když už na titulcích v obrázku trváte, tak by v tomto konkrétním případě pomohlo spíše ztmavení pozadí s bílým textem:

Kontrast úprava

Poučení pro příště

Vždy si na jakémkoliv designu obsahujícím fotky vyzkoušejte více druhů fotek. Světlé, tmavé, plné detailů či téměř prázdné. Nikdy nebudete mít kontrolu co se tam kdy může objevit, tak je lepší být připraven než překvapen.

Kontrast test