Krāsu kontrasts: WCAG attiecības, pārbaude un labojumi

Gaiši pelēks teksts uz balta fona dizaina failā izskatās tīrs. Tālrunī spilgtā saulē vai cilvēkam ar vāju redzi to ir grūti izlasīt. Tā ir arī visizplatītākā piekļūstamības kļūda vispār: WebAIM Million 2026 (atveras jaunā cilnē) atrada zema kontrasta tekstu 83,9 % no miljona populārāko sākumlapu, vidēji 34 atsevišķus gadījumus lapā.

Labā ziņa ir tā, ka kontrastu var izmērīt, sliekšņi ir skaidri un labojumi lielākoties lēti. Šajā pamācībā atradīsiet skaitļus, bezmaksas rīkus un veidu, kā salabot zīmola krāsas, nesākot visu no jauna.

Kas ir krāsu kontrasta attiecība?

Kontrasta attiecība ir skaitlis, kas salīdzina divu krāsu, parasti teksta un tā fona, relatīvo gaišumu jeb luminanci. WCAG to aprēķina pēc noteiktas formulas, un rezultāts ir no 1:1 (nav atšķirības, balts uz balta) līdz 21:1 (melns uz balta). Jo lielāks skaitlis, jo vieglāk abas krāsas atšķirt.

Formula ir (L1 + 0,05) / (L2 + 0,05), kur L1 ir gaišākās krāsas un L2 tumšākās krāsas relatīvā luminance. Manuāli tā jums nekad nebūs jāaprēķina, taču viena detaļa ir svarīga: nozīme ir tikai luminancei, nevis krāsas tonim. Tāpēc sarkans teksts uz zaļa fona var izskatīties spilgts un tomēr saņemt sliktu rezultātu.

Otra detaļa, ko bieži palaiž garām, ir noapaļošana. W3C skaidrojošajā dokumentā par kritēriju 1.4.3 (atveras jaunā cilnē) teikts, ka aprēķinātās vērtības “nevajadzētu noapaļot (piemēram, 4,499:1 neatbilst slieksnim 4,5:1)”. Tātad pelēks #767676 uz balta (4,54:1) atbilst, bet #777777 uz balta (4,48:1) neatbilst, lai gan ar aci tos neviens nevarētu atšķirt.

Kādu kontrasta attiecību prasa WCAG?

AA līmenī, uz kuru atsaucas lielākā daļa likumu un līgumu, parastam tekstam pret fonu vajag vismaz 4,5:1, bet lielam tekstam 3:1 (veiksmes kritērijs 1.4.3). Saskarnes komponentiem un nozīmīgai grafikai vajag 3:1 attiecībā pret blakus esošajām krāsām (1.4.11). Stingrākais AAA līmenis prasa 7:1 parastam tekstam un 4,5:1 lielam tekstam (1.4.6).

Kāpēc tieši 4,5:1? W3C skaidro, ka tā “kompensē kontrasta jutības zudumu, kas parasti ir lietotājiem ar redzes zudumu, kurš atbilst aptuveni 20/40 redzes asumam” (Eiropā ierastajā decimālajā sistēmā aptuveni 0,5). Citiem vārdiem, tā noteikta cilvēkiem ar mēreni pavājinātu redzi, tostarp daudziem gados vecākiem klientiem, kuri sevi nekad nesauktu par cilvēkiem ar invaliditāti.

Daļai teksta ir izņēmums: logotipiem un zīmolu nosaukumiem, tīri dekoratīvam tekstam, tekstam, kas nevienam nav redzams, tekstam attēlā ar daudz cita būtiska vizuāla satura un tekstam neaktīvās (atspējotās) vadīklās. Jūsu logotips var palikt, kāds ir. Rindkopa, kas uzrakstīta jūsu logotipa bālajā krāsā, gan ne.

Kas tiek uzskatīts par lielu tekstu?

