Kontrast
Věříme, že kontrast by měl být součástí a základním stavební kamenem dobrého design systému. Zřejmě každému je i bez hlubší znalosti teorie barev zřejmé, že žlutý text na bílém pozadí se velmi špatně čte. Paradoxně by se tímto neměl nikdo zabývat, resp. co nejmenší množina z nás.
Pokud stanovíme jasné principy používání barev, jsme schopni v našich produktech docílit legislativních požadavků na kontrastní poměry s úsilím blížící se nule. Tohle byl jeden z našich cílů při tvorbě Spectra. Ten disponuje jasnými pravidly pro použití barev jak pro pozadí, tak pro text.
Požadavky na přístupnost
V současné době je v platnosti norma WCAG 2.1, kdy jsou kritéria rozděleny do tří úrovní:
- A: Kontrastní poměry nejsou stanoveny, postačuje, pokud informace není zobrazena jen a pouze barvou, tvarem nebo velikostí
- AA: Text musí být v kontrastním poměru alespoň 4,5:1, u větších textů nebo ikon postačuje 3:1
- AAA: Text musí být v kontrastním poměru alespoň 7:1, u větších textů nebo ikon postačuje 4.5:1
Jak poznám vhodnou barvu pro text?
Velmi jednoduše, není potřeba barvu hledat. Pro každé pozadí je barva textu daná. Snažili jsme se být co nejvíce developer friendly.
--text-[color]nebo--text-[color]-variantpro texty na neutrálních površích. Více v barvách textů.--text-[color]-on-surface-[emphasis]pro texty na barevných površích
TEAF 24.00 a starší
V předchozích verzích TEAF byla veškerá logika dopočítávání kontrastních barev součástí mixinu .contrastify(), který jako vstupní barvy vyžadoval Less proměnné. Výstupní barvy nebyly nikdy dopředu známé, byly vypočítávány vždy při kompilací stylů. Nyní je veškeré generování barev součástí Motiva a děje se tak předem. Multiweb jako takový už pouze využívá následně CSS proměnné v souboru spectro-theme.css.