WCAG standartai: Ko turėtumėte žinoti
Pagrindinis vadovas apie WCAG 2.1 standartus. Sužinokite, ką reiškia A, AA ir AAA lygiai.
Spalvos ir kontrasto patikra: Vėl iš pradžios
Spalvų aklumas paliečia apie 8% vyrų ir 0,5% moterų. Sužinokite, kaip pasirinkti prieštaringus spalvų derinius ir patikrinti jūsų projektus.
10 min
Pradedantieji
Birželis 2026
Kodėl spalvos ir kontrastas tokie svarbūs?
Kontrastas nėra tik estetinis pasirinkimas. Jis yra pagrindinė prieinamumo charakteristika, kuri leidžia žmonėms su skirtingais regos sugebėjimais naudoti jūsų produktus. Žmonės su spalvų aklumy negali atskirti tam tikrų spalvų kombinacijų, o žmonės su silpna rega reiškalauja aukšto kontrasto, kad skaitytų tekstą be papildomų įrankių.
Geroji žinia? Spalvų kontrastą patikrinti ir pagerinti yra paprasčiau nei jūs manyti. Nereikia turėti specialaus turto ar todėl — tik žinios ir tinkamų įrankių.
Greitai ir paprastai
WCAG 2.1 AA lygis reikalauja 4,5:1 kontrasto santykio paprastam tekstui. Tai reiškia, kad šviesi spalva turi būti mažiausiai 4,5 karto ryškesnė nei tamsi spalva.
Suprasti spalvų aklumy
Spalvų aklumas nėra balta ir juoda. Yra daug rūšių, ir kiekviena turi įtakos žmogui kitaip. Dažniausia rūšis yra raudonai žalias spalvų aklumas — žmonės negali atskirti raudonos nuo žalios. Bet yra ir kitų: mėlynai geltonos spalvos aklumynas, kurio žmonės negali atskirti mėlynos nuo geltonos.
Svarbiausia: niekada nespausk tik spalvomis. Jei jūsų dizaine svarbu išskirti dvi parinktis, naudokite spalvą, bet ir kitą savybę — pavyzdžiui, ikoną, šrifto svorio pasikeitimą arba kraštinę. Tai yra pagrindinis principas.
Kontrasto santykis: skaičiai, kurie svarbu
Kontrasto santykis yra matematinis matas, kuris skaičiuoja, kiek ryškesnė viena spalva yra kitos atžvilgiu. Skalė eina nuo 1:1 (be skirtumo) iki 21:1 (puikus kontrastas).
WCAG standartai nustato du lygius:
- AA lygis: 4,5:1 paprastam tekstui, 3:1 dideliam tekstui (18pt arba 14pt bold)
- AAA lygis: 7:1 paprastam tekstui, 4,5:1 dideliam tekstui — tai yra idealus standartas
Dauguma projektų siekia AA lygio, o tai yra geriau nei nieko. Jei galite pasiekti AAA, dar geriau.
Patikrinimo įrankiai, kurie jums padės
Jūs negalite naudoti akimis. Reikalingas įrankis. Gerą žinią yra tai, kad šie įrankiai yra nemokami ir lengvi naudoti.
WebAIM Contrast Checker
Įklijuokite šešiaženklius spalvų kodekus ir gaukite momentinį kontrasto santykį. Tai yra greičiausia pradžia. Tikrinkite tekstą ir foną skyrium.
Colour Contrast Analyser
Tai darbalaukio programa, kurią galite atsisiųsti. Naudinga, jei norite patikrinti spalvas iš jūsų žinyno arba dizaino programos. Veikia su Windows ir Mac.
Stark (Figma plugin)
Jei jūs naudojate Figmą, šis papildinys patikrina kontrastą tiesiogiai jūsų dizaine. Galite iš karto pamatyti, kurie elementai yra per blogi.
Brazilinės naršyklės prievadai
Chrome, Firefox ir Edge turi integruotus prieinamumo tikrinimo įrankius. Atidarykite Developer Tools ir ieškokite prieigų tikrinimo sekcijos. Paprasta ir nemogu.
Praktiniai patarimai: pradėkite dabar
Teorija gera, bet kaip tai padarytis praktiškai? Čia yra konkretūs žingsniai, kuriuos galite atlikti šiandien.
1
Patikrinkite savo esamą projektą
Atidarykite jūsų projektą (ar bet kokią svetainę) ir naudokite vieną iš aukščiau minėtų įrankių. Tikrinkite atskirai: teksto spalvą ir fono spalvą. Ar jūs gauni 4,5:1 ar aukštesni?
2
Naudokite spalvų paletę, o ne vieniškas spalvas
Susikurkite spalvų paletę, kuri jau žinote, kad veikia. Jei jūsų balta teksto spalva (#ffffff) veikia su tamsiai mėlyna fonu (#003366), naudokite šias spalvas iš viso. Tai sutaupo jūsų laiką.
3
Nekompromiso su dideliais tekstais
Antraštės gali turėti šiek tiek mažesni kontrastą (3:1), bet jei jūsų tekstas yra mažas (mažiau nei 18pt arba 14pt bold), padarykite jį ryškų. Mažas šriftinis dydis reiškia, kad jūs turite daugiau kontrasto.
4
Niekada nespausk tik spalvomis
Jei jūs norite pabrėžti svarbią informaciją, naudokite spalvą, bet pridėkite ir kitą vizualinį žymeklį. Ikoną, pastorinimą, pabraukymą — bet ką, kas padarys elementą savais, išskyrus spalvą.
Simuliatoriai: pamatyti per jų akis
Norite žinoti, kaip jūsų dizainas atrodo žmogui su spalvų aklumy? Galite naudoti spalvų aklumo simuliatorius. Jie paima jūsų svetainę ar nuotrauką ir rodo, kaip ji atrodo su skirtingais spalvų regėjimo sutrikimais.
Tai nėra puikumų spėlionė — tai yra tikra mokslinė simuliacija, grįsta tuo, kaip akis ir smegenys veikia. Norėdami savo svetainę simuliuoti, bandykite tokius įrankius kaip Coblis arba Color Oracle. Jie parodo jums, kas negerai.
Naudinga užduotis: paimkite jūsų projektą, paleiskite jį per simuliatorių ir pamatyti, ar vis tiek galite suprasti, kas vyksta. Jei negalite, turite problemą.
Pagrindinis dalykas
Spalvos ir kontrastas nėra šešėlio problema. Jei norite, kad jūsų produktas būtų prieinamas, turite patikrinti kontrastą. Tai nereikalinga su specialiais turčiais. Naudokite nemokamus įrankius, išmoktą WCAG standartus ir reguliariai patikrinkite.
Jei jūs tik pradedatės, pradėkite nuo 4,5:1 kontrasto santykio AA lygiui. Jei jūs galite daryti daugiau — siekite AAA lygio. Ir visada prisiminkite: spalva viena negali būti vienintelis būdas skaidyti informaciją.
Norėjote daugiau informacijos? Žemiau rasite susijusius straipsnius apie prieinamumą ir dizainą.
Svarbi pastaba
Individualios mokymo rezultatai skiriasi nuo žmogaus žmogui. Šie patarimai yra edukacinės medžiagos. Patikrinkite savo projektus su realiais naudotojais ir tikri prieinamumo specialistais prieš pradėdami.
Prieinamumo Standartai ir Įtraukus Dizainas Redakcinis Kolektyvas
Redakcinis Kolektyvas
Parengta Prieinamumo Standartai ir Įtraukus Dizainas redakcinio kolektyvo, orientuoto į patikimą ir taikomą mokymo medžiagą.
Susiję straipsniai
Ekrano skaitytuvo sertifikavimas: Praktinis vadovas
Supraskite, kaip veikia ekrano skaitytuvo technologija. Testų tipiškos klaidos ir jų sprendimai.
Klaviatūros naršymas: Esminis įrankis prieinama projektams
Ne visi vartotojai gali naudoti pelę. Išmokite kurti puikiai veikiančius klaviatūros navigacijos projektus.