WCAG izpratnē liels teksts ir vismaz 18 punkti vai, ja tas ir treknrakstā, vismaz 14 punkti. W3C to pārrēķina aptuveni 24 CSS pikseļos un 18,5 pikseļos treknrakstā. Visam mazākam vajag pilnu 4,5:1 attiecību. Pamatteksts, attēlu paraksti, veidlapu etiķetes, cenas un kājenes saites gandrīz nekad nav liels teksts, tāpēc tiem vajag augstāku attiecību.

Lūk, kā tas izskatās praksē. Pelēks #949494 uz balta dod 3,03:1. Tas der 28 pikseļu virsrakstam, bet tādas pašas krāsas 16 pikseļu rindkopa prasībai neatbilst. Daudzas vietnes izpilda prasības virsrakstos un neizpilda visā, kas atrodas zem tiem.

Plāniem un dekoratīviem fontiem vajag īpašu uzmanību. W3C norāda, ka nogludināšanas (anti-aliasing) dēļ “īpaši plānus vai neparastus fontus lietotājaģenti var attēlot daudz blāvākā krāsā”, nekā jūs izvēlējāties. Ja jūsu zīmola fonts ir viegla biezuma, atstājiet sev rezervi virs 4,5:1, nevis tēmējiet tieši uz 4,51.

Vai kontrasta prasības attiecas uz pogām, ikonām, fokusa indikatoriem un diagrammām?

Jā. Saskaņā ar veiksmes kritēriju 1.4.11 (AA līmenis) visam, kas cilvēkiem jāredz, lai identificētu vadīklu, tās stāvokli vai grafiku, vajag 3:1 attiecībā pret blakus esošajām krāsām. Tas attiecas uz veidlapu lauku apmalēm, ikonām bez teksta etiķetes, fokusa kontūrām, izvēles rūtiņu un pārslēgu stāvokļiem, kā arī diagrammu līnijām un sektoriem. Tekstam pogā joprojām vajag 4,5:1.

• Veidlapu lauki: gaiši pelēka #CCCCCC apmale uz balta dod 1,61:1. Ja šī bālā līnija ir vienīgais, kas rāda, kur rakstīt, tā neatbilst prasībai.
• Pogas: WCAG neprasa redzamu apmali ap katru pogu. W3C skaidrojošajā dokumentā par kritēriju 1.4.11 (atveras jaunā cilnē) teikts, ka robeža vajadzīga tikai tad, ja vadīklu nevar identificēt citā vizuālā veidā. Ja pogu var atpazīt tikai pēc krāsainas formas, šai formai pret lapu vajag 3:1.
• Ikonas: meklēšanas lupai, vēlmju saraksta sirsniņai vai groza ikonai bez teksta blakus vajag 3:1.
• Fokusa indikatori: kontūrai, kas rāda tastatūras fokusu, jākontrastē ar apkārtējo fonu. Mūsu WCAG 2.2 pamācībā aplūkoti jaunākie fokusa kritēriji.
• Diagrammas: līniju diagrammas līnijām un sektoru diagrammas sektoriem vajag 3:1, ja vien tās pašas vērtības nav parādītas arī tekstā.
• Atspējotām vadīklām ir izņēmums, taču cilvēkiem tik un tā jāsaprot, vai pogu var nospiest.

Saites tekstā ir īpašs gadījums. Ja tās izceltas tikai ar krāsu, bez pasvītrojuma, W3C paņēmiens G183 (atveras jaunā cilnē) prasa 3:1 starp saites krāsu un apkārtējo tekstu, turklāt abām krāsām pret fonu joprojām vajag 4,5:1. Atrast trīs krāsas, kas atbilst visam tam, ir grūti. Pasvītrojums ir daudz vienkāršāks.

Kā pārbaudīt krāsu kontrastu?

