Kontrast

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.

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í.

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, @prop)

@bg:       Pozadí
@color:    Barva textu
@prop (nepoviné):    Přiřazení barvy do vlastní proměnné
@css (nepoviné):     Přiřazení barvy do proměnné --contrast-color; Doporučujeme využít spíše @prop

Princip

1. Zjištení typu barvy písma (poloprůhledné Text Primary/Secondary/Disabled vs neprůhledné)
2. Proložení poloprůhledné barvy písma s barvou pozadí obdobně jako kapátko v grafických programech.
3. Kontrola neprůhledné barvy vůči kontrastnímu poměru z proměnné @threshold.
4. Ztmavení/zesvětelní barvy dle potřeby tématu.

@app-bg: @grey--40 @black;

.foo {
  .contrastify(@app-bg; @text-secondary);
}

.bar {
  .contrastify(@app-bg; @blue);
}

Ve výchozím stavu se výsledná barva přepíše do vlastnosti color. Pro předání například do CSS proměnné komponenty využijte @prop parametr.

@foo-bg: @grey--40 @black;

.foo {
  .themify(--foo-bg; @foo-bg);
  .contrastify(@foo-bg; @text-secondary; @prop: "foo-text");
  background-color: var(--foo-bg);
  color: var(--foo-text);
}

Písmo v barvě

Při nejistotě výběru barevného odstínu pro text na barevném pozadí je možné nechat Multiweb barvu dopočítat.

.foo--yellow {
	@this-bg:    @yellow--20 @yellow--100;
	@this-color: @yellow;

	.themify(background-color, @this-bg);
	.contrastify(@this-bg, @this-color);
}

...

.foo--indigo {
	@this-bg:    @indigo--80 @indigo--70;
	@this-color: @indigo;

	.themify(background-color, @this-bg);
	.contrastify(@this-bg, @this-color);
}