Prieš kalbant apie spalvų kontrasto svarbą žiniatinklio pasiekiamumui, svarbu apibrėžti, kas yra spalvų kontrastas.
Spalvų kontrastas yra šviesumo skirtumas tarp priekinio plano spalvos, pavyzdžiui, teksto, ir fono spalvos. Jei priekinio plano spalvos reikšmės per daug panašios į foną, elementai gali susilieti su fonu. Pavyzdžiui, šviesiai pilka baltame fone turi mažą kontrastą, o juodo teksto baltame fone kontrastas didelis. Šviesiai pilkas tekstas susilies į foną, o juodas tekstas išsiskirs.
Kodėl spalvų kontrastas svarbus žiniatinklio prieinamumui?
Didelis spalvų kontrastas yra naudingas daugeliui vartotojų, pvz., silpnaregiams, daltonistams ir tiems, kurie žiūri ekranus esant prastam apšvietimui arba su akinimu.
- Silpnas matymas: Tai užtikrina, kad silpnaregiams naudotojams tekstas būtų atskirtas nuo fono.
- Spalvų aklumo palaikymas: Didelis kontrastas leidžia atskirti elementus, kuriuos vartotojai, turintys spalvų regėjimo sutrikimų, gali supainioti.
- Apsaugo akių nuovargį: Aiškus kontrastas sumažina nuovargį, todėl visiems vartotojams lengviau ir patogiau skaityti.
- Susitvarko su nepalankiomis sąlygomis: Tai padeda užtikrinti, kad turinys būtų skaitomas net ir esant prietaiso akinimui, ryškiai saulės šviesai.
- Atitinka teisinius standartus: WCAG (žiniatinklio turinio prieinamumo gairių) kontrasto santykio laikymasis padeda užtikrinti, kad jūsų svetainė atitiktų prieinamumo reikalavimus.
WCAG kontrasto standartai
Žiniatinklio turinio prieinamumo gairės (WCAG) yra tarptautinis žiniatinklio prieinamumo standartas. Juose pateikiami konkretūs kiekybiškai įvertinami kontrasto santykiai, kuriuos turi atitikti svetainės.
Pagrindiniai kontrasto santykiai:
- AA lygis (minimalus reikalavimas):
- Įprastas tekstas: Kontrasto santykis 4,5:1.
- Didelis tekstas (18 pt arba 14 pt paryškintas): kontrasto santykis 3:1.
- Vartotojo sąsajos komponentai ir grafika: Kontrasto santykis 3:1 (pvz., piktogramos, įvesties kraštinės, grafikai).
- AAA lygis (patobulintas reikalavimas):
- Įprastas tekstas: Kontrasto santykis 7:1.
- Didelis tekstas: Kontrasto santykis 4,5:1.
The 4,5:1 įprasto teksto santykis (AA lygis) yra pramonės etalonas, kurio turėtų siekti kiekviena svetainė.
Kaip patikrinti kontrastą
Yra daug nemokamų šaltinių spalvų kontrastams patikrinti. Vienas iš tų nemokamų šaltinių yra „WebAIM“ kontrasto tikrintuvas. Dizaineriai ir kūrėjai gali įvesti priekinio plano ir fono spalvas, kad patikrintų, ar kontrastas atitinka WCAG AA arba AAA reikalavimus.
Blogo spalvų kontrasto pavyzdys
Žemiau esančioje ekrano kopijoje parodyta E2E2E9 priekinio plano spalva, kuri yra šviesiai pilka, ir FFFFFF fono spalva, kuri yra balta. Priekinio plano ir fono spalvų kontrasto santykis yra 1,28:1, o tai neatitinka WCAG AA ar AAA standartų.
Gero spalvų kontrasto pavyzdys
Žemiau esančioje ekrano kopijoje parodyta 000000 priekinio plano spalva, kuri yra juoda, ir FFFFFF fono spalva, kuri yra balta. Priekinio plano ir fono spalvų kontrasto santykis yra 21:1, kuris atitinka WCAG AA arba AAA standartus.
Išvada
Apibendrinant galima pasakyti, kad spalvų kontrasto teikimas pirmenybei suteikia galimybę daugybei vartotojų, pvz., silpnaregių, daltonizmo ir žiūrinčių ekranus esant prastam apšvietimui arba su akinimu. Spalvų kontrasto prioritetas yra ne tik pritaikymo neįgaliesiems gairių laikymasis; ji skatina įtraukią skaitmeninę aplinką.
