Spalvų kontrastas el. parduotuvėje: ką reikalauja prieinamumo gairės

Paskelbta 2026-11-09

Blyškiai pilkas tekstas ant balto fono, baltas užrašas ant šviesios nuotraukos ar vos matomas mygtuko rėmelis gali atrodyti stilingai, tačiau daliai pirkėjų toks turinys tiesiog neįskaitomas. Šiame straipsnyje paaiškiname, ką saityno turinio prieinamumo gairės (WCAG 2.1) reikalauja dėl spalvų ir kontrasto ir kaip tai pritaikyti el. parduotuvėje.

Kodėl kontrastas svarbus

Pasak W3C, kontrasto reikalavimų tikslas – kad tekstą be papildomų priemonių galėtų perskaityti žmonės, kurių regėjimas vidutiniškai susilpnėjęs arba kurie prasčiau skiria kontrastą. Su amžiumi kontrasto jautrumas paprastai mažėja, todėl tai aktualu ir vyresniems pirkėjams. Be to, ne visi spalvas mato vienodai: kai kurie žmonės, pavyzdžiui, sunkiai atskiria raudoną ir žalią. Geras kontrastas naudingas ir visiems kitiems – skaitant telefono ekraną saulėje ar ekrane sumažinus ryškumą.

Kas yra kontrasto santykis

WCAG kontrastą matuoja santykiu tarp šviesesnės ir tamsesnės spalvos santykinio skaisčio. Santykis gali būti nuo 1:1 (tos pačios spalvos tekstas ant tokio paties fono) iki 21:1 (juodas tekstas ant balto fono). Kuo didesnis skaičius, tuo lengviau skaityti. Santykio nereikia skaičiuoti ranka: jį parodo bet kuri kontrasto skaičiuoklė, kai įvedate teksto ir fono spalvų kodus.

Ką reikalauja WCAG 2.1 AA

Svarbiausi su spalvomis susiję kriterijai yra trys:

1.4.3 „Kontrastas (minimalus)“, AA lygis. Teksto ir teksto paveikslėlių kontrastas su fonu turi būti ne mažesnis kaip 4,5:1. Dideliam tekstui pakanka 3:1. Dideliu laikomas ne mažesnis kaip 18 punktų arba ne mažesnis kaip 14 punktų paryškintas tekstas – W3C paaiškinimuose nurodyta, kad tai atitinka maždaug 24 ir 18,5 CSS pikselio.
1.4.11 „Netekstinio turinio kontrastas“, AA lygis. Vaizdiniai ženklai, pagal kuriuos atpažįstami valdikliai ir jų būsenos (pavyzdžiui, įvesties lauko rėmelis, varnelės langelis, pasirinkimo žymėjimas), taip pat grafikų dalys, reikalingos turiniui suprasti, turi turėti ne mažesnį kaip 3:1 kontrastą su gretimomis spalvomis.
1.4.1 „Spalvų naudojimas“, A lygis. Spalva negali būti vienintelė vaizdinė priemonė informacijai perteikti, veiksmui nurodyti, atsakui paprašyti ar elementui išskirti.

Aukščiausiame AAA lygyje (kriterijus 1.4.6) reikalaujama dar didesnio kontrasto – 7:1 paprastam tekstui ir 4,5:1 dideliam. Šis lygis nėra būtinas, tačiau gali būti gera kryptis pagrindiniam tekstui.

Kam reikalavimai netaikomi

Pagal kriterijų 1.4.3 kontrasto reikalavimas netaikomas tekstui, kuris yra neaktyvaus valdiklio dalis (pavyzdžiui, šiuo metu neprieinamas mygtukas), grynai dekoratyviam tekstui, niekam nematomam tekstui ir tekstui, kuris yra nuotraukos su kitu reikšmingu vaizdiniu turiniu dalis. Taip pat netaikomas logotipams ir prekės ženklo pavadinimams. Vis dėlto prekės nuotraukoje esantis užrašas, kuriame pateikiama svarbi informacija, pavyzdžiui, nuolaidos sąlygos, turi būti aiškiai įskaitomas.

Dažnos klaidos el. parduotuvėse

