Как собрать читаемую палитру с измеренным контрастом.
Назначайте цветам роли и проверяйте реальные пары переднего плана и фона. Красивый набор сам по себе не гарантирует читабельность и доступные интерактивные состояния.
Адаптируйте процесс под свою задачу.
Подберите цвета для конкретных ролей, дайте точные значения и проверьте пары текста и фона. Учтите интерактивные состояния и альтернативные поверхности. Отделяйте эстетический вкус от измеренного контраста и испытывайте реальные элементы.
- Что вы предоставляете
- Характер бренда и требования доступности.
- Что вы получите
- Варианты палитр с проверенным контрастом.
Посмотрите входные данные и результат.
Иллюстративные входные и выходные данные · учебный пример, а не реальный запуск WebAct
Полей ввода: Пример
Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.
Готовый пример
Background: #fff7ed Body text: #172554 — contrast on background ≈ 13.84:1 Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1 Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1 These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.
Добавьте эти данные в промпт и скопируйте его в WebAct, чтобы попробовать задачу. Ваш результат может отличаться от примера.
Решения и устранение проблем.
Гарантирует ли контрастная пара текста доступность всего интерфейса?
Нет. Другие состояния, элементы управления и сигналы помимо цвета тоже требуют проверки. Измерение пар — лишь часть оценки.
Почему акцент подходит для украшения, но не для мелкого текста?
Контраст с фоном может быть недостаточным. Смените роль цвета или сочетание.
Источник для этого сценария.
Попробуйте на собственном источнике.
Замените пример своим материалом в промпте. Сохраните нужные требования и скопируйте задачу в WebAct.
Настроить и скопировать задачу ↑