Почему контраст важен
Около 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 — без рекламы, без слежки и полностью офлайн.