Kontrastní poměr

Designově šedé se vybírají podle vzhledu, ne pro čtení. `#71717a` (známá zinc-500) na `#18181b` má poměr kolem 4,1:1 — blízko, ale pod hranicí 4,5:1, a na OLED telefonu s jasem 30 % na denním světle se čte jako vodoznak. Stejná šedá na bílé má kolem 4,7:1, a tedy projde — stejný token selhává v tmavém režimu a prochází ve světlém, a tak se dodávají nepřístupné šedé texty v dark mode.

Oprava není redesign. Posuňte token textu v tmavém tématu o jeden dva stupně světleji (`#a1a1aa` má na `#18181b` kolem 7:1), dekorativní šedé držte daleko od sebe a kontrolujte dvojici, ne samotnou barvu. Častými viníky jsou placeholdery, pomocné texty a neaktivní stavy — placeholdery obzvlášť, protože nesou informaci, o kterou by uživatel neměl přijít.

Kapátko v DevTools ukazuje kontrast u každé barvy a axe nebo Lighthouse označí většinu dvojic text–pozadí automaticky — ale kontrolují jen to, co je vykreslené, ne hover, tooltip ani text přes fotografii. Ty kontrolujte ručně kalkulačkou kontrastu a pamatujte, že průhlednost problémy násobí: bílá o 60% krytí přes obrázek má poměr podle pixelu pod sebou.

4,5:1 je minimum AA, ne cíl. Běžný text s 12:1 je skutečně pohodlný a malý bezpatkový text v češtině (hodně diakritiky, tenké tahy) potřebuje víc než minimum. A požadavek je o víc než o kontrastu — barva nikdy nesmí být jediným nositelem významu: chyba zobrazená jen červeným rámečkem zmizí pro barvoslepého uživatele, takže potřebuje i ikonu a zprávu.