Gaiši pelēks teksts uz balta fona pirmajā mirklī var izskatīties elegants un minimālistisks — un tas var būt pilnīgi nesalasāms lietotājiem ar redzes traucējumiem, spēcīgu saules gaismu uz ekrāna vai vienkārši nogurušām acīm darba dienas beigās. Krāsu kontrasts ir viens no "tehniskākajiem" pieejamības kritērijiem — ir precīzi skaitļi, kas jāatbilst, taču tas ir arī viens no vienkāršākajiem iepriekš pārbaudāmajiem un labojamajiem kritērijiem.

Īsumā — kas ir ietverts šajā rokasgrāmatā

  1. Kādi koeficienti ir nepieciešami WCAG
  2. Kāpēc lielam tekstam ir atļauts mazāks kontrasts?
  3. Kā pārbaudīt kontrasta attiecību praksē
  4. Kā iepriekš izvēlēties pieejamu krāsu paleti

Ko pieprasa WCAG koeficienti

WCAG definē kontrasta attiecību kā skaitli no 1:1 (bez kontrasta — identiska krāsa) līdz 21:1 (maksimālais iespējamais kontrasts — tīri melns uz tīra balta). AA līmenī (obligāts līmenis lielākajā daļā vietu, tostarp Izraēlā) prasība ir attiecība starp parasto tekstu un fonu, kas atrodas aiz tā, vismaz 4,5:1. Stingrākajā AAA līmenī prasība palielinās līdz 7:1.

Kāpēc lielam tekstam ir atļauts mazāk kontrasta?

Liels teksts paliek lasāms pat ar mazāku kontrastu, tāpēc WCAG nosaka vieglāku slieksni: 3:1 līmenī AA (nevis 4,5:1) un 4,5:1 līmenī AAA (nevis 7:1). “Liels teksts” ir 18 punktu vai lielāks teksts (apmēram 24 pikseļi) vai 14 punktu vai lielāks (apmēram 18,7 pikseļi), ja tas ir treknrakstā. Piemēram, lieli virsraksti var "atļauties" nedaudz zemāku kontrastu nekā parastais pamatteksts un joprojām atbilst prasībām.

Ilustratīvā diagramma Kontrasta attiecību salīdzināšana Trīs teksta uz fona piemēri ar dažādām kontrasta attiecībām Kontrasta attiecība starp tekstu un fonu Teksta paraugs 1.8:1 — ✕ neizdodas Teksta paraugs 7.1:1 — ✓ atbilst arī AAA Teksta paraugs 5.4:1 — ✓ atbilst AA līmenim Parasts teksts: vismaz 4,5:1 · Liels teksts (24 pikseļi+ vai 18,7 pikseļi treknrakstā): vismaz 3:1 Tādi rīki kā WebAIM kontrasta pārbaudītājs sniedz precīzu attiecību pirms krāsu paletes pabeigšanas.
Trīs teksta uz fona piemēri: pārāk zema attiecība (1,8:1) neatbilst pat pamata līmenim; pārējās divas attiecības atbilst attiecīgi AA un AAA prasībām.

Kā pārbaudīt kontrasta attiecību praksē

Tas nav jāaprēķina manuāli — tādi bezmaksas rīki kā WebAIM Contrast Checker ļauj ievadīt teksta un fona krāsu kodus un nekavējoties iegūt precīzu attiecību un katra līmeņa ieskaitīto/neieskaitīto rezultātu. Ir vērts pārbaudīt ne tikai tekstu uz cieta fona, bet arī tekstu virs fona attēliem vai gradientiem — kur kontrasts var atšķirties starp viena attēla dažādiem apgabaliem, tāpēc vislabāk ir pārbaudīt "problemātiskāko" vietu.

💡 Praktisks padoms

Ne tikai teksts: tā pati kontrasta prasība (ar vieglāku slieksni, 3:1) attiecas arī uz grafiskiem lietotāja interfeisa komponentiem, piemēram, formas lauku kontūrām, funkcionālām ikonām un pogu apmalēm — ne tikai burtiem.

Kā iepriekš izvēlēties pieejamu krāsu paleti

Visefektīvākā pieeja ir pārbaudīt kontrastu veidnes izstrādes stadijā, nevis katrā dokumentā atsevišķi. Izvēloties zīmola krāsas virsrakstiem, pamattekstam un saitēm, ir vērts iepriekš pārliecināties, ka katra faktiski izmantotā teksta un fona kombinācija atbilst vismaz 4,5:1. Tādā veidā katrs jauns dokuments, kas izveidots no veidnes, automātiski "manto" pareizu kontrastu, nevis katru dokumentu atsevišķi pārbauda pēc tam, kad tas jau ir uzrakstīts.

Vai vēlaties uzzināt, vai jūsu dokumenti atbilst kontrasta prasībām?

Mūsu rīks pārbauda krāsu kontrastu kā daļu no katra jūsu vietnes PDF faila automātiskās skenēšanas.

Skenējiet savu vietni bez maksas ←