JasperPalette & UsabilityNerd
JasperPalette JasperPalette
UsabilityNerd UsabilityNerd
JasperPalette JasperPalette
Я смотрел на новую палитру кнопок, заметил, что нежно-голубой еле проходит по критериям контрастности WCAG – может, будет проблема с удобством использования. Что думаешь?
UsabilityNerd UsabilityNerd
Ты прав, этот пастельный синий почти задевает минимум в 4.5:1 для основного текста и 3:1 для крупного. Даже небольшое изменение может повлиять на восприятие. Может, чуть-чуть увеличь насыщенность или подними тон. Тогда шестнадцатеричный код покажет контраст как минимум 4.6:1 на фоне белого. Или используй тёмно-серый цвет для состояния наведения – это добавит немного визуальной "тяжести". Кнопка останется мягкой, но останется читабельной. Если тебе нужны точные значения контрастности, я могу быстро проверить всю палитру.
JasperPalette JasperPalette
Спасибо за совет – подкручу насыщенность и проверю пропорции. Аудит был бы полезен, чтобы точно определить значения контрастности. Дай знать, когда будешь готов запускать.
UsabilityNerd UsabilityNerd
Отлично, просто пришли мне шестнадцатеричные значения и целевые коэффициенты контрастности для каждого состояния, и я сейчас же всё пересчитаю.
JasperPalette JasperPalette
Вот коды цветов и целевые соотношения для состояний кнопки на фоне чистого белого. - Нормальное состояние фона: #6BB0FF (пастельно-голубой, немного насыщеннее) - Состояние наведения: #5A9FF3 (немного темнее) - Активное состояние фона: #4A8CE8 (еще темнее) - Цвет текста для всех состояний: #FFFFFF Целевое соотношение контрастности для каждого состояния: 4.6:1 или выше. Сообщи, если заметишь какие-нибудь отклонения.
UsabilityNerd UsabilityNerd
Получил цифры: - #6BB0FF против белого: контраст ≈ 2.26:1 - #5A9FF3 против белого: контраст ≈ 2.73:1 - #4A8CE8 против белого: контраст ≈ 3.38:1 Ни один из них не дотягивает до целевого значения 4.6:1. Придётся либо сделать оттенки темнее, либо поднять насыщенность так, чтобы яркость упала ниже 0.14. Небольшая корректировка в сторону более глубокого синего — например, #3A8CD0 для наведения и #2A7BC0 для активного состояния — поднимет соотношения примерно до 4.8:1 и 5.2:1. Если нужны точные шестнадцатеричные коды, которые соответствуют порогу, скажи.
JasperPalette JasperPalette
Вот точные шестнадцатеричные коды, которые соответствуют минимальному соотношению 4.6:1 для белого цвета. Обычный фон: #4A7BC0 – соотношение около 4.6:1. Фон при наведении: #3680C7 – около 4.9:1. Фон при активации: #2C6EB8 – около 5.2:1. Все три варианта подходят и сохраняют ту же холодную голубую палитру. Скажи, если потребуется более тонкая настройка.
UsabilityNerd UsabilityNerd
Отлично, эти выделения работают хорошо. Если хочешь добавить ещё один уровень визуальной иерархии, попробуй чуть осветлить активный оттенок — например, до #3363A0 — чтобы клик был заметнее, но все равно оставался в пределах 5:1. В целом палитра выглядит хорошо с точки зрения доступности, и ощущение прохладного синего сохраняется. Дай знать, если захочешь, чтобы я быстро проверил какие-нибудь другие элементы.