Kaip audituoti spalvų kontrastą nieko neįdiegiant

Spalvų kontrasto auditai dažnai laikomi specializuota prieinamumo užduotimi: atidaryti dizaino failą, įdiegti papildinį, eksportuoti ekrano kopijas, paleisti ataskaitą, ginčytis dėl prekės ženklo spalvų. Tai gali būti naudinga, bet daugumai komandų ne nuo to reikėtų pradėti.

Produkcinei svetainei greičiausias patikimas auditas paprastai atliekamas naršyklėje, kurią jau turite atidarytą. Šiuolaikiniai naršyklės DevTools gali tikrinti apskaičiuotąsias spalvas, rodyti kontrasto santykius, atskleisti būsenų stilius ir padėti išbandyti keblius atvejus, kurių automatinės ataskaitos nepastebi.

Šiame gide daroma prielaida, kad nieko neįdiegiate. Jokių naršyklės plėtinių. Jokių dizaino papildinių. Jokio mokamo audito paketo. Tik puslapis, naršyklė ir paprastas metodas.

Kontrasto taisyklės, kurių iš tikrųjų reikia

Daugumoje žiniatinklio darbų WCAG kontrastas susiveda į kelias ribas:

• Įprastas tekstas: bent 4.5:1 kontrastas su fonu.
• Didelis tekstas: bent 3:1. WCAG tai apibrėžia kaip maždaug 24 CSS pikselius arba apie 18.66 CSS pikselio, jei tekstas paryškintas.
• UI komponentai ir grafiniai objektai: bent 3:1 reikšmingoms riboms, piktogramoms, būsenoms ir diagramų dalims, reikalingoms sąsajai suprasti.
• Padidintas kontrastas: 7:1 įprastam tekstui ir 4.5:1 dideliam tekstui, jei siekiate daugiau nei bazinio lygio.

Yra išimčių, pavyzdžiui, neaktyvūs valdikliai, dekoratyviniai elementai ir logotipai. Tomis išimtimis naudokitės saikingai. „Tai yra prekės ženklo dalis“ nėra išimtis; tai dizaino apribojimas.

Taip pat atminkite, kad kontrastas yra tik viena prieinamo spalvų naudojimo dalis. Jei raudona klaidos būsena turi pakankamą kontrastą, bet neturi teksto, piktogramos etiketės ar programinio indikatoriaus, ji vis tiek gali būti netinkama naudotojams, kurie negali atskirti raudonos nuo gretimų spalvų.

Pradėkite nuo atvaizduoto puslapio, ne nuo dizaino failo

Dizaino failai naudingi, bet juose nėra visų realaus pasaulio kintamųjų: CSS perrašymų, skaidrumo, hover būsenų, naršyklės šriftų atvaizdavimo, naudotojo mastelio, tamsiojo režimo, paveldėtų stilių, CMS turinio ir rinkodaros įterpinių.

Audituokite puslapį tokį, kokį jį gauna naudotojai.

Atidarykite puslapį dabartinėje darbalaukio naršyklėje. Chrome, Edge, Firefox ir Safari turi naudingų tikrinimo įrankių. Tikslūs pavadinimai skiriasi, bet darbo eiga ta pati:

1. Dešiniuoju pelės mygtuku spustelėkite tekstą arba UI elementą.
2. Pasirinkite Inspect.
3. Raskite apskaičiuotuosius color ir background-color.
4. Naudokite naršyklės spalvos pavyzdį arba prieinamumo skydelį kontrasto santykiui perskaityti.
5. Užfiksuokite, kas praėjo, kas nepraėjo ir kur yra neaiškumų.

Chromium pagrindo naršyklėse spalvų parinkiklis dažnai rodo kontrasto santykį ir WCAG teksto atitikties / neatitikties gaires. Firefox DevTools taip pat pateikia prieinamumo informaciją ir spalvų įrankius. Safari Web Inspector gali rodyti apskaičiuotuosius stilius ir prieinamumo informaciją, nors darbo eiga šiek tiek kitokia.

Svarbiausia ne konkreti naršyklė. Svarbiausia skaityti apskaičiuotąjį rezultatą, o ne reikšmę, kurią, kažkieno manymu, naudoja komponentas.

Pirmiausia susidarykite trumpą audito sąrašą

Netikrinkite atsitiktinio teksto tol, kol pavargsite. Susidarykite trumpą šablonų inventorių:

