Krāsu kontrastu principi

Veidojot tīmekļa vietņu un lietotņu dizaina risinājumus, ir svarīgi, lai tie būtu ne vien vizuāli pievilcīgi un atbilstu zīmolu identitātei, bet būtu arī ērti un viegli lietojami plašai auditorijai. Krāsu kontrasti un to efektīva pielietošana ir viens no priekšnoteikumiem piekļūstamības nodrošināšanā.

Vizuāli attēlots nepieciešamais krāsu kontrasts, lai informācija tiktu viegli uztverta.

Core koncepcija

Spilgtums – gaismas intensitāte, ko izstaro no virsmas laukuma noteiktā virzienā.

Krāsu kontrasts – ir izteikts pretstats, spilgtuma atšķirība starp divām krāsām, kas atrodas līdzās vai viena virs otras. (priekšplāns, fons).

Dinamiskais diapazons (dynamic range) – attiecība starp spilgtuma lielākajām un mazākajām vērtībām, kuras var uztvert cilvēka acs. Krāsu kontrasta gadījumā tas nozīmē atšķirību starp spožāko un tumšāko gaismu. Acīm ir nepieciešams laiks, lai pielāgotos dažādiem gaismas līmeņiem, tādēļ dizaineriem jāņem vērā cilvēka acs dinamiskā diapazona attiecība pret digitālajiem ekrāniem.

Optiskais atspīdums – atspīdumu rada ievērojama spilgtuma attiecība starp priekšmetu un starojuma avotu, kas attiecas uz digitālajiem ekrāniem, kā rezultātā atspoguļotais spilgtāks gaismas avots cilvēkam novēršoties no ekrāna apgrūtina saskatīt blakus esošos objektus. Jūs variet arī piemērot šo koncepciju ekrāna izgaismošanai, piemēram, kas notiek, kad jūs lietojat portatīvo datoru ārā.

Krāsu kontrasta attiecība – digitālā ekrāna sistēmas īpašība, kas apzīmē spilgtākās krāsas , baltās, spilgtuma attiecību pret tumšāko, melno krāsu, ko sistēma spēj radīt. Augsta kontrasta attiecība ir jebkura displeja vēlamais aspekts.

Cilvēka acu dinamiskais diapazons – cilvēka acs dinamiskais diapazons ir aptuveni 20 pārtraukumi, vai 1. 000. 000 : 1.Cilvēka acs kontrasta jutīgums ir vislielākais, ja detaļas biežums ainā ir aptuveni 4 cikli uz grādu (avots).

Kontrasta koeficenta aprēķināšana

Kontrasta attiecība var būt no 1 līdz 21 (parasti rakstīts 1: 1 līdz 21: 1).

(L1 + 0,05) / (L2 + 0,05), kur:

Tīmekļa vietnes satura pieejamības vadlīnijas (WAG) 2.0

Tīmekļa vietņu un aplikāciju pieejamības standartā (WCAG) ir iekļauti vairāki norādījumi par krāsu kontrasta attiecībām.

Minimālie kontrasta standarti

1.4.3 Kontrasts (minimums): teksta vizuālais noformējums un tekstā ievietotajiem attēliem kontrasta attiecībai ir jābūt vismaz 4,5: 1. Izņēmumi ( AA līmenī ):

  • Garš teksts: gara teksta un attēlu kontrasta attiecībai jābūt vismaz 3: 1;
  • Neaktīvs: teksts vai teksta attēls, kas ir neaktīva lietotāja saskarsmes sastāvdaļa, kurai ir dekoratīva nozīme un kas nav redzams citiem. Vai arī tā ir daļa no attēla, kurā ir cits nozīmīgs vizuālais saturs, kuram nav kontrasta prasību;
  • Logotipi: tekstam, kurš ir zīmola vai logo daļa, netiek piemērotas minimālā kontrasta prasības.

Uzlabota kontrasta standarti

1.Kontrasts (uzlabots): Teksta un teksta attēlu vizuālais noformējums, kurā kontrasts ir vismaz 7: 1. Izņēmumi (AAA līmenī ):

GGarš teksts:gara teksta un attēlu kontrasta attiecībai jābūt vismaz  4,5: 1;

Neaktīvs: teksts vai teksta attēls, kas ir neaktīva lietotāja saskarsmes sastāvdaļa, kurai ir dekoratīva nozīme un kas nav redzams citiem. Vai arī tā ir daļa no attēla, kurā ir cits nozīmīgs vizuālais saturs, kuram nav kontrasta prasību;

Logotipi: tekstam, kurš ir zīmola vai logo daļa, netiek piemērotas minimālā kontrasta prasības.

Bezmaksas kontrasta attiecību rīki

Lai pārbaudītu vietnē izmantotās krāsu shēmas un pārliecinātos, vai saturs ir pieejams, iesakām izmantot šādus rīkus:

Webaim Contrast Checker – Bezmaksas, tiešsaistes krāsu kontrasta kaukulātors;

Contrast Checker  – Bezmaksas, tiešsaistes rīks melnbaltā kontrasta noteikšanai;

WCAG Contrast checker  – Firefoxaddon

Color Contrast Analyzer  – Chrome paplašinājums

* rakstā nav iekļauti piemēri par krāsu izvēlei . Lasīt vairāk par krāsu pieejamību šeit.

Komentēt

Jūsu e-pasta adrese netiks publicēta. Obligātie lauki ir atzīmēti kā *