Konkrētiem krāsu pāriem izmantojiet bezmaksas kontrasta pārbaudes rīku, publicētām lapām pārlūkprogrammas izstrādātāju rīkus, bet problēmvietu atrašanai visā vietnē automātisku skenēšanu. Pēc tam ar aci pārbaudiet to, ko rīki palaiž garām: tekstu uz fotoattēliem un krāsu pārejām, stāvokļus ar kursoru un fokusu, viettura tekstu un kļūdu ziņojumus. Lielākā daļa no tā aizņem dažas minūtes katrai lapas veidnei.

• WebAIM Contrast Checker (atveras jaunā cilnē): ievadiet divus heksadecimālos kodus un saņemiet attiecību ar vērtējumu parastam tekstam, lielam tekstam un grafiskiem objektiem. Tā gaišuma slīdnis noder, lai atrastu tuvāko atbilstošo toni.
• Colour Contrast Analyser (atveras jaunā cilnē): Vispero bezmaksas datora lietotne Windows un macOS sistēmām. Tās pipete ņem paraugu no jebkura ekrāna pikseļa, kas noder tekstam uz attēliem, PDF failos un lietotnēs, un tajā ir arī krāsu aklības simulators.
• Chrome DevTools: apskatiet teksta fragmentu un atveriet krāsu atlasītāju. Tā kontrasta attiecības sadaļā (atveras jaunā cilnē) redzamas AA un AAA līnijas, un tas var ieteikt atbilstošu krāsu. Panelī CSS Overview uzskaitītas visas lapas kontrasta problēmas.
• Automātiskie pārbaudes rīki: pārlūkprogrammu paplašinājumi un Lighthouse atzīmē zema kontrasta tekstu visā lapā, taču tekstu uz attēliem vai krāsu pārejām tie bieži atzīmē kā tādu, kam vajadzīga manuāla pārbaude, nevis novērtē.

Kur rīki netiek galā, pārbaudiet krāsu paraugus manuāli. Tekstam uz galvenā fotoattēla pārbaudiet gaišāko attēla daļu aiz gaišākajiem burtiem; W3C fona attēlus ar nepietiekamu kontrastu min kā zināmu kļūdu (F83). Novietojiet kursoru virs pogām, pārejiet uz tām ar tabulēšanas taustiņu, izraisiet veidlapas kļūdu, pārslēdzieties uz tumšo režīmu, ja tāds ir. Arī tumšais motīvs var neatbilst prasībām: pelēks #757575 uz #121212 fona dod 4,07:1. Mūsu pamācībā kā testēt vietnes piekļūstamību kontrasts aplūkots līdzās citām ātrām manuālām pārbaudēm.

Kā salabot zemu kontrastu, nemainot zīmolu?

Parasti pievienojot zīmola krāsas tumšāku toni tekstam un maziem elementiem un oriģinālu atstājot lieliem virsrakstiem, foniem un ilustrācijām. Daudzas zīmola krāsas prasībām neatbilst tikai mazos izmēros. Bieži pietiek uz gaišas zīmola krāsas nomainīt baltu tekstu pret tumšu, un lielākā daļa apmeklētāju pamanīs tikai to, ka lapu ir vieglāk lasīt.

1. Izveidojiet katrai zīmola krāsai tekstam drošu versiju, kuras kontrasts pret galvenajiem foniem ir vismaz 4,5:1, un izmantojiet to pamattekstam, saitēm un mazām ikonām.
2. Oriģinālo spilgto krāsu izmantojiet lieliem virsrakstiem (tur pietiek ar 3:1), foniem, ilustrācijām un rotājumiem.
3. Uz gaišām zīmola krāsām nomainiet pogas tekstu no balta uz tumšu.
4. Aiz teksta, kas atrodas uz fotoattēliem, novietojiet vienlaidu vai daļēji caurspīdīgu paneli.
5. Pārbaudiet visus stāvokļus: ar kursoru, fokusā, apmeklēts, atlasīts, kļūda un vietturis.
6. Saglabājiet atbilstošos pārus kā dizaina marķierus (design tokens) vai tēmas iestatījumus, lai jaunās lapas tos mantotu, nevis izgudrotu no jauna.

