Действие
Один акцентный цвет показывает главное действие и ссылки.
Сначала роль, потом оттенок
Цвет полезен, когда помогает читать, действовать или понимать состояние. Если каждый блок получает новый яркий цвет без причины, страница теряет иерархию.
Читаемость
Текст и фон образуют проверяемую контрастную пару.
Состояние
Ошибка, успех и предупреждение получают цвет плюс текст или значок.
Минимум WCAG: обычный текст - 4.5:1, крупный текст - 3:1. Цвет не должен быть единственным носителем информации.
WCAG требует контраст не ниже 4.5:1 для обычного текста и 3:1 для крупного.1 Если цвет сообщает состояние, нужен дополнительный видимый сигнал.2
Красиво не значит читаемо
Светлый серый может выглядеть деликатно, но исчезать для части пользователей.
Вариант А: слабый контраст
Практический курс
9 900 ₽ 2.54:1
ЗаписатьсяСбой: цена и текст кнопки слишком близки к фону по яркости.
Вариант Б: роли читаются
Практический курс
9 900 ₽ 8.36:1
ЗаписатьсяСистема: нейтральный текст читаем, акцент остается у действия.
Найдите понятную ошибку
Какой вариант остается понятным человеку, который не различает красный цвет?
Мини-лаборатория
Проверяйте два условия: сообщение видно и его смысл не зависит только от оттенка.
Назовите точную правку
В лендинге четыре ярких цвета одновременно обозначают кнопки, карточки и украшения. Главного действия не видно.
Текущая палитра
Основная кнопкафиолетовый
Вторая кнопкаоранжевый
Карточкибирюзовый
Декорголубой
Какая команда лучше?
Дайте задачу агенту
Просите назвать роль каждой краски и измерить пары, а не просто «улучшить палитру».
Проведи аудит только по цвету и контрасту.
1. Выпиши все используемые цвета и назначенную им роль: текст, фон, главное действие, вторичное действие, состояние, декор.
2. Найди цвета без функции и случаи, где несколько акцентов спорят за внимание.
3. Измерь контраст основного текста, подписей и кнопок с их фоном.
4. Проверь, не передается ли ошибка, успех или выбранное состояние только цветом.
5. Предложи компактную палитру и исправь только цвет. Не меняй текст, размеры, отступы и расположение блоков.
6. Критерии: обычный текст не ниже 4.5:1, крупный не ниже 3:1, у состояний есть текст или значок.Урок освоен, если вы можете
Ваш преподаватель - агент
Попросите агента составить таблицу «цвет - роль - контраст - решение». Не принимайте новую палитру, пока у каждого оттенка нет понятной работы.