Контраст текста и фона: проверка по WCAG
Подберите цвет текста и фона так, чтобы надпись читалась: коэффициент контрастности и вердикт по WCAG считаются сразу.
Съешь ещё этих мягких французских булок, да выпей чаю.
Готовые пары — кликните, чтобы проверить
Что такое контраст текста и фона
Контраст — это отношение яркости двух цветов. Его считают по формуле (L1 + 0.05) / (L2 + 0.05), где L1 — яркость светлого цвета, L2 — тёмного. Шкала идёт от 1:1 (цвета совпадают, текст не виден) до 21:1 (чистый чёрный на чистом белом).
Главная ловушка в том, что контраст не равен «разнице цветов на глаз». Жёлтый кажется ярким и заметным, но белый текст на жёлтом фоне почти нечитаем, их яркости слишком близки. Поэтому цвета проверяют цифрой, а не ощущением.
Пороги WCAG: сколько нужно
| Уровень | Обычный текст | Крупный текст | Когда применять |
|---|---|---|---|
| AA (минимум) | 4.5:1 | 3:1 | Рабочая планка для обычного интерфейса |
| AAA (строгий) | 7:1 | 4.5:1 | Нужен там, где читаемость критична |
| Интерфейс | 3:1 | 3:1 | Границы полей, иконки, индикатор фокуса |
Крупным считается текст от 24px обычного начертания или от 18.66px жирного. Буквы толще, глазу проще, поэтому порог ниже.
Как это выглядит на практике
Чёрный на белом — 21:1
Максимум. Проходит всё, включая AAA
Тёмно-серый на белом — 7.5:1
Проходит AAA для обычного текста
Синий на белом — 5.2:1
Проходит AA, до AAA не дотягивает
Светло-серый на белом — 2.5:1
Не проходит даже AA, типичная ошибка в плейсхолдерах
Белый на жёлтом — 1.5:1
Не проходит. Жёлтый кажется ярким, но контраста с белым почти нет
Текст не проходит по контрасту: как чинить
Первый инстинкт, «сделать цвет ярче», обычно не помогает, насыщенность на контраст почти не влияет. Меняйте светлоту. Затемните текст или осветлите фон, сохранив тон, и фирменный цвет останется узнаваемым, а коэффициент вырастет. Удобнее всего крутить это в HSL, где светлота вынесена в отдельный канал: конвертер цветов переведёт HEX в HSL и обратно.
Если цвет менять нельзя вовсе, увеличьте кегль или сделайте начертание жирным: для крупного текста порог падает с 4.5:1 до 3:1. А для белого заголовка поверх фотографии добавьте тень или полупрозрачную подложку. Подобрать её можно в генераторе теней.
Где чаще всего проваливают контраст
- Плейсхолдеры в полях ввода. Светло-серый на белом даёт классические 2.5:1. Подсказка внутри поля обязана читаться так же, как обычный текст.
- Неактивные элементы. Задизейбленную кнопку часто делают почти невидимой. Формально к ней требований нет, но пользователь должен понимать, что она вообще существует.
- Текст поверх картинок и градиентов. Фон меняется от пикселя к пикселю, поэтому проверяйте по самому светлому участку под текстом.
- Индикатор фокуса. Ему нужны те же 3:1 с фоном, иначе навигация с клавиатуры превращается в угадайку.
Про то, что будет с этими порогами дальше, почему APCA не заменил WCAG 2.2 в WCAG 3 и как контраст влияет на балл Lighthouse, — в статье «Контраст текста и фона: пороги WCAG и что придёт им на смену».
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Обычному тексту нужен коэффициент не ниже 4.5:1, крупному — 3:1. Это уровень AA, к которому и стоит стремиться в обычном интерфейсе — именно этот порог проверяет аудит accessibility в Google Lighthouse. Строгий уровень AAA требует 7:1 для обычного текста и 4.5:1 для крупного. Введите свои цвета выше — коэффициент и вердикт посчитаются сразу.
Крупный — это от 24px обычного начертания или от 18.66px жирного (в пунктах: 18pt и 14pt). Такому тексту достаточно контраста 3:1: буквы толще, и глазу проще их различить. Всё, что мельче, обязано проходить порог 4.5:1.
По формуле (L1 + 0.05) / (L2 + 0.05), где L1 — относительная яркость светлого цвета, L2 — тёмного. Значения лежат в диапазоне от 1:1 (два одинаковых цвета) до 21:1 (чёрный на белом). Важно, что это не разница в яркости «на глаз»: жёлтый выглядит светлым, но с белым фоном даёт очень низкий контраст.
Меняйте светлоту, а не насыщенность: затемните текст или осветлите фон, оставив тон прежним — фирменный цвет при этом почти не пострадает. Если правки цвета невозможны, увеличьте кегль или сделайте начертание жирным: тогда порог падает с 4.5:1 до 3:1. Для белого текста поверх фотографии добавьте тень или полупрозрачную подложку.
Да. WCAG 2.1 требует 3:1 для элементов интерфейса — границ полей ввода, иконок, индикаторов фокуса. Чисто декоративные элементы, не несущие смысла, под требование не подпадают.
Избегайте комбинаций красного/зелёного (дальтонизм), низкоконтрастных серых комбинаций и полагания только на цвет для передачи информации. Всегда предоставляйте дополнительные визуальные сигналы.