Контраст текста и фона: проверка по WCAG
Подберите цвет текста и фона так, чтобы надпись читалась: коэффициент контрастности и вердикт по WCAG считаются сразу.
Похожие инструменты
Другие полезные инструменты из той же категории
Часто задаваемые вопросы
Обычному тексту нужен коэффициент не ниже 4.5:1, крупному — 3:1. Это уровень AA, к которому и стоит стремиться в обычном интерфейсе. Строгий уровень 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 для элементов интерфейса — границ полей ввода, иконок, индикаторов фокуса. Чисто декоративные элементы, не несущие смысла, под требование не подпадают.
Избегайте комбинаций красного/зелёного (дальтонизм), низкоконтрастных серых комбинаций и полагания только на цвет для передачи информации. Всегда предоставляйте дополнительные визуальные сигналы.