Spalvų kontrastas: WCAG santykiai, patikrinimas ir taisymas

Šviesiai pilkas tekstas ant balto fono dizaino faile atrodo švariai. Telefone ryškioje saulėje arba silpnaregiui jį skaityti sunku. Be to, tai apskritai dažniausia prieinamumo klaida: WebAIM Million 2026 (atsidaro naujame skirtuke) mažo kontrasto tekstą rado 83,9 % milijono populiariausių pagrindinių puslapių, vidutiniškai po 34 atskirus atvejus puslapyje.

Gera žinia ta, kad kontrastą galima išmatuoti, ribos aiškios, o pataisymai dažniausiai pigūs. Šiame vadove rasite skaičius, nemokamus įrankius ir būdą pataisyti prekės ženklo spalvas nepradedant visko iš naujo.

Kas yra spalvų kontrasto santykis?

Kontrasto santykis yra skaičius, lyginantis dviejų spalvų, dažniausiai teksto ir jo fono, santykinį šviesumą, arba skaistį (angl. relative luminance). WCAG jį apskaičiuoja pagal nustatytą formulę, o rezultatas svyruoja nuo 1:1 (jokio skirtumo, balta ant baltos) iki 21:1 (juoda ant baltos). Kuo didesnis skaičius, tuo lengviau dvi spalvas atskirti.

Formulė yra (L1 + 0,05) / (L2 + 0,05), kur L1 yra šviesesnės spalvos santykinis skaistis, o L2 yra tamsesnės. Patiems skaičiuoti jums niekada neprireiks, tačiau viena detalė svarbi: skaičiuojamas tik skaistis, o ne atspalvis. Todėl raudonas tekstas ant žalio fono gali atrodyti ryškus ir vis tiek gauti prastą rezultatą.

Kita detalė, kurią žmonės praleidžia, yra apvalinimas. W3C 1.4.3 kriterijaus paaiškinamajame dokumente (atsidaro naujame skirtuke) sakoma, kad apskaičiuotos reikšmės „neturėtų būti apvalinamos (pvz., 4,499:1 neatitiktų 4,5:1 ribos)“. Taigi pilka #767676 ant baltos (4,54:1) atitinka, o #777777 ant baltos (4,48:1) neatitinka, nors akimi jų niekas neatskirtų.

Kokio kontrasto santykio reikalauja WCAG?

AA lygiu, kuriuo remiasi dauguma įstatymų ir sutarčių, įprastam tekstui reikia ne mažesnio kaip 4,5:1 santykio su fonu, o dideliam tekstui 3:1 (sėkmės kriterijus 1.4.3). Sąsajos komponentams ir prasmingai grafikai reikia 3:1 su gretimomis spalvomis (1.4.11). Griežtesnis AAA lygis reikalauja 7:1 įprastam tekstui ir 4,5:1 dideliam tekstui (1.4.6).

Kodėl 4,5:1? W3C aiškina, kad šis santykis „kompensavo kontrasto jautrumo praradimą, kurį paprastai patiria naudotojai, kurių regėjimo praradimas atitinka maždaug 20/40 regėjimą“ (t. y. regėjimo aštrumą apie 0,5). Kitaip tariant, jis nustatytas žmonėms su vidutiniškai susilpnėjusiu regėjimu, o tai apima daug vyresnio amžiaus pirkėjų, kurie niekada savęs nepavadintų žmonėmis su negalia.

Kai kuriam tekstui reikalavimas netaikomas: logotipams ir prekių ženklų pavadinimams, grynai dekoratyviam tekstui, niekam nematomam tekstui, tekstui paveikslėlyje, kuriame yra reikšmingo kito vaizdinio turinio, ir neaktyvių (išjungtų) valdymo elementų tekstui. Jūsų logotipas gali likti toks, koks yra. Pastraipa, surinkta blyškia jūsų logotipo spalva, negali.

Kas laikoma dideliu tekstu?

