CSS kintamieji ir jų panaudojimas temų perjungimui
Sužinokite, kaip CSS kintamieji leidžia lengvai keisti spalvas ir stilius nekeičiant HTML…
Prieinamumas ir kontrastas tamsaus režimo dizaine
Kaip pasirinkti spalvas, kurias galės skaityti visi vartotojai, nepriklausomai nuo jų regėjimo savybių
9 min
Vidutinis
Birželis 2026
Kodėl prieinamumas svarbus tamsiam režimui
Dažnai pasitaiko, kad kūrėjai kurie nustatyti tamsų režimą, nepagalvoja apie spalvų kontrastą. Rezultatas? Žmonės su silpnu regėjimu negali perskaityti teksto. Tai nėra sudėtinga išvengti — tiesiog reikia suprasti kelis paprastus principus.
Prieinamumas nėra papildomas feature, kurį galima ignoruoti. Jis yra pagrindinė dalis šiuolaikinio web dizaino. Kai tamsus režimas darytas gerai, jis turėtų būti taip pat lengvai skaitomas kaip švietus režimas.
Temų Vakaras Redakcinė Komanda
Redakcinė Komanda
Parengta Temų Vakaro redakcinės komandos, sutelktos į praktišką ir lengvai suprantamą pagalbą.
Kontrasto santykis ir WCAG standartai
Kontrasto santykis yra matematinė reikšmė, kuri palyginą dviejų spalvų šviesumą. Standartinė formulė skaičiuoja, kiek kartų viena spalva yra šviesesnė nei kita.
WCAG (Web Content Accessibility Guidelines) nurodo tris lygius:
- AA lygis: 4.5:1 santykis paprastam tekstui, 3:1 dideliems tekstams (18pt arba daugiau)
- AAA lygis: 7:1 santykis paprastam tekstui, 4.5:1 dideliems tekstams
- Minimumas: 3:1 santykis labai dideliems tekstams (24pt arba daugiau)
Dauguma svetainių siekia bent AA lygio. AAA lygis yra optimalus, bet ne visada reikalingas.
Konkrečios spalvų rekomendacijos tamsiam režimui
Tamsame režime gera praktika yra naudoti labai šviesias spalvas tekstui. Absoliučiai balta (#FFFFFF) yra dažnai per ryški ir gali sukelti skausmo per ilgą skaitymo sesija.
Geriau pasirinkti šviesias neutralias spalvas — tokias kaip #F0F0F0 arba #E8E8E8. Šios spalvos suteikia gerą kontrastą tamsiam foną, bet nėra tokios ryškios.
Antrinio teksto spalvoms (etiketes, pavadinimus, smulkūs tekstai), galite naudoti šiek tiek tambesnes spalvas — bet tik jei jos vis dar pasiekia 4.5:1 santykį su fonu. Pavyzdžiui, #B0B0B0 gali veikti, bet prieš tai patikrinkite su kontrasto tikrinimo įrankiu.
Praktinis patarimas: Naudokite kontrasto tikrintuvus
Nereikia skaičiuoti kontrasto santykio rankomis. Egzistuoja nemokamų internetinių įrankių, kurie tai padaro už jus. WebAIM kontrasto tikrintuvas yra populiarus ir lengvai naudojamas. Tiesiog įklijuokite jūsų foną ir teksto spalvas — jis pasakys, ar jūs pasiekėte AA arba AAA lygį.
Susiję straipsniai
localStorage naudojimas vartotojo nustatymuose išsaugoti
Praktinis vadovas, kaip panaudoti localStorage, kad vartotojo pasirinkta tema būtų išsaugota…
Operacinės sistemos nustatymuose pagrįstas tamsus režimas
Kaip naudoti prefers-color-scheme medijos užklausą, kad jūsų svetainė automatiškai…
Informacinė pastaba
Šis straipsnis suteikia informaciją apie WCAG prieinamumo standartus ir spalvų kontrasto principus. Naudojant šią informaciją turėtumėte patys patikrinti, kad jūsų svetainė atitinka taikomus prieinamumo reikalavimus jūsų jurisdikcijoje. Norėdami gauti specifines rekomendacijas, patariame konsultuotis su prieinamumo specialistais.
Pagrindinės išvados
Prieinamumas tamsame režime nėra sudėtingas, jei žinote, ko ieškoti. Svarbiausias dalykas — pasirinkti tekstui pakankamai šviesias spalvas, kurios pasiekia mažiausiai 4.5:1 kontrasto santykį su fonu. Tai galima pasiekti naudojant paprastus kontrasto tikrintuvus.
Jei jūs dizaino tamsų režimą, nepamirškite, kad kiti žmonės gali jį naudoti labai skirtingai nei jūs. Žmonės su astigmatizmu, raganėlės degeneracija, arba paprasčiausiai žmonės, kurie geria silpnos akies akinius — jie visi turi naudoti jūsų svetainę. Geras kontrasto santykis tai padaro galimą.
Prieinamumas nėra tik apie WCAG standartus. Tai yra apie pagarbą jūsų vartotojams. Leiskite jiems skaityti jūsų svetainę, nepriklausomai nuo to, kaip jų regėjimas veikia.