Как собрать доступную палитру

Доступность — свойство не палитры, а каждой пары, которую вы реально выводите на экран. Палитра сама по себе не проходит и не проваливает проверку, поэтому работа состоит в том, чтобы определить используемые сочетания и проверить именно их.

Открыть проверку контрастности

Пороги, точно

WCAG 2.1 уровня AA требует 4,5:1 для основного текста, 3:1 для крупного (примерно 24px или 19px жирным) и 3:1 для элементов интерфейса и их границ. AAA поднимает основной текст до 7:1. Обычно целятся в AA, а AAA держат целью для длинных текстов.

Проверяйте пары, а не образцы

Выпишите сочетания, которые интерфейс действительно использует: текст на фоне, текст на поверхности, приглушённый текст на поверхности, белый на основном, основной на фоне для ссылок — и проверьте каждое. Список обычно короче, чем кажется, и он и есть вся работа.

Как починить цвет, не отказавшись от него

Если фирменный цвет проваливается как текст, не отказывайтесь от него. Оставьте его для крупных заголовков, кнопок и акцентов, где порог 3:1, а для основного текста выведите более тёмный вариант. Правка светлоты в OKLCH даст это, не уводя оттенок от бренда.

По шагам

Выпишите каждую пару «текст на фоне», которую реально рисует ваш интерфейс.
Проверьте каждую и запишите коэффициент, а не только «прошло/не прошло» — он показывает запас.
Для провалов сначала правьте светлоту; оттенок меняйте в последнюю очередь.
Перепроверьте в тёмной теме — там те же пары ведут себя иначе.
Сохраните прошедшие значения как именованные токены, чтобы решения достались следующему.

Частые вопросы

Гарантирует ли 4,5:1 читаемость?

Нет, это нижняя граница, а не гарантия. Тонкие начертания, мелкий кегль, плохие экраны и яркое окружение снижают реальную читаемость. Порог необходим, но недостаточен — смотрите на результат.

Нужен ли контраст неактивным кнопкам?

WCAG выводит неактивные элементы из-под требования. Но состояние, которое никто не может прочитать, всё равно проблема удобства: пусть будет приглушённым, но различимым.

Достаточно ли проверить цвет только на чёрном и белом?

Как первый фильтр — да, это показывает, годится ли цвет фоном под текст. Но реальные пары, включая приглушённый текст и сочетания цвета с цветом, всё равно надо проверить.