Pagal WCAG didelis tekstas yra bent 18 punktų arba bent 14 punktų, jei jis paryškintas. W3C tai perskaičiuoja į maždaug 24 CSS pikselius ir 18,5 pikselio paryškinto teksto. Viskam, kas mažesnis, reikia viso 4,5:1. Pagrindinis tekstas, paveikslėlių aprašai, formų etiketės, kainos ir poraštės nuorodos beveik niekada nebūna didelis tekstas, todėl joms reikia didesnio santykio.

Štai kaip tai atrodo praktiškai. Pilka #949494 ant baltos gauna 3,03:1. Tai tinka 28 pikselių antraštei, bet netinka tos pačios spalvos 16 pikselių pastraipai. Daug svetainių antraštės reikalavimus atitinka, o visa, kas po jomis, ne.

Ploniems ir dekoratyviniams šriftams reikia papildomo dėmesio. W3C pažymi, kad dėl glotninimo (anti-aliasing) „ypač ploni ar neįprasti šriftai naršyklėse gali būti atvaizduojami daug blankesne spalva“ nei ta, kurią pasirinkote. Jei jūsų prekės ženklo šriftas yra plonas, palikite atsargą virš 4,5:1, o ne taikykite į 4,51.

Ar kontrastas taikomas mygtukams, piktogramoms, fokuso indikatoriams ir diagramoms?

Taip. Pagal sėkmės kriterijų 1.4.11 (AA lygis) viskam, ką žmonėms reikia matyti, kad atpažintų valdymo elementą, jo būseną ar grafiką, reikia 3:1 su gretimomis spalvomis. Tai apima formų laukų rėmelius, piktogramas be teksto etiketės, fokuso rėmelius, žymimųjų langelių ir jungiklių būsenas bei diagramų linijas ir segmentus. Tekstui mygtuko viduje vis tiek reikia 4,5:1.

• Formų laukai: šviesiai pilkas #CCCCCC rėmelis ant baltos gauna 1,61:1. Jei ši blanki linija yra vienintelis dalykas, rodantis, kur rašyti, ji reikalavimų neatitinka.
• Mygtukai: WCAG nereikalauja matomo rėmelio aplink kiekvieną mygtuką. W3C 1.4.11 kriterijaus paaiškinamajame dokumente (atsidaro naujame skirtuke) sakoma, kad riba reikalinga tik tada, kai nėra kito vaizdinio būdo atpažinti valdymo elementą. Jei mygtukas atpažįstamas tik iš spalvotos formos, šios formos kontrastas su puslapiu turi būti bent 3:1.
• Piktogramos: paieškos didinamajam stiklui, pageidavimų širdelei ar krepšelio piktogramai be šalia esančio teksto reikia 3:1.
• Fokuso indikatoriai: klaviatūros fokusą rodantis rėmelis turi kontrastuoti su aplinkiniu fonu. Naujesni fokuso kriterijai aptarti mūsų WCAG 2.2 vadove.
• Diagramos: linijinės diagramos linijoms ir skritulinės diagramos dalims reikia 3:1, nebent tos pačios reikšmės pateiktos ir tekstu.
• Išjungti valdymo elementai yra išimtis, nors žmonėms vis tiek reikia suprasti, ar mygtuką galima paspausti.

Nuorodos ištisiniame tekste yra ypatingas atvejis. Jei jos išskiriamos tik spalva, be pabraukimo, W3C technika G183 (atsidaro naujame skirtuke) reikalauja 3:1 santykio tarp nuorodos spalvos ir aplinkinio teksto, o abiem vis tiek reikia 4,5:1 su fonu. Rasti tris spalvas, kurios visa tai tenkintų, sunku. Pabraukti daug lengviau.

Kaip patikrinti spalvų kontrastą?

