Белый текст на зелёной кнопке: сначала измерьте контраст
Зелёная кнопка привлекает внимание, но белая надпись не обязательно удобна для чтения. Сравните тёмную надпись в Utilgo, прежде чем менять фирменный цвет.
Обновлено:
Введите реальные цвета
Начните с #22c55e для кнопки и #ffffff для текста. Это примеры: в своём проекте возьмите вычисленные стили браузера. Передний план — надпись, фон — сама кнопка, а не страница. Сначала проверьте два непрозрачных цвета.
Сравните тёмную надпись
Сохраните фон и задайте тексту #111827. W3C AA предусматривает 4,5:1 для обычного текста и 3:1 для крупного. Читайте также результат проверки, не полагаясь на округлённое число. Выбор крупного текста не делает маленькую надпись крупной.
Проверьте другие состояния
Если при наведении фон меняется, измерьте эту пару отдельно. Перейдите к кнопке клавиатурой и проверьте надпись. Повторите в тёмной теме, если цвета отличаются. Значения в макете могут не совпадать с реальным CSS.
Завершите на настоящей странице
Инструмент сравнивает два непрозрачных HEX-цвета, а не проверяет всю страницу. Фото, градиент и прозрачный слой требуют дополнительного анализа. Проверьте кнопку на мобильном экране и клавиатурой. Запишите цвета и состояния для повторной проверки после изменения темы.
Связанные инструменты
Практические статьи по теме
Реализация Dark Mode: CSS, JavaScript и системные предпочтения
Dark mode снижает нагрузку на глаза и продлевает время работы батареи.
Доступность веб-сайтов: WCAG, ARIA и инклюзивный дизайн
Доступность веб-сайтов гарантирует, что люди с инвалидностью могут использовать сайты.
Аудит доступности веб-сайтов: соответствие WCAG и процесс аудита
Аудит доступности веб-сайтов — это систематический процесс, оценивающий соответствие вашего сайта стандартам WCAG.