Цветови контраст за достъпност: съотношения по WCAG, проверка и поправки

Светлосив текст върху бял фон изглежда изчистено в дизайнерския файл. На телефон на ярко слънце или за човек с намалено зрение той се чете трудно. Освен това е най-честото нарушение на достъпността изобщо: WebAIM Million 2026 (отваря се в нов раздел) открива текст с нисък контраст на 83,9% от началните страници на първия милион сайтове, средно по 34 отделни случая на страница.

Добрата новина е, че контрастът може да се измери, праговете са ясни, а поправките в повечето случаи са евтини. Това ръководство ви дава числата, безплатните инструменти и начин да поправите цветовете на марката си, без да започвате отначало.

Какво е контрастно съотношение на цветовете?

Контрастното съотношение е число, което сравнява относителната яркост, или луминанс, на два цвята, обикновено на текста и фона му. WCAG го изчислява с фиксирана формула, а резултатът е от 1:1 (никаква разлика, бяло върху бяло) до 21:1 (черно върху бяло). Колкото по-голямо е числото, толкова по-лесно се различават двата цвята.

Формулата е (L1 + 0,05) / (L2 + 0,05), където L1 е относителната яркост на по-светлия цвят, а L2 – на по-тъмния. Никога няма да се наложи да я изчислявате на ръка, но един детайл е важен: брои се само яркостта, а не цветовият тон. Затова червен текст върху зелен фон може да изглежда наситен и пак да получи лоша оценка.

Другият детайл, който хората пропускат, е закръгляването. Обяснителният документ на W3C за критерий 1.4.3 (отваря се в нов раздел) посочва, че изчислените стойности „не бива да се закръглят (например 4,499:1 не би достигнало прага от 4,5:1)“. Така сивото #767676 върху бяло (4,54:1) отговаря на изискването, а #777777 върху бяло (4,48:1) не, макар никой да не може да ги различи с просто око.

Какво контрастно съотношение изисква WCAG?

За ниво AA, към което препращат повечето закони и договори, нормалният текст се нуждае от поне 4,5:1 спрямо фона си, а едрият текст от 3:1 (критерий за успех 1.4.3). Компонентите на интерфейса и графиките, които носят смисъл, се нуждаят от 3:1 спрямо съседните цветове (1.4.11). По-строгото ниво AAA изисква 7:1 за нормален текст и 4,5:1 за едър текст (1.4.6).

Защо 4,5:1? W3C обяснява, че това съотношение „компенсира загубата на контрастна чувствителност, която обикновено изпитват потребители със зрителна загуба, равностойна на зрение около 20/40“ (зрителна острота около 0,5). С други думи, то е определено за хора с умерено намалено зрение, сред които са много по-възрастни клиенти, които никога не биха се нарекли хора с увреждания.

Някои текстове са изключени: логата и имената на марки, чисто декоративният текст, текстът, който не е видим за никого, текстът в снимка със значително друго визуално съдържание и текстът в неактивни (деактивирани) контроли. Логото ви може да остане както е. Абзац в бледия цвят на логото ви – не може.

Какво се смята за едър текст?

Едър текст в WCAG означава поне 18 пункта или поне 14 пункта, ако е удебелен. W3C ги превръща в приблизително 24 CSS пиксела, а за удебелен текст – 18,5 пиксела. Всичко по-малко се нуждае от пълните 4,5:1. Основният текст, надписите под снимки, етикетите на формулярите, цените и връзките във футъра почти никога не са едър текст, затова се нуждаят от по-високото съотношение.

Ето как изглежда това на практика. Сивото #949494 върху бяло дава 3,03:1. Това е достатъчно за заглавие от 28 пиксела и е нарушение за абзац от 16 пиксела в същия цвят. Много сайтове минават проверката със заглавията си и се провалят на всичко под тях.

Тънките и декоративните шрифтове изискват повече внимание. W3C отбелязва, че заради изглаждането на ръбовете (anti-aliasing) „особено тънки или необичайни шрифтове може да бъдат изобразени от потребителските агенти в много по-блед цвят“ от избрания от вас. Ако шрифтът на марката ви е в тънко начертание (light), оставете си резерв над 4,5:1, вместо да се целите в 4,51.

Отнася ли се контрастът за бутоните, иконите, индикаторите на фокуса и диаграмите?

Да. Съгласно критерий за успех 1.4.11 (ниво AA) всичко, което хората трябва да видят, за да разпознаят контрола, нейното състояние или графика, се нуждае от 3:1 спрямо съседните цветове. Това включва рамките на полетата във формулярите, иконите без текстов етикет, очертанията на фокуса, състоянията на отметките и превключвателите, както и линиите и сегментите на диаграмите. Текстът в бутона пак се нуждае от 4,5:1.

• Полета във формулярите: светлосива рамка #CCCCCC върху бяло дава 1,61:1. Ако тази бледа линия е единственото, което показва къде да се пише, тя не отговаря на изискването.
• Бутони: WCAG не изисква видима рамка около всеки бутон. Обяснителният документ на W3C за критерий 1.4.11 (отваря се в нов раздел) посочва, че граница е нужна само когато няма друг визуален начин контролата да бъде разпозната. Ако бутонът се разпознава само по цветната си форма, тази форма се нуждае от 3:1 спрямо страницата.
• Икони: лупа за търсене, сърце за списъка с желани продукти или икона на количката без текст до тях се нуждаят от 3:1.
• Индикатори на фокуса: очертанието, което показва фокуса от клавиатурата, трябва да контрастира с фона около него. Нашето ръководство за WCAG 2.2 разглежда по-новите критерии за фокуса.
• Диаграми: линиите в линейна диаграма и сегментите в кръгова диаграма се нуждаят от 3:1, освен ако същите стойности не са показани и като текст.
• Деактивираните контроли са изключени, макар че хората пак трябва да могат да разберат дали даден бутон може да бъде натиснат.

