Barvy a kontrast

Barvy, kontrast a čitelnost jako základ přístupnosti

Volba barev a jejich kontrast přímo ovlivňuje čitelnost, srozumitelnost a přístupnost webu. Přístupnost podle WCAG (Web Content Accessibility Guidelines) vyžaduje, aby vizuální informace byly vnímatelné i pro uživatele s různými formami zrakového postižení, včetně poruch rozlišování barev, snížené zrakové ostrosti či dočasných omezení (oslňující světlo, malý displej). Tento článek shrnuje principy práce s barvami, kontrastem a typografií, a poskytuje praktické návody a kontrolní seznamy pro návrh i implementaci.

Základní princip: informace nesmí být sdělena pouze barvou

Podle zásady „Use of Color“ (WCAG 1.4.1) nelze spoléhat pouze na barvu k předání významu. Vždy doplňte sekundární indikátor: textový popis, ikonu, vzor, podtržení či tvar. Příklad: odkazy uvnitř odstavce by neměly být odlišeny pouze barvou, ale také podtržením, nebo musí mít dostatečný kontrast vůči okolnímu textu i bez podtržení.

Kontrast textu: cílové poměry a výjimky

• Normální text (AA): minimální kontrast 4.5:1 (kritérium 1.4.3).
• Velký text (AA): minimální kontrast 3:1 (velký text = ≥ 18.66 px regular ~ 14 pt, nebo ≥ 14 px bold ~ 18.66 pt).
• Vysoký standard (AAA): 7:1 pro běžný text, 4.5:1 pro velký (kritérium 1.4.6).
• Výjimky: neaktivní (pure decorative) prvky, logotypy, a text v rámci nedůležitých náhledů mohou mít nižší kontrast, nicméně z hlediska použitelnosti je lepší držet se AA i zde.

Kontrast netextových prvků a interaktivních komponent

• Ikony a grafické objekty sdělující význam: minimálně 3:1 vůči sousední barvě (kritérium 1.4.11 – Non-text Contrast).
• Ohraničení polí formuláře, přepínačů a tlačítek: obrys nebo vnitřní symbol (label) musí dosahovat kontrastu alespoň 3:1 vůči sousednímu pozadí.
• Stavové indikátory (error, success): barvu doplňte ikonou a textem; samotná červená/zelená nestačí.

Focus indikátory a navigace klávesnicí

Uživatelé klávesnice a asistivních technologií potřebují zřetelný fokus. Doporučuje se silně kontrastní a dostatečně tlustá focus „outline“ (např. 2–3 px) s kontrastem alespoň 3:1 vůči sousedním barevným plochám. Používejte nativní outline, případně :focus-visible pro kontextové zobrazení.

Jak se kontrast počítá: relativní luminance a vzorec

Kontrast dvou barev A (luminance L₁) a B (L₂) je (L1 + 0.05) / (L2 + 0.05), kde L₁ ≥ L₂. Relativní luminance barvy v sRGB se počítá linearizací každého kanálu (R, G, B v rozsahu 0–1):

1. Pro každý kanál: pokud v ≤ 0.03928, pak v_lin = v / 12.92; jinak v_lin = ((v + 0.055) / 1.055) ^ 2.4.
2. Relativní luminance: L = 0.2126 * R_lin + 0.7152 * G_lin + 0.0722 * B_lin.

Z praktického hlediska používejte ověřené nástroje (axe, Lighthouse, WAVE, Stark, Contrast-Finder) a testujte na skutečných zařízeních i v režimech vysokého kontrastu.

Typografie a čitelnost: víc než jen kontrast

• Velikost textu: výchozí tělo minimálně 16 px; pro dlouhé čtení 17–20 px, podle fontu.
• Délka řádku (measure): ideálně 45–75 znaků, pro mobil 35–50 znaků.
• Řádkování a mezery (WCAG 1.4.12 – Text Spacing): Umožněte uživateli nastavit: line-height ≥ 1.5, mezeru za odstavcem ≥ 2× line-height, letter-spacing ≥ 0.12 em a word-spacing ≥ 0.16 em bez ztráty obsahu nebo funkčnosti.
• Písmo: volte dobře čitelné fonty s jasnými tvary znaků; vyhněte se přílišnému kontrastu tahů u drobných velikostí a tenkým řezům.

Barvoslepost a barevné kombinace

Přibližně 8 % mužů a 0,5 % žen má některou formu poruchy rozlišování barev. Rizikové kombinace jsou zejména červená–zelená a modrá–fialová. Barvy vnímejte jako „podpůrný kanál“, nikoli jako jediný nositel významu. Testujte design v simulátorech (protanopia, deuteranopia, tritanopia) a používejte redundanci (ikona + text + vzor).

Kontrast v grafice, grafech a mapách

• Grafy: rozlišujte datové řady nejen barvou, ale i tvarem markerů, stylem čáry (plná, čárkovaná) a textovým popisem v legendě.
• Heatmapy a mapy: používejte divergující palety s neutrálním středem; přidejte hodnoty do tooltipů a tabulkový výpis.
• Text v obrázcích: preferujte skutečný HTML text; pokud musíte vložit text do obrázku, dodržte kontrastní poměry a dostatečnou velikost.

