background-color: цвет фона и доступность (контраст) (CSS)

Цвет фона в CSS задаётся через свойство background-color. На первый взгляд это простая настройка: поставил цвет — и готово. Но если смотреть с точки зрения доступности, тут есть важные нюансы: текст должен нормально читаться на фоне, а интерфейс — быть удобным для людей с особенностями зрения.

Как задать цвет фона

Синтаксис простой:

.box {
  background-color: #f5f5f5;
}

Можно использовать любые форматы цветов: HEX, RGB, HSL, а также системные значения и currentColor:

.box-1 {
  background-color: rgb(240, 240, 240);
}
 
.box-2 {
  background-color: hsl(0, 0%, 94%);
}
 
.box-3 {
  background-color: currentColor; /* редкий, но возможный случай */
}

Чаще всего фон задают для контейнеров, карточек, строк таблицы, кнопок и полей ввода.

Почему контраст важен

Контраст — это разница между цветом текста и цветом фона. Если она слишком маленькая, текст становится плохо читаемым. Это особенно критично:

• для людей с ослабленным зрением;
• при плохом освещении (например, на улице с ярким солнцем);
• на экранах с низкой яркостью или плохой цветопередачей.

В рекомендациях WCAG (стандарт доступности веб‑контента) есть чёткие требования к контрасту:

• Для обычного текста (до 14 пт или 18,67 пт для жирного) нужен коэффициент контраста не ниже 4.5:1.
• Для крупного текста (14 пт и выше, жирный — 18,67 пт и выше) допускается 3:1.

Коэффициент контраста — это не «на глаз», а расчётная величина. Браузеры и инструменты сами её не показывают, но её можно проверить отдельно.

Как проверить контраст

Есть несколько удобных способов:

1. Онлайн‑калькуляторы контраста (в том числе официальный инструмент от WebAIM). Вводите цвет текста и цвет фона — получаете коэффициент и оценку по WCAG.
2. Плагины в редакторах кода и дизайн‑инструментах (Figma, Sketch и т. п.) — часто сразу подсвечивают проблемы контраста.
3. Расширения для браузера, которые проверяют контраст на реальной странице.

Это помогает не гадать, а опираться на числа.

Частые ошибки и как их избежать

• Серый текст на светло‑сером фоне. Выглядит «стильно», но часто не проходит по контрасту. Например, #999 на #f5f5f5 может быть ниже 4.5:1.
• Яркие акценты как фон для текста. Кислотные или очень насыщенные цвета иногда дают плохой контраст с белым или чёрным из‑за особенностей восприятия.
• Градиенты и картинки вместо сплошного цвета. У градиента контраст разный в разных точках, у картинки — ещё сложнее. Для текста лучше использовать сплошной цвет либо накладывать полупрозрачную подложку.

Пример плохой пары (часто встречается на практике):

.bad-contrast {
  color: #777;
  background-color: #eee;
}

Такой вариант нередко не проходит проверку по WCAG для обычного текста.

Практические приёмы для хорошего контраста

1. Использовать заранее проверенные пары. Например:

• чёрный текст #000 на белом фоне #fff — контраст максимальный;
• тёмно‑серый текст #333 на белом фоне #fff — обычно проходит 4.5:1;
• белый текст на тёмно‑синем фоне #0b3c6a — часто подходит для крупных заголовков и кнопок.

2. Делать подложку под текст, если фон — картинка или градиент:

.card {
  position: relative;
  background-image: url(image.jpg);
}
 
.card .text-layer {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.6); /* полупрозрачный чёрный */
}
 
.card h2 {
  color: white;
}

Так контраст будет стабильным независимо от картинки.

3. Использовать полупрозрачные цвета осторожно. Полупрозрачный фон может менять контраст в зависимости от того, что находится под ним. Это особенно важно при наложении на разные фоны или при прокрутке.

Пример: карточка с текстом и картинкой

Допустим, у нас карточка с фоновым изображением и заголовком сверху. Чтобы заголовок читался везде, добавим подложку:

.card {
  position: relative;
  background-size: cover;
  background-position: center;
}
 
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.55); /* подложка */
  z-index: 1;
}
 
.card h2 {
  position: relative;
  z-index: 2;
  color: white; /* белый текст на тёмной подложке */
}

Подложка даёт предсказуемый контраст, а белый текст остаётся читаемым.

Контраст и тёмная тема

При реализации тёмной темы важно не просто инвертировать цвета, а заново проверить пары:

• вместо белого фона и чёрного текста — тёмный фон и светлый текст;
• серые оттенки нужно подбирать заново, потому что в тёмной теме они могут стать слишком похожими.

Простой приём: держать палитру из 3–4 базовых цветов для фона и 3–4 для текста и заранее проверять все возможные комбинации.

Инструменты и автоматизация

Если проект серьёзный, контраст можно проверять не вручную:

• в CI/CD — запускать проверки на соответствие WCAG по заданным правилам;
• в дизайн‑системе — хранить только те цвета, которые уже прошли проверку;
• в коде — использовать CSS‑переменные для палитр и централизованно менять их, не ломая контраст.

Пример переменных:

:root {
  --bg-main: #ffffff;
  --text-main: #222222;
  --bg-card: #f8f9fa;
  --text-secondary: #555555;
}
 
body {
  background-color: var(--bg-main);
  color: var(--text-main);
}
 
.card {
  background-color: var(--bg-card);
  color: var(--text-secondary);
}

Когда вы меняете переменную в одном месте, все элементы обновляются, и проще контролировать, чтобы контрастные пары оставались корректными.