CSS funkce contrast-color(): Automatický kontrast pro design systémy

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.

Náš pohled

Funkce `contrast-color()` vypadá na první pohled jako splněný sen každého, kdo spravuje design systém. Představa, že stačí hodit na tlačítko jakoukoliv barvu a text se sám přizpůsobí, je lákavá. Realita je ale praktičtější. Omezení na černou a bílou znamená, že se funkce hodí hlavně pro jednoduché, funkční komponenty jako notifikace, štítky nebo základní tlačítka. Nenahradí promyšlenou práci designéra s barevnou paletou, kde specifické odstíny textu dotváří identitu značky. Pro české firmy je to spíše příslib do budoucna. **Doporučujeme sledovat vývoj a podporu v prohlížečích**, ale zatím nepřestavovat kvůli tomu interní procesy. Vnímejte to jako nástroj, který v budoucnu sníží nároky na údržbu atomických částí systému, ale nezbaví vás nutnosti přemýšlet o designu jako celku.