• Pagrindinis tekstas pagrindiniame puslapio fone.
• Prislopintas tekstas, antraštės, metaduomenys ir vietaženkliai.
• Nuorodos įprastose, hover, aplankytose ir fokusavimo būsenose.
• Pirminiai, antriniai ir destruktyvūs mygtukai.
• Formų etiketės, pagalbinis tekstas, klaidos ir sėkmės pranešimai.
• Navigacijos elementai, kelio nuorodos ir kortelės.
• Kortelės, ženkleliai, kapsulės ir žymos.
• Piktogramos, perteikiančios prasmę.
• Diagramos, žemėlapiai, progreso juostos ir būsenų spalvos.
• Tekstas ant vaizdų, vaizdo įrašų, gradientų ar permatomų perdangų.

To pakanka daugumai tipinės svetainės klaidų rasti. Tai taip pat išlaiko auditą susietą su komponentais, o ne pavieniais pikseliais.

Jei jūsų auditas apima mygtukus, kontrasto tikrinimą derinkite su pagrindais iš mūsų prieinamų žiniatinklio mygtukų kontrolinio sąrašo. Mygtukų kontrasto problemos dažnai būna greta trūkstamų fokusavimo būsenų, neaiškių etikečių ar neveikiančios klaviatūros elgsenos.

Tikrinkite teksto kontrastą DevTools

Paprastam tekstui ant vientiso fono naršyklė paprastai gali apskaičiuoti kontrastą už jus.

Patikrinkite elementą ir raskite color savybę. Atidarykite spalvų parinkiklį iš spalvos pavyzdžio. Jei naršyklė gali nustatyti foną, ji parodys kontrasto santykį. Kai kurie įrankiai spalvų parinkiklyje taip pat nubrėžia liniją, rodančią, kur spalva atitiktų 3:1, 4.5:1 arba 7:1.

Kai naršyklė praneša apie neatitiktį, tikėkite tuo, kol negalite įrodyti priešingai. Kai ji praneša apie atitiktį, vis tiek vadovaukitės sprendimu. Smulkus plonas šriftas, prastos kokybės ekranai, stiprus anti-aliasing ir margi fonai gali lemti, kad techniškai tinkamas tekstas atrodys silpnas.

Praktiška taisyklė: jei pagrindinis tekstas vos vos atitinka 4.55:1, nėra kuo džiaugtis. Palikite daugiau erdvės. Kontrasto reikalavimai yra minimumai, o ne idealūs tikslai.

Tipografija taip pat svarbi. Didesnė, aiškesnė tipografinė sistema mažina įtampą dar prieš imantis spalvų korekcijų. Jei puslapį sunku skaityti nepaisant tinkamo kontrasto, dar kartą įvertinkite eilutės ilgį, dydį, svorį ir tarpus platesniu skaitomumo požiūriu, pavyzdžiui, naudodami šį praktinį skaitomo šrifto šiuolaikiniame žiniatinklyje gidą.

Patikrinkite tikrąjį foną, įskaitant skaidrumą

Daug kontrasto klaidų atsiranda todėl, kad matomas fonas nėra deklaruotas fonas.

Dažnos spąstų vietos:

• Tekstas pusiau permatomoje kortelėje.
• Tekstas ant tėvinio elemento, kuriam pritaikytas opacity.
• Perdangos, naudojančios rgba() arba color-mix().
• Gradientai už antraščių.
• Fono vaizdai, kurie kinta teksto srityje.
• Temos kintamieji, kurie keičiasi tamsiajame režime.

Jei DevTools negali patikimai apskaičiuoti kontrasto, rankiniu būdu nustatykite atvaizduotas priekinio plano ir fono spalvas. Naudokite apskaičiuotųjų stilių skydelį, laikinai išjunkite sluoksnius arba paimkite matomos spalvos mėginį naudodami integruotą spalvų parinkiklį, jei jūsų naršyklė tai palaiko.

Tekstui ant vaizdų neimkite mėginio iš gražiausios vaizdo dalies. Imkite mėginį iš blogiausios tikėtinos srities už teksto. Jei vaizdas keičiasi per CMS įkėlimus, karuseles ar adaptyvius apkarpymus, tai nėra stabili kontrasto sistema. Pridėkite patikimą perdangą, teksto šešėlį, vientisą konteinerį ar gradiento sprendimą, kuris apsaugo tekstą nepriklausomai nuo vaizdo.

