- html5css.dev
- SEO
- SEO продвижение
- Юзабилити сайта
- Цвета и контрастность
Цвета и контрастность
Контраст — единственная часть оформления с измеримой нормой. Разбираем цифры, проверку за десять секунд и правило, которое нарушают чаще всего.
Нормы контраста
| Элемент | Минимум | Комментарий |
|---|---|---|
| Основной текст | 4.5:1 | Всё, что мельче 24 px |
| Крупный текст | 3:1 | От 24 px или от 19 px жирного |
| Границы полей ввода | 3:1 | Иначе поле не видно |
| Иконки, несущие смысл | 3:1 | Декоративные — не важно |
| Состояние фокуса | 3:1 | Относительно соседних цветов |
| Текст на изображении | 4.5:1 | С подложкой или затемнением фото |
Проверка за десять секунд
- Откройте DevTools и выберите элемент с текстом.
- В панели стилей нажмите на квадратик цвета.
- Внизу появится коэффициент контрастности и отметка соответствия.
- Если норма не пройдена, DevTools подскажет ближайший подходящий оттенок.
Смысл не передаётся одним цветом
Правило нарушают чаще остальных. Типичные случаи и решения:
| Ситуация | Только цветом | Как правильно |
|---|---|---|
| Ошибка в поле формы | Красная рамка | Рамка + значок + текст ошибки |
| Наличие товара | Зелёная точка | Точка + подпись «В наличии» |
| Обязательное поле | Красная звёздочка | Звёздочка + пояснение «поля со звёздочкой обязательны» |
| Ссылка в тексте | Другой цвет | Цвет + подчёркивание |
| Активный пункт меню | Другой цвет | Цвет + подчёркивание или фон |
| Скидка на карточке | Красная цена | Цена + зачёркнутая старая + процент |
Типичные ошибки оформления
- Светло-серый текст на белом. Выглядит «воздушно», не читается на солнце и не проходит норму.
- Placeholder вместо подписи поля. Он бледный по определению и исчезает при вводе.
- Текст поверх фотографии без подложки: контраст меняется от снимка к снимку.
- Отключённый
outlineу фокуса «ради эстетики» — навигация с клавиатуры становится невозможной. - Слишком много акцентных цветов: когда выделено всё, не выделено ничего.
- Одинаковый цвет ссылок и обычного текста.
/* видимый фокус: не убирать, а оформить */
:focus-visible {
outline: 2px solid var(--acc);
outline-offset: 2px;
}Тёмная тема
Если делаете — проверяйте контраст отдельно: цвета, проходящие норму на белом фоне, на тёмном часто её не проходят.
- Не чистый чёрный фон. Тёмно-серый (около #0e1116) мягче для глаз.
- Не чистый белый текст. Светло-серый снижает утомление.
- Акцентные цвета осветляют: тёмно-синий на тёмном фоне не читается.
- Уважайте выбор системы через
prefers-color-schemeи дайте переключатель. - Проверяйте изображения: картинки с белым фоном на тёмной теме выглядят пятнами.
Итог
Контраст — единственная измеримая часть оформления: 4.5:1 для текста, 3:1 для крупного и для элементов интерфейса. Плюс правило, которое нарушают чаще всего: смысл нельзя передавать одним цветом. Проверка занимает секунды в DevTools. Дальше — формы.
Частые вопросы
Какой контраст текста считается достаточным?
4.5:1 для основного текста и 3:1 для крупного — от 24 px или от 19 px жирного. Для границ полей и иконок, несущих смысл, — тоже 3:1.
Как проверить контраст?
В Chrome DevTools: выберите элемент, и в панели стилей рядом с цветом появится коэффициент контрастности с отметкой, проходит ли он норму. Занимает несколько секунд.
Почему нельзя обозначать смысл только цветом?
Часть людей не различает цвета, часть смотрит на дешёвом экране или при ярком свете. Ошибку в форме нужно обозначать ещё и текстом или значком, а не только красной рамкой.
Обязательна ли тёмная тема?
Не обязательна, но если делаете — проверяйте контраст отдельно. Цвета, проходящие норму на белом, на тёмном фоне часто её не проходят.