Връзките в основния текст са специален случай. Ако се отличават само по цвят, без подчертаване, техниката на W3C G183 (отваря се в нов раздел) изисква 3:1 между цвета на връзката и заобикалящия текст, като и двата пак се нуждаят от 4,5:1 спрямо фона. Да намерите три цвята, които изпълняват всичко това, е трудно. Подчертаването е много по-лесно.

Как да проверя цветовия контраст?

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

• WebAIM Contrast Checker (отваря се в нов раздел): въвеждате два шестнадесетични кода и получавате съотношението с оценка „минава/не минава“ за нормален текст, едър текст и графични обекти. Плъзгачът за светлота е удобен, за да намерите най-близкия нюанс, който минава.
• Colour Contrast Analyser (отваря се в нов раздел): безплатно настолно приложение на Vispero за Windows и macOS. Пипетата му взема проба от всеки пиксел на екрана, което е полезно за текст върху изображения, PDF файлове и приложения, а освен това включва симулатор на цветна слепота.
• Chrome DevTools: инспектирайте част от текста и отворете инструмента за избор на цвят. Разделът за контрастното съотношение (отваря се в нов раздел) показва линии за AA и AAA и може да предложи цвят, който минава. Панелът CSS Overview изброява всички проблеми с контраста на страницата.
• Автоматизирани инструменти: разширенията за браузъра и Lighthouse отбелязват текста с нисък контраст на цялата страница, но често маркират текста върху изображения или преливки като изискващ ръчна проверка, вместо да му дадат оценка.

Където инструментите не стигат, вземайте проби на ръка. За текст върху основната снимка проверете най-светлата част на изображението зад най-светлите букви; W3C посочва фоновите изображения без достатъчен контраст като известно нарушение (F83). Посочете бутоните с мишката, стигнете до тях с Tab, предизвикайте грешка във формуляр, превключете на тъмен режим, ако предлагате такъв. Тъмната тема също може да не отговаря на изискванията: сиво #757575 върху фон #121212 дава 4,07:1. Нашето ръководство как да тествате достъпността на уебсайта си поставя контраста редом с другите бързи ръчни проверки.

Как да поправя ниския контраст, без да променям марката си?

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

1. Създайте версия на всеки цвят на марката, безопасна за текст, с поне 4,5:1 спрямо основните ви фонове, и я използвайте за основния текст, връзките и малките икони.
2. Използвайте оригиналния ярък цвят за едри заглавия (там 3:1 е достатъчно), фонове, илюстрации и украса.
3. При светли цветове на марката сменете текста на бутоните от бял на тъмен.
4. Поставете плътен или полупрозрачен панел зад текста, който стои върху снимки.
5. Проверете всяко състояние: посочване, фокус, посетена връзка, избран елемент, грешка и текст в полето.
6. Запазете двойките, които минават, като дизайн токени или настройки на темата, за да ги наследяват новите страници, вместо да ги измислят наново.

Дизайн при цветна слепота: защо цветът сам по себе си не е достатъчен

Контрастът и цветът са отделни проблеми. Около 1 на 12 мъже и 1 на 200 жени имат нарушено цветно зрение, най-често за червено и зелено, според Colour Blind Awareness (отваря се в нов раздел). WCAG 1.4.1 (отваря се в нов раздел) (ниво A) казва, че цветът не бива да е единственият визуален начин за предаване на информация, затова го съчетавайте с текст, икони, шарки или подчертаване.

• Грешки във формуляри: само червената рамка не е достатъчна. Добавете до полето съобщение, например „Въведете пощенски код“, в идеалния случай с икона.
• Наличност и статус: зелена или червена точка до продукт не казва нищо на много купувачи. Напишете „В наличност“ или „Изчерпано“.
• Диаграми: легенда, която разчита на съпоставяне на цветове, се чете трудно. Надписвайте линиите директно или използвайте шарки и различни стилове на линиите.
• Връзки: в основния текст ги подчертавайте, по причините, описани по-горе.

За да видите проблема сами, Chrome DevTools може да емулира нарушения на зрението, а Colour Contrast Analyser също има симулатор. Контрастът помага и тук: съотношението измерва светлотата, а не тона, така че два цвята с високо съотношение остават различими дори когато тоновете им изглеждат сходни. Повече за това как слабовиждащите и хората с други нарушения настройват устройствата си ще намерите в статията как хората с увреждания ползват интернет.

Достатъчни ли са режимите с висок контраст и бутоните за контраст?

Не. Контрастните теми на операционната система и бутоните за контраст в страницата помагат на хората, които знаят, че имат нужда от повече контраст, и го включват. WCAG обаче оценява страницата ви в състоянието ѝ по подразбиране, така че цветовете, които всеки посетител вижда първо, все пак трябва да отговарят на изискванията. Бутонът е допълнителна възможност за хората, които искат повече, а не поправка за цветове, които не отговарят.

Някои хора с увреждания ползват контрастните теми на Windows, които заменят вашите цветове със свои. Струва си да тествате сайта си с включена такава тема: иконите, изградени от фонови изображения, може да изчезнат, както и стиловете на фокуса, нарисувани само със сянка (box-shadow). CSS медийната заявка prefers-contrast ви позволява да предложите и версия с по-висок контраст на хората, които са я поискали в системните си настройки.

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