WCAG 1.4.3 Контраст (минимальный)

Критерий успеха 1.4.3 нужен для того, чтобы текст могли прочитать люди, которые хуже различают контраст: пожилые посетители, люди со слабым зрением или нарушением цветовосприятия, а также любой, кто смотрит в телефон на солнце. Это уровень AA, то есть он входит в то, на что опираются EN 301 549 и Европейский акт о доступности (пункт 9.1.4.3). Тот же стандарт принят в Украине как ДСТУ EN 301 549:2022.

Что требует критерий

Коэффициент контраста между текстом и фоном должен быть не ниже:

• 4,5:1 для обычного текста;
• 3:1 для крупного текста — не менее 18 pt (24 CSS px) обычного начертания или 14 pt (около 18,66 CSS px) жирного.

Коэффициент вычисляется по относительной яркости двух цветов и принимает значения от 1:1 (одинаковый цвет) до 21:1 (чёрный на белом). Правило распространяется и на изображения текста, например на баннер со слоганом, «впечатанным» в картинку.

Исключения:

• текст в логотипе или названии бренда;
• текст неактивных элементов управления, например отключённой кнопки;
• декоративный текст, который никому не нужно читать, и текст, который является частью фотографии с другим значимым содержимым.

Типичные ошибки в интернет-магазине

• светло-серый текст-подсказка (placeholder) или пояснения в формах (например, #aaa на белом — около 2,3:1);
• старая цена, метки «нет в наличии» и мелкий текст под кнопкой «В корзину»;
• белый текст на фотобаннере, где часть фото светлая;
• фирменный цвет ссылок или кнопок, который хорошо смотрится на большом экране, но не дотягивает до 4,5:1;
• текст, у которого контраст становится низким только при наведении или в фокусе.

Как проверить

Автоматически: наша проверка измеряет контраст каждого видимого текстового элемента (правило контраст цветов) и показывает найденные цвета и коэффициент. Текст поверх изображений или градиентов она не всегда может оценить — такие результаты помечаются для ручной проверки.

Вручную: для текста поверх фото проверьте самую светлую часть изображения за текстом. Проверьте также состояния наведения, фокуса и ошибки, а не только обычное состояние. Проверка контраста даст точный коэффициент для двух цветов.

Как исправить

• Затемните текст или осветлите фон, пока коэффициент не станет не ниже 4,5:1; обычно достаточно небольшого изменения светлоты.
• Размещайте текст на изображениях на сплошной или полупрозрачной подложке.
• Не используйте текст-подсказку как единственную подпись поля; если оставляете её, сделайте её тоже читаемой.
• Исправьте цвет один раз в настройках темы или CSS-переменных, а не на каждой странице отдельно.

Связанные критерии

• 1.4.11 Контраст нетекстового контента — иконки, рамки полей и индикаторы фокуса (3:1).
• 1.4.1 Использование цвета — цвет не должен быть единственным способом передать информацию.
• 1.4.4 Изменение размера текста — текст должен оставаться удобным при увеличении до 200 %.

Частые вопросы

Какой коэффициент контраста требует WCAG AA?

Не менее 4,5:1 между текстом и фоном и не менее 3:1 для крупного текста. Уровень AAA (1.4.6) требует 7:1 и 4,5:1.

Что считается крупным текстом в WCAG?

Текст размером не менее 18 пунктов (24 CSS-пикселя) обычного начертания или не менее 14 пунктов (около 18,66 CSS-пикселя) жирного.

Распространяется ли 1.4.3 на логотипы и неактивные кнопки?

Нет. Текст, который является частью логотипа или названия бренда, текст неактивных (отключённых) элементов управления и чисто декоративный текст освобождены от требования.

Касается ли 1.4.3 иконок и рамок полей ввода?

Нет, 1.4.3 касается только текста и изображений текста. Иконки, рамки фокуса и границы полей формы подпадают под 1.4.11 «Контраст нетекстового контента», где требуется 3:1.