Stavy prvků: hover, focus, active, disabled a placeholder

• Odkazy vs. okolní text: pokud odkazy nejsou podtržené, rozdíl barvy odkazu vůči okolnímu textu by měl být alespoň 3:1 a zároveň kontrast odkazu k pozadí musí splnit pravidla pro text.
• Placeholder: placeholder text je pomocná nápověda, nikoli náhrada labelu. Měl by být menší prioritou, ale stále čitelný; vyhněte se ultra světlým šedým s nízkým kontrastem.
• Disabled prvky: neaktivní stav nesmí být jedině barvou; doplňte aria-disabled/disabled a změnu kurzoru, případně popisek.

Světlý/tmavý režim a systémové preference

• Media queries: @media (prefers-color-scheme: dark|light) pro palety na míru; testujte kontrast v obou režimech.
• Vysoký kontrast a nucené barvy: @media (forced-colors: active) a respektování systémových palet (Windows High Contrast). Zajistěte viditelnost hranic a focusů bez závislosti na background-image.
• Připravenost na vyšší kontrast: experimentální @media (prefers-contrast: more|less) lze využít pro alternativní styly s výraznějšími obrysy a většími fonty.

Práce s průhledností, překryvy a fotografiemi

Text přes fotografii je častý zdroj problémů. Používejte tmavé (nebo světlé) překryvy s dostatečnou opacitou, nebo barevné boxy pod textem. Vyhněte se gradientům, kde lokálně klesá kontrast pod AA. Kontrolujte kontrast nad skutečnými snímky, ne nad teoretickou barvou pozadí.

Volba palety: semantické barevné tokeny a škálování

• Design tokens: definujte semantické proměnné (např. --color-bg-default, --color-text-strong, --color-link, --color-border) a odvoďte z nich světlý/tmavý režim.
• Stupnice odstínů: připravte škálu (50–900) pro každý odstín a testujte kontrasty nejčastějších kombinací.
• Konzistence: používejte stejný význam napříč aplikací (např. červená = varování), ale vždy s ikonou/textem.

Textové efekty a jemné detaily

• Stíny textu: používejte střídmě; mohou snížit čitelnost. Přednost má jasný kontrast bez efektů.
• Antialiasing a vykreslování: vyhněte se extrémně tenkým řezům u světelného pozadí; zvažte zvýšení font-weight.
• Diakritika: testujte písma s českou a slovenskou diakritikou; špatně vykreslené háčky/čárky výrazně snižují čitelnost.

Proces: jak zavést kontrolu kontrastu do workflow

1. Definujte cíle: organizační standard (minimálně AA, ideálně AAA pro texty obsahu).
2. Návrh: kontrolujte palety v průběhu designu, ne až na konci. Udržujte knihovnu validovaných kombinací.
3. Implementace: linting a testy (axe-core, ESLint pluginy), stylelint pravidla pro barvy a tokeny.
4. CI/CD: Lighthouse a axe v pipeline; ochraňte build „performance & accessibility budgety“.
5. Uživatelské testování: testujte s reálnými uživateli, včetně lidí s poruchami zraku; ověřte různé displeje a světelné podmínky.

Časté chyby a jak se jim vyhnout

• Text přes fotografii bez dostatečného překryvu → přidejte overlay nebo panel pod text.
• Světlý placeholder na světlém pozadí → zvyšte kontrast a použijte label.
• Nepodtržené odkazy stejné barvy jako okolní text → podtrhněte nebo zajistěte rozdíl ≥ 3:1 a dostatečný kontrast k pozadí.
• Kontrast splněn pouze při jedné velikosti fontu → validujte všechny breakpoints a stavy (hover/focus/disabled).
• Kontrast obrysu ovládacího prvku opomenut → obrys/tvar musí mít min. 3:1 vůči sousední barvě.

Check-list pro rychlou kontrolu

• Všechen text splňuje AA (≥ 4.5:1; velký text ≥ 3:1). Důležitý obsah míří na AAA (7:1).
• Ikony, hranice polí a ovládací prvky: kontrast ≥ 3:1.
• Odkazy nejsou odlišeny pouze barvou; mají podtržení nebo rozdíl barvy ≥ 3:1 vůči okolí.
• Focus je zřetelný, minimálně 2 px, kontrastní, nepřekrytý.
• Text lze rozšířit (line-height, spacing) bez rozbití layoutu (1.4.12).
• Design funguje v light/dark režimu a v forced-colors.
• Grafy a mapy používají tvary/patterny a textové popisy, nejen barvu.

Závěr: přístupná barevnost jako standard kvality

Přístupnost není estetický kompromis, ale kvalitativní standard. Dobře zvolené barvy, kontrasty a typografie zvyšují čitelnost, snižují kognitivní zátěž a rozšiřují okruh uživatelů, kteří mohou službu bez bariér využít. Zavedením semantických barevných tokenů, průběžným měřením a automatizovanou validací v CI zajistíte, že přístupnost bude udržitelnou součástí vašeho designového i technického procesu.