Gera vaizdo perdangos sistema yra nuobodi: toks pats perdangos stiprumas, prognozuojama apkarpymo sritis, pakankamas kontrastas net su ryškiomis nuotraukomis. Nuobodumas čia tinka. Naudotojai bando skaityti.

Nepamirškite būsenų

Statinės ekrano kopijos praleidžia daug kontrasto neatitikčių. Sąveikos būsenas audituokite tiesiogiai naršyklėje.

DevTools priverstinai įjunkite pseudo-klases, tokias kaip:

• :hover
• :focus
• :focus-visible
• :active
• :visited
• :disabled
• :checked
• :invalid

Tada dar kartą patikrinkite apskaičiuotąsias spalvas.

Fokusavimo indikatoriams reikia ypatingo dėmesio. WCAG 2.2 sustiprino lūkesčius dėl fokusavimo išvaizdos, o blyškiai mėlynas kontūras ant šviesiai pilkos kortelės vis dar dažna klaida. Fokusavimo indikatorius turi turėti pakankamą kontrastą su gretimomis spalvomis ir pakankamą plotą, kad būtų pastebimas.

Neaktyviems valdikliams WCAG kontrasto taisyklės numato išimtį. Tai nereiškia, kad išjungti valdikliai pagal nutylėjimą turėtų būti neįskaitomi. Jei išjungta būsena perduoda naudingą informaciją, padarykite ją skaitomą. Jei ne, apsvarstykite, ar ji apskritai turėtų būti rodoma.

Naudokite Lighthouse, bet neperduokite jam sprendimo

Naršyklės auditai, tokie kaip Lighthouse, gali greitai aptikti kai kurias kontrasto problemas. Paleiskite integruotą auditą, jei jūsų naršyklė jį turi, ir laikykite rezultatus pradžios tašku.

Automatinės patikros gerai randa teksto mazgus su akivaizdžiais apskaičiuoto kontrasto neatitikimais. Jos silpniau tvarkosi su:

• Tekstu, įterptu vaizduose.
• Canvas atvaizduotomis etiketėmis.
• SVG kraštiniais atvejais.
• Tik hover būsenų klaidomis.
• Fokusavimo indikatoriaus kokybe.
• Diagramomis, kuriose spalvų ryšiai perteikia prasmę.
• Komponentais, paslėptais už autentifikacijos, meniu ar formos žingsnių.

Jei ataskaita grįžta žalia, vis tiek turite patikrinti reprezentatyvius komponentus. Jei ataskaita grįžta raudona, nepanikuokite ir suskirstykite neatitiktis pagal poveikį naudotojui. Tas pats principas apskritai galioja našumo ir prieinamumo ataskaitoms: įrankio išvestį skaitykite kaip įrodymus, o ne kaip nuosprendį. Tokį požiūrį taikome mūsų gide, kaip skaityti Lighthouse ataskaitą nepanikuojant, ir jis čia tinka labai aiškiai.

Audituokite ir ne teksto kontrastą

Tekstui skiriama daugiausia dėmesio, bet WCAG taip pat apima ne tekstinį turinį, reikalingą sąsajai suprasti ar valdyti.

Patikrinkite bent šiuos atvejus:

• Įvesties laukų kraštinės su puslapio fonu.
• Žymimųjų langelių ir radijo mygtukų kontūrai.
• Perjungiklių būsenos.
• Tik piktogramų mygtukai.
• Klaidų piktogramos ir įspėjamieji simboliai.
• Diagramų linijos, stulpeliai ir etiketės.
• Progreso indikatoriai.
• Pasirinktos kortelės arba aktyvios navigacijos indikatoriai.

Tikslas paprastai yra 3:1 su gretimomis spalvomis. Pavyzdžiui, šviesiai pilka įvesties lauko kraštinė baltame fone gali būti beveik nematoma. Diagrama su penkiomis pastelinėmis linijomis gali atrodyti elegantiškai ir vis tiek būti nenaudojama.

Diagramoms vien kontrasto nepakanka. Naudokite etiketes, raštus, linijų stilius, tiesiogines anotacijas ar tarpus, kad informacija nepriklausytų vien nuo spalvos. Tai padeda daltonizmo turintiems naudotojams, silpnaregiams, žmonėms, žiūrintiems akinimo sąlygomis, ir visiems, skaitantiems ekrano kopiją dokumente.

