Kontrast
Dobře čitelný text je základem kvalitní prezentace obsahu. Čtení bez mhouření očí ocení uživatelé všech věkových kategorií.
WCAG 2.0
Web Content Accessibility Guidelines 2.0 je v současné době nejlepší kolekce kritérií pro tvorbu přístupného webu. Mnoho našich zákazníků spadá do veřejné nebo státní sféry, proto je MultiWeb již v základu vybaven mechanisem pro automatický dopočet barvy dle kontrastního poměru.
Contrastify
Mixin na základě zadaného pozadí a barvy textu zjistí, zde je kontrastní poměr vyhovující. Pokud je poměr nižší, automaticky dopočítá nejbližší barvu vyhovují pro dané pozadí.
.contrastify(@bg, @color)
@bg: Pozadí
@color: Barva textuPrincip
- Zjištení typu barvy písma (poloprůhledné Text Primary/Secondary/Disabled vs neprůhledné)
- Proložení poloprůhledné barvy písma s barvou pozadí obdobně jako kapátko v grafických programech.
- Kontrola neprůhledné barvy vůči kontrastnímu poměru z proměnné
@threshold. - Ztmavení/zesvětelní barvy dle potřeby tématu.
Tip @threshold naleznete v souboru MixinsColors.less. Ve výchozím stavu je hodnota nastavena pro plnění Level AA (4,5:1), avšak je možné ji změnit pro plnění Level AAA (7:1).
<html class="html">
<div class="foo">Lorem ipsum dolor sit foo</div>
<div class="bar">Lorem ipsum dolor sit bar</div>
</html>@app-bg: @grey-5-light @grey-4-dark;
.html {
.themify(background-color, @app-bg);
}
.foo {
.contrastify(@app-bg, @text-secondary);
}
.bar {
.contrastify(@app-bg, @blue);
}Porovnání
Některé barvy (zelená, žlutá, oranžová, světle modrá) musí být na světlém pozadí poměrně zásadně ztmaveny, proto raději zkuste najít alternativu k barevnému textu. Ostatní barvy (červená, fialová, tmavě modrá) jsou naopak dobře kontrastní.
Disabled Neaktivní prvky nemusí kritéria kontrastu splňovat, tudíž nedochází k jeho zvyšování.
Themify Mixin pro přiřazování property na základě tématu.