appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/ruКак проверить контраст текста выбранного цвета перед использованием в интерфейсеLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0

Узнайте, как проверить коэффициент контраста WCAG и настроить цвета в HSL, чтобы интерфейс всегда был доступным и читаемым.

ДизайнarticleAppStoryoПочему контраст важен

Около 300 миллионов человек в мире имеют то или иное нарушение цветового зрения. Проектирование с хорошим контрастом — это не только эстетика: во многих регионах это юридическое требование. Эталонный стандарт — WCAG 2.1, определяющий два основных уровня:

Уровень AA: соотношение контраста 4,5:1 для обычного текста и 3:1 для крупного текста (18px или 14px жирный).

Уровень AAA: 7:1 для обычного текста.

Распространённые ошибки

Чаще всего встречаются: светло-серый на белом фоне (может составлять всего 1,5:1), цветные кнопки с белым текстом, которые выглядят читаемо, но не проходят AA, и цвета, которые работают в светлом режиме, но не проходят в тёмном.

Практический рабочий процесс

Снимите цвет фона. Откройте Color Picker Camera: HEX RGB, наведите камеру на поверхность и нажмите, чтобы мгновенно получить значение HEX. Приложение также отображает HSL.

Снимите цвет текста таким же образом.

Проверьте пару в инструменте проверки контраста — например, WebAIM Contrast Checker, панель специальных возможностей в DevTools или плагин Contrast в Figma.

Настройте яркость в HSL, пока соотношение не пройдёт. Сохраните H и S, уменьшите L, чтобы затемнить цвет без изменения его визуальной идентичности.

Почему HSL идеален для настройки контраста

RGB и HEX не дают интуитивного управления яркостью. HSL разделяет оттенок, насыщенность и яркость. Color Picker Camera: HEX RGB отображает HEX, RGB, HSL и CMYK одновременно — без ручного преобразования.

Реальный пример

Кнопка в среднем синем (#4A90E2) с белым текстом имеет контраст около 3,1:1 — не проходит AA. Переход на тёмно-синий (#1A3A6B) поднимает соотношение до 9,4:1, превышая даже AAA.

Примечание о WCAG 3.0 и APCA

Следующее поколение руководящих принципов вводит APCA — более нюансированную модель перцептивного контраста. WCAG 2.1 AA остаётся действующим стандартом, но тестирование по APCA стоит рассмотреть для долгосрочных проектов.

Скачайте Color Picker Camera: HEX RGB бесплатно для iOS или Android — без рекламы, без слежки и полностью офлайн.