Kontrast

Kontrast je základ čitelného a přístupného rozhraní. Cílem Spectra je, aby nebylo nutné kontrast řešit ručně v každé komponentě, ale aby byly pro text i povrchy k dispozici předem připravené a konzistentní kombinace.

Požadavky na přístupnost

V současné době je v platnosti norma WCAG 2.1, kde jsou kritéria rozdělena 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

Praktický příklad napříč tématy

Následující srovnání ukazuje stejné textové kombinace ve světlém i tmavém tématu. U každé barvy je porovnán paletový odstín, další paletový odstín téže barvy, text-*-variant a text-* token.

Praktický dopad:

• Paletový odstín, který v jednom tématu projde, může v druhém tématu selhat.
• Přímé použití paletových hodnot pro text je proto napříč tématy nespolehlivé.
• text-*-variant bývá hraniční a hodí se jen pro specifické případy (větší text, ikony, výraznější řez).
• Pro běžný text je nejbezpečnější používat text-* tokeny, protože reagují na téma a drží kontrast konzistentně.

Jak vybrat správnou barvu textu

• Na neutrálním povrchu používejte --text-* nebo --text-*-variant. Více v barvách textů.
• Na barevném povrchu používejte --text-*-on-surface-*.
• Nepoužívejte čistě barvu jako jediný nosič informace.

Poznámka

Motivo umožňuje přepnout Level A nebo Level AA. AA je výchozí a doporučená úroveň. Level AAA v současné době nepodporujeme.

TEAF 24.00 a starší

V předchozích verzích TEAF byla logika dopočítávání kontrastních barev součástí mixinu .contrastify(), který jako vstup vyžadoval Less proměnné. Výstupní barvy nebyly předem známé a počítaly se až při kompilaci stylů. Nyní je generování barev součástí Motiva a probíhá předem. MultiWeb následně používá výsledné CSS proměnné v souboru spectro-theme.css.