axessia.eu

Най-честата грешка при контрастност на цветовете: какво се объркава и как да я избегнете?

Недостатъчния контраст между текста и фона е един от най-често откритите проблеми при сканирането за съответствие с изискванията. Тази статия обяснява къде възникват проблемите, какво предписва WCAG и как можете да го предотвратите систематично.

Недостатъчният контраст между текста и фона е един от най-честите проблеми при проверки за достъпност и в същото време една от най-лесно избежимите грешки. Проблемът възниква когато светлосив текст стои върху бял фон, когато бутоните са видими само поради фин цветен преход, или когато текстът за напътствие в поле на формуляр служи като единствено указание за това, което трябва да се попълни. За хората със зрителни затруднения, но и за всеки, който ползва екран при силна слънчева светлина, текстът становится буквално нечетлив.

WCAG 2.1, нормата, към която EN 301 549 се позовава, предписва на ниво AA минимално съотношение на контраста между текста и фона, върху който стои: обикновено 4,5 към 1 за обикновен текст и 3 към 1 за голям текст и управляеми елементи като бутони и ръбове на полета. Това звучи технически, но основната идея е проста: контрастът не е естетически избор, той е условие за предаване на информация.

Където в практиката се допускат грешки

Проблемите с контраста рядко възникват умишлено. Те се промъкват чрез избори на фирмения стил, които изглеждат перфектни на голям, остър екран в студио за дизайн, но на среден екран при среден потребител се оказват точно под нормата. Светлосив текст на бутон върху пастелен фон е класически пример. Същото важи и за връзки, които се разпознават само чрез цветна разлика, без подчертаване или друг визуален сигнал, поради което хората със цветна слепота просто не ги виждат като кликвъзможни.

Друго често повтарящо се явление е състоянието при преминаване (hover): бутон, който в покой отговаря перфектно на изискванията, но при преместване на мишката преминава към комбинация от цветове, която не е проверена. Съобщенията за грешки във формулярите също са честа грешка: червен текст на светлочервен фон изглежда последователен с фирмения стил, но често не постига необходимото съотношение. Ако сте любопитни как този вид проблеми се проявяват във вашата среда, можете да видите в няколко въпроса къде стои вашият сайт без да ви е необходимо да отваряте акаунт.

Защо автоматичната проверка отчасти, но не напълно решава това

Съотношенията на контраста могат да се измерват добре автоматично: сканер прочита стойностите на цветовете на текста и фона и изчислява съотношението. С това това е един от малкото критерии на WCAG 2.1, които инструмент може надеждно да провери. Което сканер не вижда, е контраст, който възниква след взаимодействие, например разгънато меню, подсказка, която се появява при фокусиране, или статус, видим само след действие на потребителя. Именно затова всеки доклад посочва кой дял е проверен автоматично и кой дял изисква ръчна оценка; контрастът е силна страна на автоматичната проверка, но не е пълната картина.

Как да го избегнете систематично

Най-разпространеният начин да избегнете този проблем продължително е да фиксирате контраста на ниво система за проектиране, вместо по страница. Когато основните цветове на фирмения стил се проверяват за съответствие с нормата при установяването им, редактор или разработчик не трябва да го проверява всеки път отново. Това също предотвратява нова страница, временна банер за промоция или външно закупен елемент да намалят контрастното съотношение незабелязано.

Освен това е разумно да включите контраста експлицитно при всяка визуална промяна на сайта, не само при първоначалното доставяне. Обновяване на фирмения стил, нова сезонна тема или променен стил на бутони могат да въведат проблем, който не е бил в предходната версия. Достъпността в този смисъл не е отметка, която поставяте веднъж, а внимателна точка, която се преразглежда при поддръжката. Повече информация как такъв непрекъснат контрол работи на практика можете да прочетете в обяснение от където идва оценката.

И накрая, си струва да гледате не само минималния стандарт, а целта зад него: могат ли всички, дори при по-малко идеални условия на светлина или на по-стар екран, действително да различат текста и бутоните. Често поставяни спорни случаи, като дали логото или декоративното изображение също трябва да отговаря на изискванията за контраст, са разработени на страницата с отговори на по-често задавани въпроси.

Искате ли да знаете дали контрастът и другите повтарящи се узкости действително се появяват във вашата среда? Безплатното бързо сканиране дава първо указание за това, а база от знания с теми подредени по ситуация показва как този въпрос е свързан с останалите задължения около European Accessibility Act.

Тази статия е обща информация и не представлява правна консултация.