Это текст обычного размера: так выглядит выбранное соотношение контраста.
Коротко об инструменте
Вы задаёте фон и цвет текста, а страница считает коэффициент контрастности по формуле относительной яркости WCAG 2.1 и показывает, проходит ли пара AA или AAA. Рядом живое превью надписи, поэтому решение принимается и глазами. Расчёт идёт в браузере. Это нужно перед аудитом доступности и тогда, когда светло-серая подпись на белой карточке не читается на телефоне под солнцем. Смотрите также: добавить цвету прозрачность в формате RGBA, подобрать оттенок мышью и скопировать код, подкрутить светлоту через HSL.
Для обычного текста уровень AA требует минимум 4.5:1, а AAA — 7:1. Крупному тексту от 18pt или полужирному от 14pt хватает 3:1 для AA и 4.5:1 для AAA. Для границ полей ввода, иконок и других нетекстовых элементов интерфейса ориентир — 3:1. Значение показывается в блоке «ЦВЕТОВОЙ СИГНАЛ» сразу после смены любого из двух цветов.
Первая кнопка решает задачу читаемости: она подбирает цвет надписи, который гарантированно виден на выбранном фоне. Вторая решает задачу композиции: берёт противоположный оттенок по цветовому кругу, что даёт яркую пару для акцентов и баннеров. Комплементарный цвет красив, но не всегда проходит по контрасту — проверьте коэффициент после нажатия.
Напрямую никак: калькулятор работает с двумя сплошными цветами. Практический приём — взять самый светлый и самый тёмный участок подложки и проверить надпись против обоих. Если хотя бы один вариант проваливает AA, добавьте под текст полупрозрачную плашку или тень, иначе часть пользователей текст не прочитает.
Коэффициент считается только по яркости и не учитывает толщину шрифта, кегль, засечки и цветовые аберрации. Тонкий светлый шрифт на насыщенном синем формально проходит AA и при этом расплывается на глаз. Поэтому рядом с цифрой показано превью надписи — доверяйте ему не меньше, чем числу.
Расчёт контраста построен на относительной яркости, а она одинакова для всех типов цветовосприятия — это как раз и делает WCAG полезным при дейтеранопии и протанопии. Но одинаковый по яркости зелёный и красный останутся неразличимы по оттенку, поэтому не кодируйте смысл одним лишь цветом: добавляйте иконку или подпись.
Никуда. Оба HEX-значения живут в полях формы и в JavaScript-памяти вкладки, расчёт яркости выполняется на месте. Закрытие вкладки стирает результат, поэтому скопируйте нужные значения до ухода со страницы — истории подобранных пар инструмент не хранит.
Да, требования ГОСТ Р 52872 к доступности сайтов опираются на те же уровни WCAG, поэтому пары, проходящие AA, обычно закрывают и формальную проверку. Для отчёта зафиксируйте пару HEX и полученный коэффициент — этого достаточно как доказательства по каждому цветовому токену макета.
До: Фон #FFFFFF, текст #B0B0B0 — коэффициент 2.3:1, AA не пройден
После: Текст затемнён до #6B6B6B — коэффициент 5.1:1, AA пройден для основного текста
До: Фон #050505, акцент #FA551E — 6.1:1, AA есть, AAA нет
После: После «Оптимальный акцент» — светлый акцент с запасом выше 7:1
Оценка и фидбек помогают понять, что улучшать дальше.
