Нажмите Ctrl+D, чтобы добавить страницу в закладки
Проверьте контраст текста и фона по стандарту WCAG: коэффициент и оценки AA/AAA для обычного и крупного текста. Бесплатно, в браузере.
Как использовать Проверка контрастности цветов?
Введите цвета переднего плана (текста) и фона.
Проверьте коэффициент контрастности и уровень WCAG (AA/AAA).
При необходимости скорректируйте цвета для соответствия стандартам.
Часто задаваемые вопросы о Проверка контрастности цветов
В чём разница между WCAG AA и AAA?
AA требует 4.5:1 для обычного текста и 3:1 для крупного текста. AAA строже — 7:1 и 4.5:1 соответственно.
Что делать, если мой коэффициент контрастности не проходит?
Сделайте цвета светлее или темнее, чтобы повысить контрастность. Инструмент показывает результаты в реальном времени по мере настройки.
У крупного текста порог ниже — насколько крупным он должен быть?
WCAG считает текст крупным начиная с 18pt (около 24px) при обычном начертании и с 14pt (около 18,7px) при полужирном. При выполнении этого условия требование уровня AA снижается с 4,5:1 до 3:1. Но это нижняя граница, а не цель: основной текст должен читаться и на притушенном экране ноутбука, и на солнце, поэтому держаться ближе к 7:1 надёжнее.
Как проверить контраст текста поверх фото или полупрозрачной панели?
Расчёт контраста предполагает два плоских цвета, поэтому на фотографии нужно взять пипеткой самую светлую и самую тёмную точку под текстом и проверить дважды. Если хотя бы одна проверка не проходит, надпись где-то на снимке утонет. На практике сплошная плашка за текстом надёжнее полупрозрачной чёрной подложки или тени, поскольку те зависят от того, что лежит под ними.
Советы по эффективному использованию Проверка контрастности цветов
Основной текст требует 4,5:1, а шрифт от 18pt или полужирный 14pt проходит AA уже при 3:1.
ГОСТ Р 52872 по доступности сайтов опирается на те же пороги контраста, что и WCAG.
Нетекстовые элементы — иконки, рамки полей — тоже должны давать 3:1 к фону.