5 мин чтения
2026-01-27
Не только обычное состояние, но и hover, focus, disabled. Кнопка с хорошим контрастом может терять его при наведении.
Используйте иконки, подчёркивания и паттерны в дополнение к цвету. Ссылки должны отличаться не только цветом.
Заголовки, основной текст, подписи к изображениям — у каждого элемента свои требования к контрасту.
В тёмной теме избегайте чисто белого текста (#fff) на чёрном (#000) — это утомляет глаза. Используйте светло-серый (#e0e0e0) на тёмно-сером (#1a1a1a).
Интегрируйте проверку контраста в процесс дизайна. Проверяйте каждый новый цвет в Проверке контраста.
| Текст | Фон | Коэффициент |
|---|---|---|
| #000000 | #ffffff | 21:1 |
| #333333 | #ffffff | 12.63:1 |
| #ffffff | #0066cc | 5.26:1 |
| #000000 | #ffcc00 | 13.07:1 |
Смотрите также: Цветовое колесо, Material Design цвета