Цветови контраст (коефициент)
Също: color contrast
Коефициентът на яркост между текста на преден план и фона му, по скала от 1:1 до 21:1. WCAG 2.x изисква 4.5:1 за обикновен текст и 3:1 за едър текст (≥18pt или 14pt удебелен) при ниво AA.
Цветовият контраст (коефициент) измерва перцептивната разлика в яркостта между два цвята — обикновено текст и неговия фон. Скалата се простира от 1:1 (нулев контраст — бяло върху бяло) до 21:1 (чисто черно върху чисто бяло). WCAG определя минимални коефициенти за четимост на текста.
Праговете на WCAG
Критериите за успех 1.4.3 на WCAG 2.x (Минимален контраст, ниво AA) и 1.4.6 (Подобрен контраст, ниво AAA) установяват следните минимуми:
| Вид текст | AA | AAA |
|---|---|---|
| Обикновен текст (< 18pt или < 14pt удебелен) | 4.5:1 | 7:1 |
| Едър текст (≥ 18pt или ≥ 14pt удебелен) | 3:1 | 4.5:1 |
| Графични обекти и UI компоненти (1.4.11) | 3:1 | — |
WCAG 2.x измерва контраста по формулата на WCAG (коефициент на яркост). WCAG 3 проучва перцептивно еднороден заместител (“APCA” — Accessible Perceptual Contrast Algorithm), който се държи по различен начин при много тъмни или много светли фонове; APCA все още не е нормативен.
Какво остава незабелязано
Цветовият контраст е едно от малкото правила на WCAG, което инструментите могат да открият с увереност, поради което автоматизираните скенери улавят повечето нарушения при чист текст върху фон. Въпреки това следните случаи се изплъзват:
- Текст-заместител в полета за въвеждане. Нерядко е с цвят #999 или
по-светъл върху бял фон — не отговаря на AA. Дизайнерите прибягват до
нискоконтрастни заместители, за да разграничат незапълненото поле от
запълненото, но реалната добра практика е да се използва отделен
<label>над полето и заместител с по-висок контраст (или без заместител изобщо). - Ховър и фокус състояния. Бутон с достатъчен контраст в стандартното си състояние може да не отговаря на изискванията при ховър (напр. светлосив цвят на ховъра върху бял фон). Следва да се одитират интерактивните елементи в всяко визуално състояние.
- Деактивирани контроли. Деактивираните контроли са формално освободени
от изискването за контраст при AA, но изобразяването им само чрез
нисък контраст не дава на потребители с нарушено цветово зрение
никакъв начин да разберат, че контролата е деактивирана. Цветът следва
да се съчетае с друг сигнал — икона, промяна на надписа или
aria-disabled, за да бъде обявено от екранния четец. - Текст върху изображения и градиенти. Наслагвания върху героично изображение, при които един и същ текст минава над светла и тъмна зона, нерядко не отговарят на изискванията в светлата зона.
- Икони като единствен етикет. Икона с размер 24 пиксела без текст се нуждае от коефициент 3:1 спрямо фона си (1.4.11), като „смислените пиксели” — контурните линии на иконата — са обектът на измерване.
Оперативно тестване
Три работни процеса намаляват грешките в контраста в ранен етап:
- Проверка по време на дизайна. Stark, Able и проверката за достъпност на Adobe XD оценяват контраста директно в инструмента за дизайн. Проблемите се коригират преди да бъде написан код.
- Токенизирани палитри. Всяка двойка текст/фон се дефинира като токен, чийто контраст се проверява веднъж. Произволни стойности на цветовете в компоненти, съдържащи текст, не се допускат.
- Автоматизирани проверки в CI. axe-core, Pa11y или Lighthouse блокират билдовете при нарушения на контраста. Лесно се добавят, скъпо е да се пропуснат.
Отвъд минимума
4.5:1 е минимум, а не естетическа цел. Потребители с лека дисхроматопсия, свързано с възрастта влошаване на зрението или дисплеи с ниско качество предпочитат 7:1 или по-висок коефициент за основния текст. Сайт, който „едва покрива” AA на всеки елемент, обикновено изглежда нискоконтрастен дори за потребители без формални зрителни нарушения.