Konkrečioms spalvų poroms naudokite nemokamą kontrasto tikrintuvą, veikiantiems puslapiams naršyklės kūrėjo įrankius, o probleminėms vietoms visoje svetainėje rasti automatinį skenavimą. Tada akimi patikrinkite tai, ko įrankiai nepastebi: tekstą ant nuotraukų ir gradientų, užvedimo ir fokuso būsenas, laikinąjį tekstą ir klaidų pranešimus. Didžioji dalis to užtrunka kelias minutes kiekvienam puslapio šablonui.

• WebAIM Contrast Checker (atsidaro naujame skirtuke): įveskite du šešioliktainius spalvų kodus ir gausite santykį su įvertinimu, ar jis tinka įprastam tekstui, dideliam tekstui ir grafiniams objektams. Šviesumo slankiklis padeda rasti artimiausią reikalavimus atitinkantį atspalvį.
• Colour Contrast Analyser (atsidaro naujame skirtuke): nemokama Vispero programa, skirta Windows ir macOS. Jos pipetė paima bet kurio ekrano pikselio spalvą, o tai naudinga tikrinant tekstą ant paveikslėlių, PDF ir programėlėse; joje yra ir spalvų aklumo simuliatorius.
• Chrome DevTools: apžiūrėkite teksto fragmentą ir atidarykite spalvos parinkiklį. Jo kontrasto santykio skiltyje (atsidaro naujame skirtuke) rodomos AA ir AAA linijos ir gali būti pasiūlyta reikalavimus atitinkanti spalva. Skydelis CSS Overview išvardija visas puslapio kontrasto problemas.
• Automatiniai tikrintuvai: naršyklių plėtiniai ir Lighthouse pažymi mažo kontrasto tekstą visame puslapyje, tačiau tekstą ant paveikslėlių ar gradientų dažnai pažymi kaip reikalaujantį rankinio patikrinimo, užuot įvertinę, ar jis atitinka reikalavimus.

Ten, kur įrankių neužtenka, tikrinkite rankiniu būdu. Tekstui ant pagrindinės nuotraukos patikrinkite šviesiausią vaizdo vietą už šviesiausių raidžių; W3C fono paveikslėlius su nepakankamu kontrastu nurodo kaip žinomą klaidą (F83). Užveskite pelę ant mygtukų, pereikite prie jų Tab klavišu, sukelkite formos klaidą, įjunkite tamsųjį režimą, jei jį siūlote. Tamsi tema taip pat gali neatitikti: pilka #757575 ant #121212 fono gauna 4,07:1. Mūsų vadove kaip patikrinti svetainės prieinamumą kontrastas aptariamas kartu su kitais greitais rankiniais patikrinimais.

Kaip ištaisyti mažą kontrastą nekeičiant prekės ženklo?

Paprastai pridedant tamsesnį prekės ženklo spalvos atspalvį tekstui ir mažiems elementams, o originalią spalvą paliekant didelėms antraštėms, fonams ir iliustracijoms. Daug prekės ženklo spalvų reikalavimų neatitinka tik mažais dydžiais. Dažnai užtenka baltą tekstą ant šviesios prekės ženklo spalvos pakeisti tamsiu, o dauguma lankytojų pastebės tik tai, kad puslapį lengviau skaityti.

1. Kiekvienai prekės ženklo spalvai sukurkite tekstui saugią versiją, kurios kontrastas su pagrindiniais fonais būtų bent 4,5:1, ir naudokite ją pagrindiniam tekstui, nuorodoms ir mažoms piktogramoms.
2. Originalią ryškią spalvą naudokite didelėms antraštėms (ten pakanka 3:1), fonams, iliustracijoms ir dekorui.
3. Ant šviesių prekės ženklo spalvų mygtukų tekstą pakeiskite iš balto į tamsų.
4. Po tekstu ant nuotraukų dėkite vientisą ar pusiau permatomą foną.
5. Patikrinkite kiekvieną būseną: užvedimo, fokuso, aplankytos nuorodos, pasirinkimo, klaidos ir laikinojo teksto.
6. Atitinkančias poras išsaugokite kaip dizaino žetonus (design tokens) ar temos nustatymus, kad nauji puslapiai jas paveldėtų, o ne kurtų iš naujo.

