Проверка контрастности цветов
Предпросмотр цветов и проверка контрастности по WCAG 2.2
—
Крупный текст — от 24 px обычный или примерно от 18,7 px жирный. Оценка интерфейса ориентировочная: границы компонентов и соседние цвета нужно проверять отдельно. Одного достаточного контраста недостаточно для доступности.
Предпросмотр
Крупный заголовок: важное сообщение
Обычный текст: пример читаемого предложения на странице.
Мелкий текст: подписям и пояснениям тоже нужен контраст.
Доступные альтернативы цвета текста
Фон остаётся прежним; текст приближается к чёрному или белому до уровня AA для обычного текста (4,5:1). Ближайший вариант показан первым.
О контрастности цветов
Контрастность — разница воспринимаемой яркости двух цветов. Она влияет на удобство чтения, особенно на маленьких экранах, при ярком свете и для людей со слабым зрением. Приятная палитра не всегда хорошо читается.
Рекомендации по доступности веб-контента устанавливают минимальную контрастность для обычного и крупного текста, а также значимых элементов интерфейса. Высокий контраст облегчает чтение, но размер, насыщенность шрифта, интервалы и соседние цвета тоже важны. Цвета нужно оценивать в реальном контексте.
Дизайнеры сравнивают цвета текста и фона при создании кнопок, подписей и страниц. Подбор более светлых и тёмных вариантов помогает сохранить характер палитры и улучшить различимость текста. Такая проверка пригодится и при оформлении презентаций и документов.
Генератор цветовых палитр · Векторный Paint · Требования WCAG 2.2 к контрастности