Každý článek vychází ze světových primárních zdrojů a redakčních instrukcí Anycoders. Text může obsahovat nepřesnosti — ověřte si důležité informace u uvedených zdrojů.
Do CSS míří nová funkce contrast-color(), která slibuje konec ručního ladění barev textu. Prohlížeč automaticky vybere černou nebo bílou variantu tak, aby byl text na dynamickém pozadí vždy čitelný. Pro design systémy a správu témat je to zásadní zjednodušení.
Nová CSS funkce contrast-color() je navržena tak, aby automaticky vybrala barvu textu (striktně černou nebo bílou) s nejvyšším kontrastem vůči zadané barvě pozadí. Jejím cílem je zajistit minimální kontrastní poměr podle standardu WCAG AA bez zásahu vývojáře.
Hlavní přínos se očekává v design systémech. Místo definování párových proměnných pro pozadí a text (např. --button-bg-color a --button-text-color) bude stačit nastavit pouze barvu pozadí. O čitelnost textu se postará prohlížeč pomocí color: contrast-color(var(--button-bg-color));.
Tato automatizace je ideální pro komponenty, kde barvy nejsou plně pod kontrolou designéra. Typickým příkladem jsou štítky s barvou definovanou uživatelem (jako na GitHubu) nebo komponenty, které přebírají barvy z externích zdrojů a témat.
Funkce má však svá omezení. Vrací pouze černou nebo bílou, což nemusí vyhovovat propracovanějším designům, které používají například tmavě šedou místo černé. Podpora v prohlížečích je navíc zatím ve fázi experimentu a na plošné nasazení si budeme muset počkat.