Dizains cilvēkiem ar krāsu redzes traucējumiem: kāpēc ar krāsu vien nepietiek

Kontrasts un krāsa ir atšķirīgas problēmas. Saskaņā ar Colour Blind Awareness (atveras jaunā cilnē) datiem krāsu redzes traucējumi, visbiežāk sarkanās un zaļās krāsas atšķiršanā, ir aptuveni katram 12. vīrietim un katrai 200. sievietei. WCAG 1.4.1 (atveras jaunā cilnē) (A līmenis) nosaka, ka krāsa nedrīkst būt vienīgais vizuālais veids, kā nodot informāciju, tāpēc papildiniet to ar tekstu, ikonām, rakstiem vai pasvītrojumu.

• Veidlapu kļūdas: sarkana apmale vien neatbilst prasībai. Pievienojiet blakus laukam ziņojumu, piemēram, “Ievadiet pasta indeksu”, ideālā gadījumā ar ikonu.
• Krājumi un statuss: zaļš vai sarkans punkts blakus produktam daudziem pircējiem neko neizsaka. Rakstiet “Ir noliktavā” vai “Izpārdots”.
• Diagrammas: leģendu, kas balstās uz krāsu saskaņošanu, ir grūti nolasīt. Marķējiet līnijas tieši vai izmantojiet rakstus un dažādus līniju stilus.
• Saites: pamattekstā pasvītrojiet tās iepriekš minēto iemeslu dēļ.

Lai problēmu ieraudzītu paši, izmantojiet Chrome DevTools, kas var imitēt redzes traucējumus, vai Colour Contrast Analyser, kurā arī ir simulators. Arī šeit palīdz kontrasts: attiecība mēra gaišumu, nevis toni, tāpēc divas krāsas ar lielu attiecību paliek atšķiramas pat tad, ja to toņi izskatās līdzīgi. Vairāk par to, kā vājredzīgi cilvēki un cilvēki ar citiem traucējumiem iestata savas ierīces, lasiet rakstā kā cilvēki ar invaliditāti lieto tīmekli.

Vai pietiek ar augsta kontrasta režīmiem un kontrasta slēdžiem?

Nē. Operētājsistēmas kontrasta motīvi un kontrasta slēdži lapā palīdz cilvēkiem, kuri zina, ka viņiem vajag lielāku kontrastu, un to ieslēdz. Taču WCAG vērtē jūsu lapu noklusējuma stāvoklī, tāpēc krāsām, ko katrs apmeklētājs redz vispirms, tik un tā jāatbilst prasībām. Slēdzis ir papildu iespēja tiem, kuri vēlas vairāk, nevis labojums neatbilstošām krāsām.

Daži cilvēki ar invaliditāti lieto Windows kontrasta motīvus, kas jūsu krāsas aizstāj ar savām. Ir vērts notestēt vietni ar ieslēgtu šādu motīvu: ikonas, kas veidotas no fona attēliem, var pazust, un fokusa stili, kas zīmēti tikai ar ēnu (box-shadow), var izzust. CSS mediju vaicājums prefers-contrast arī ļauj piedāvāt augstāka kontrasta versiju tiem, kuri to ir pieprasījuši sistēmas iestatījumos.

Mūsu pašu logrīkam ir kontrasta pielāgojums un profils krāsu redzes traucējumiem, un dažiem apmeklētājiem tie noder. Mēs tomēr jums teiktu to pašu: ja jūsu pamatteksts ir #999999 uz balta, mainiet CSS. Logrīks dod apmeklētājam, kurš vēlas lielāku kontrastu, iespēju to iegūt. Tas nepadara neatbilstošus noklusējumus atbilstošus, un to saka arī WCAG uzziņas mūsu dokumentācijā.