Проверка контрастности цветов
Два цвета — и сразу видно, проходит пара по AA, по AAA или не проходит вовсе.
- Бесплатно
- Без регистрации
- Работает в вашем браузере — ничего не отправляется
14.49 : 1
Что означают 4.5:1 и 3:1
Стандарт WCAG задаёт минимальное соотношение яркостей между текстом и фоном. Для обычного текста на уровне AA это 4.5:1, для крупного и жирного — 3:1, а уровень AAA поднимает планку до 7:1 и 4.5:1 соответственно. Те же 3:1 действуют для границ полей формы и иконок, которые несут смысл.
Считается не «яркость» из пипетки, а относительная светлота по формуле стандарта. Из-за этого два цвета, которые на глаз кажутся одинаково светлыми, дают разный результат: жёлтый светлее, чем выглядит, а насыщенный синий темнее. Именно поэтому светлый текст на жёлтой кнопке проваливается почти всегда.
Читать дальше
Формула не видит того, что видит человек. Она не учитывает ни тонкость шрифта, ни размер в реальном макете, ни фон под полупрозрачным слоем, ни поведение экрана на солнце. Пара, прошедшая с запасом в две сотых, будет читаться плохо, если набрана тонким начертанием мелким кеглем.
Поэтому вывод инструмента — входное условие, а не гарантия читабельности. Проверка обязательна там, где мы отвечаем за доступность: государственные сайты, образование, медицина, любой проект с требованием соответствовать WCAG. Дальше макет всё равно смотрит человек.
Частые вопросы
Какой уровень выбрать — AA или AAA?
AA — рабочий минимум для коммерческого сайта. AAA берут там, где аудитория заведомо шире: государственные услуги, медицина, образование, сервисы для пожилых людей.
Что считается крупным текстом?
Примерно от 18 пунктов обычного начертания или от 14 пунктов жирного. Для него порог ниже — 3:1 на уровне AA.
Нужно ли проверять серый текст подсказок и плейсхолдеры?
Да. Это самое частое нарушение в макетах: светло-серый текст на белом выглядит аккуратно и не проходит даже AA.
Пара прошла проверку, но читать тяжело. Это ошибка инструмента?
Нет, это предел метода. WCAG считает соотношение яркостей и не знает ничего о толщине шрифта, кегле и освещении. Формула — необходимое условие, а не достаточное.
Ещё инструменты
Инструмент показал проблему, а чинить некому?
Мы делаем сайты, магазины и поддержку — от адреса домена до почты, которая не попадает в спам.
Нажимая кнопку, вы соглашаетесь с политикой конфиденциальности
Харьков · Киев
