Контраст текста 4,5:1: как проверить и исправить

Контраст – отношение яркости текста к яркости фона, от 1:1 (невидимо) до 21:1 (чёрный на белом). Критерий 1.4.3 требует не менее 4,5:1 для обычного текста и 3:1 для крупного: от 24 px обычного начертания или от 19 px жирного. Критерий 1.4.11 распространяет порог 3:1 на рамки полей, значки и элементы управления.

Частые ошибки

• Серый вторичный текст на белом: #999 даёт 2,8:1, нужен хотя бы #767676.
• Белый текст на светлом акценте: белый на #3366FF – 4,7:1, на более светлых синих уже не проходит.
• Подсказки в полях и неактивные кнопки: подсказка-заполнитель тоже текст, её читают.
• Текст поверх фотографий без затемнения.
• Цветной текст статусов: зелёный «успех» на белом часто ниже 3:1.

Как измерить

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

Как исправить без перекраски сайта

• Затемнить вторичный текст на одну-две ступени, сохранив оттенок.
• Для текста на акцентных кнопках выбрать более тёмный акцент или тёмный текст на светлой кнопке.
• Для надписей поверх изображений добавить полупрозрачную подложку.
• Проверить тёмную тему отдельно: пороги те же, а ошибки другие.