Šviesiai pilkas tekstas. Prekių aprašymai, kainos be nuolaidos, pristatymo sąlygos ar teisinė informacija dažnai rašomi per šviesia spalva.
Užuominos įvesties laukuose. W3C pažymi, kad kriterijus taikomas ir laukelyje rodomam pavyzdiniam tekstui (pvz., „[email protected]“), taip pat tekstui, rodomam užvedus pelę ar pažymėjus elementą klaviatūra.
Tekstas ant nuotraukų. Pagrindinio puslapio reklamjuostėse baltas tekstas ant šviesios nuotraukos dalies tampa neįskaitomas. Padėkite po tekstu vientisą ar pusiau permatomą tamsų sluoksnį arba perkelkite tekstą šalia nuotraukos.
Blyškūs įvesties laukų rėmeliai. Jei laukelio ribos vos matomos, pirkėjas gali nesuprasti, kur rašyti. Rėmelio kontrastas su fonu turi būti bent 3:1.
Klaidos rodomos tik raudona spalva. Jei neteisingai užpildytas laukas tik nusidažo raudonai, dalis pirkėjų to nepastebės. Šalia pridėkite aiškų tekstą, pavyzdžiui, „Įveskite el. pašto adresą“, ir, jei norite, ženklą.
Nuorodos atskiriamos tik spalva. Teksto pastraipoje esančią nuorodą verta pabraukti, kad ji nesiskirtų nuo aplinkinio teksto vien spalva.
Prekių variantai tik spalvų kvadratėliais. Šalia spalvos pavyzdžio nurodykite ir pavadinimą („tamsiai mėlyna“), o pasirinktą variantą pažymėkite ne tik spalvos pokyčiu, bet ir, pavyzdžiui, storesniu rėmeliu ar varnele.
Nematomas fokusas. Klaviatūra naršančiam pirkėjui būtina matyti, kuris elementas aktyvus. Fokuso žymėjimas, pavyzdžiui, rėmelis aplink mygtuką, turėtų aiškiai išsiskirti iš fono.

Kaip pasitikrinti patiems

Surašykite pagrindines svetainės spalvas: teksto, fono, nuorodų, mygtukų, rėmelių ir klaidų pranešimų.
Kontrasto skaičiuokle patikrinkite kiekvieną teksto ir fono porą. Paprastam tekstui siekite bent 4,5:1, dideliam ir valdiklių rėmeliams – bent 3:1.
Peržiūrėkite puslapius taip, lyg nematytumėte spalvų: ar vis tiek suprasite, kuris laukas užpildytas klaidingai, kuris variantas pasirinktas ir kur yra nuorodos?
Patikrinkite visas būsenas: užvedus pelę, pažymėjus klaviatūra, pasirinktą, išjungtą ir klaidos būseną.
Atskirai peržiūrėkite reklamjuostes ir paveikslėlius su tekstu, ypač mobiliajame telefone.

Kontrasto klaidas paprastai ištaisyti nesudėtinga: dažnai pakanka patamsinti vieną ar dvi spalvas stiliaus faile. Verta tai daryti nuosekliai – sukurti nedidelę patikrintų spalvų paletę ir ja naudotis visoje svetainėje.

Ryšys su teisiniais reikalavimais

Lietuvos gaminių ir paslaugų prieinamumo reikalavimų įstatymas Nr. XIV-1633 tiesiogiai neįpareigoja taikyti konkretaus WCAG lygio. Tačiau paslaugos, atitinkančios darniuosius standartus, laikomos atitinkančiomis reikalavimus tiek, kiek tuos reikalavimus apima standartai. Europoje taikomas skaitmeninio prieinamumo standartas EN 301 549 V3.2.1 interneto turiniui taiko WCAG 2.1 AA kriterijus, tarp jų ir čia aptartus. Plačiau apie tai, kam taikomi reikalavimai, rašėme straipsnyje „Skaitmeninio prieinamumo reikalavimai el. parduotuvėms Lietuvoje“.

Šis straipsnis yra bendro pobūdžio informacija ir nėra teisinė konsultacija. Ar reikalavimai taikomi jūsų verslui, rekomenduojame pasitarti su teisininku arba VVTAT.

Šaltiniai

Teisės aktai keičiasi, todėl visada tikrinkite galiojančią redakciją.