Fiksuokite radinius formatu, kurį gali naudoti kūrėjai

Naudingas kontrasto auditas nesako „kai kurie pilki atspalviai netinka“. Jis nurodo komponentą, būseną, dabartines reikšmes, laukiamą ribą ir siūlomą pataisą.

Gerai veikia glaustas formatas:

| Komponentas | Būsena | Priekinis planas | Fonas | Santykis | Tikslas | Rezultatas | Siūloma pataisa | |---|---:|---:|---:|---:|---:|---|---| | Kortelės metaduomenys | Numatytoji | #8A8F98 | #FFFFFF | 3.2:1 | 4.5:1 | Nepraeina | Naudoti --color-text-muted-strong | | Pirminis mygtukas | Hover | #FFFFFF | #2F6FEA | 4.8:1 | 4.5:1 | Praeina | Palikti | | Įvesties lauko kraštinė | Numatytoji | #D7DCE2 | #FFFFFF | 1.4:1 | 3:1 | Nepraeina | Patamsinti kraštinės token |

Pataisas siekite su dizaino token, jei svetainė juos turi. Netaisykite dvidešimties atskirų komponentų, jei tikroji problema yra vienas silpnas token.

Taisykite šiek tiek stipriau nei minimumas

Kontrasto klaidas dažnai lengva ištaisyti prastai. Komandos pastumia spalvą, kol tikrintuvas parodo 4.51:1, ir juda toliau. Tai nepalieka jokios atsargos šriftų atvaizdavimui, skaidrumui, naršyklių skirtumams, temoms, vaizdų variacijai ar būsimiems prekės ženklo pakeitimams.

Rinkitės patogius tikslus:

• Pagrindinis tekstas: arčiau 7:1, kai praktiška.
• Prislopintas tekstas: vis tiek virš 4.5:1, jei tai tikras turinys.
• UI kraštinės ir piktogramos: patogiai virš 3:1.
• Tekstas ant vaizdų: naudokite valdomą perdangą, o ne spėliokite pagal kiekvieną vaizdą.

Žiniatinklis žiūrimas pigiuose nešiojamuosiuose kompiuteriuose, pritemdytuose telefonuose, ryškiuose šaligatviuose, tonuotuose monitoriuose ir senstančiuose ekranuose. Minimalus atitikimas nėra tas pats, kas patogus skaitymas.

<!-- tool-cta:start -->

💡 Išbandykite tai: Tikrindami kontrasto poras, kurias paėmėte iš DevTools, Color Converter padeda konvertuoti tarp hex, RGB ir HSL, kad reikšmės sutaptų su jūsų audito pastabomis.

<!-- tool-cta:end -->

Kontrasto audito be diegimo kontrolinis sąrašas

Naudokite šią seką, kai reikia greito, bet patikimo audito:

1. Atidarykite produkcinį puslapį šiuolaikinėje naršyklėje.
2. Išvardykite pagrindinius teksto, UI ir būsenų šablonus.
3. DevTools patikrinkite apskaičiuotąsias priekinio plano ir fono spalvas.
4. Naudokite integruotą spalvų parinkiklį arba prieinamumo skydelį kontrastui perskaityti.
5. Priverstinai įjunkite hover, focus, active, visited ir invalid būsenas.
6. Patikrinkite tekstą ant vaizdų ir gradientų pagal blogiausią tikėtiną foną.
7. Patikrinkite ne tekstines UI dalis pagal 3:1 reikalavimą.
8. Paleiskite integruotą automatinį auditą kaip apsauginį tinklą, o ne kaip visą auditą.
9. Fiksuokite neatitiktis pagal komponentą ir token.
10. Taisykite su atsarga, o ne vos peržengdami ribą.

To pakanka daugumai kontrasto problemų aptikti nepridedant dar vieno įrankio į savo rinkinį. Pažangesni auditai vis dar turi savo vietą, ypač didelėse dizaino sistemose, reguliuojamuose produktuose ar sudėtingoje duomenų vizualizacijoje. Tačiau daugeliui svetainių naršyklė jau suteikia įrodymus, kurių reikia. Sunkiausia dalis — būti pakankamai sistemingiems, kad jais pasinaudotumėte.