Нетекстов контраст

Какво изисква критерият

Правилото за контраст в 1.4.3 се отнася само за текст; 1.4.11 разширява по-слаба версия (3:1 вместо 4,5:1) към две допълнителни категории. Първо, визуалните индикатори на UI компонентите — това, което показва дали даден елемент е бутон, къде се намирав пръстенът на фокуса, къде е границата на полето за въвеждане — трябва да достигат 3:1 спрямо съседната повърхност. Второ, частите на значимите графики, които потребителят трябва да разпознае — стълбове в диаграми, икони, указващи състояние, индикаторни точки — трябва да достигат 3:1.

Как да бъде изпълнен

• Дайте на всяко поле за въвеждане видима рамка с минимум 3:1 спрямо фона на страницата.
• Стилизирайте индикаторите за фокус (контур :focus-visible) с минимум 3:1 спрямо компонента и спрямо страницата.
• При бутони тип „призрак” / с контур самата рамка трябва да постига 3:1 спрямо фона на страницата.
• При превключватели пистата и плъзгачът в положения „включено/изключено” трябва да имат контраст 3:1 там, където се срещат.
• При икони, носещи смисъл (информация „i”, предупредителен триъгълник, отметка), линиите на иконата трябва да достигат 3:1 спрямо фона им.
• При серии в диаграми цветовете, използвани за разграничаване на стълбове / линии, трябва да са на 3:1 разстояние помежду им или да бъдат допълнени с шарка/текстура.

Чести грешки

• Полета за въвеждане без видима рамка или с рамка #e5e5e5 върху #fff при съотношение 1,3:1 — невидима за потребители с намалено зрение.
• Контурът за фокус по подразбиране на браузъра е заместен от outline: none без алтернатива.
• Бутони тип „призрак” с бял текст върху прозрачен фон и 1px сива рамка — бутонът е практически невидим.
• Превключватели с едва забележим плъзгач върху почти съответстваща писта в положение „изключено”.
• Икони за статус в ъгъла на карта (зелена отметка, червен „x”), при които цветът едва контрастира фона на картата.
• Кръгова диаграма с цветове на секторите при съотношение 2:1 помежду им — зрящите потребители виждат границите с мъка; потребителите с намалено зрение виждат едно петно.

Защо е важно

1.4.11 беше добавен в WCAG 2.1 и редовно изненадва екипите — повечето проверки за контраст обхващат само текст. Рамките на полетата за въвеждане, пръстените за фокус и бутоните тип „призрак” са типичните модели на несъответствие. Инструменти като axe и Stark вече проверяват нетекстовия контраст, но дизайнерите все още го пропускат по време на проектирането, защото преобладаващата нагласа е „контраст = контраст на текста”. Отстраняването на проблема обикновено означава удебеляване на рамките и потъмняване на сивите тонове в дизайн системата.