Проверка контраста цветов по WCAG

Одного числа мало: требование зависит от того, чем набран текст. Крупные буквы читаются при меньшем контрасте, поэтому WCAG разводит два порога.

«Крупный» здесь — не на глаз, а числом: от 24px обычным начертанием либо от 18.66px полужирным. Ровно на этой границе и спорят: заголовок в 20px обычным — это ещё обычный текст, и ему нужно 4.5:1, а не 3:1.

AA против AAA. AA — то, на что ориентируются почти все и что требуют регламенты. AAA берут там, где текст читают долго и подряд. Не пройти AAA — обычно не баг.

3:1 для элементов управления. К рамке поля, иконке и границе кнопки требование мягче, чем к тексту: важно заметить границу, а не прочитать буквы. Но ноль контраста у рамки — всё равно баг, и он встречается часто.

Контраст симметричен. Поменяйте текст и фон местами — число не изменится. Кнопка «Поменять местами» нужна не для этого, а чтобы быстро проверить обратную пару, если вы не уверены, что где.

Мерить надо на настоящем фоне элемента, а не на фоне страницы. Самая частая ошибка: взяли цвет текста из макета, цвет фона — из body, а между ними лежит карточка своего оттенка. Число получается верное, а к элементу отношения не имеет.

Прозрачность. Цвет с альфой сам по себе контраста не имеет — он зависит от того, что под ним. Инструмент смешивает его с указанным фоном честно; если прозрачным задан и сам фон, он считается поверх белого, и об этом сказано в вердикте.

Настоящие цвета элемента видны в DevTools → выбрать элемент → вкладка Styles: там видно и color, и background-color того элемента, который под курсором. Соседняя вкладка Computed показывает итоговое значение после всех правил — обычно нужна именно она.

Тёмная тема считается отдельно. Пара, прошедшая на светлой, на тёмной может не пройти: это другие цвета, а не те же самые наоборот.

Чего этот замер не покрывает. Текст поверх картинки или градиента — там контраст свой в каждой точке. Различимость для дальтоников — отдельная задача: два цвета могут иметь прекрасный контраст и при этом сливаться для человека, не различающего красный и зелёный.