Dizainas žmonėms su spalvų matymo sutrikimais: kodėl vien spalvos neužtenka

Kontrastas ir spalva yra skirtingos problemos. Pasak Colour Blind Awareness (atsidaro naujame skirtuke), maždaug vienas iš 12 vyrų ir viena iš 200 moterų turi spalvų matymo sutrikimą (dažniausiai sunkiai skiria raudoną ir žalią). WCAG 1.4.1 (atsidaro naujame skirtuke) (A lygis) sako, kad spalva neturi būti vienintelis vaizdinis informacijos perteikimo būdas, todėl derinkite ją su tekstu, piktogramomis, raštais ar pabraukimais.

• Formų klaidos: vien raudonas rėmelis reikalavimų neatitinka. Šalia lauko pridėkite pranešimą, pavyzdžiui, „Įveskite pašto kodą“, geriausia su piktograma.
• Prekių likučiai ir būsenos: žalias ar raudonas taškas šalia prekės daugeliui pirkėjų nieko nepasako. Rašykite „Yra sandėlyje“ arba „Išparduota“.
• Diagramos: legendą, kuri remiasi spalvų sutapatinimu, skaityti sunku. Linijas žymėkite tiesiogiai arba naudokite raštus ir skirtingus linijų stilius.
• Nuorodos: tekste jas pabraukite dėl aukščiau minėtų priežasčių.

Kad problemą pamatytumėte patys, Chrome DevTools gali imituoti regėjimo sutrikimus, o Colour Contrast Analyser taip pat turi simuliatorių. Čia padeda ir kontrastas: santykis matuoja šviesumą, o ne atspalvį, todėl dvi spalvos su dideliu santykiu išlieka atskiriamos net tada, kai jų atspalviai atrodo panašūs. Daugiau apie tai, kaip silpnaregiai ir žmonės su kitais sutrikimais nusistato savo įrenginius, rasite straipsnyje kaip žmonės su negalia naudojasi internetu.

Ar pakanka didelio kontrasto režimų ir kontrasto jungiklių?

Ne. Operacinės sistemos kontrasto temos ir puslapio kontrasto jungikliai padeda žmonėms, kurie žino, kad jiems reikia daugiau kontrasto, ir jį įsijungia. Tačiau WCAG vertina numatytąją jūsų puslapio būseną, todėl spalvos, kurias kiekvienas lankytojas mato pirmiausia, vis tiek turi atitikti reikalavimus. Jungiklis yra papildoma galimybė norintiems daugiau, o ne reikalavimų neatitinkančių spalvų pataisymas.

Kai kurie žmonės su negalia naudoja Windows kontrasto temas, kurios jūsų spalvas pakeičia savosiomis. Verta išbandyti svetainę įjungus tokią temą: iš fono paveikslėlių sukurtos piktogramos gali dingti, o tik šešėliu (box-shadow) nupiešti fokuso stiliai gali išnykti. CSS medijos užklausa prefers-contrast taip pat leidžia pasiūlyti didesnio kontrasto versiją tiems, kurie jos paprašė sistemos nustatymuose.

Mūsų pačių valdiklis turi kontrasto funkciją ir profilį žmonėms su spalvų matymo sutrikimais, kai kuriems lankytojams jie naudingi. Vis tiek pasakytume tą patį: jei jūsų pagrindinis tekstas yra #999999 ant baltos, pakeiskite CSS. Valdiklis suteikia daugiau kontrasto norinčiam lankytojui būdą jį gauti. Jis nepadaro, kad reikalavimų neatitinkančios numatytosios spalvos juos atitiktų; tai nurodyta ir mūsų dokumentacijos WCAG skyriuje.