!\[Контрастность цветов WCAG: проверка доступности сайта\](https://usetoolz.ru/article-covers/images/wcag-kontrastnost-cvetov.webp)

Разработка

# Контрастность цветов WCAG: проверка доступности сайта

!\[UseToolz\](https://usetoolz.ru/favicon.svg)

Александр Михеев

10 марта 2025 · 5 мин. чтения

Контрастность — один из ключевых параметров доступности веб-интерфейсов. По данным ВОЗ, более 2,2 миллиарда человек в мире имеют нарушения зрения. Недостаточный контраст между текстом и фоном делает содержимое нечитаемым не только для людей с ослабленным зрением, но и для любого пользователя в условиях яркого солнечного света или на экране с плохой калибровкой.

Стандарт WCAG (Web Content Accessibility Guidelines) устанавливает чёткие требования к минимальному контрасту цветов. В этом руководстве разберём, как работает формула расчёта, какие уровни соответствия существуют и как проверить контрастность на практике.

## Что такое WCAG и зачем нужен стандарт

WCAG — это набор рекомендаций по обеспечению доступности веб-контента, разработанный консорциумом W3C (World Wide Web Consortium). Стандарт определяет, как сделать сайт удобным для людей с различными ограничениями: нарушениями зрения, слуха, моторики и когнитивных функций.

Текущая версия — **WCAG 2.1** (опубликована в 2018 году). Она включает три уровня соответствия: A (минимальный), AA (рекомендуемый) и AAA (максимальный). Большинство законодательных актов о доступности (ADA в США, EN 301 549 в ЕС, ГОСТ Р 52872 в России) ссылаются на уровень AA как обязательный.

## Уровни контрастности AA и AAA

WCAG определяет минимальные коэффициенты контрастности в зависимости от размера текста и уровня соответствия:

| Элемент | Уровень AA | Уровень AAA |
| --- | --- | --- |
| Нормальный текст (до 18px или до 14px bold) | ≥ 4.5:1 | ≥ 7:1 |
| Крупный текст (от 18px bold или от 24px) | ≥ 3:1 | ≥ 4.5:1 |
| Элементы интерфейса (кнопки, иконки, границы полей) | ≥ 3:1 | — |

**Нормальный текст** — это основной текст страницы (параграфы, списки, ссылки). **Крупный текст** — заголовки и выделенные элементы размером от 24px (или от 18px при жирном начертании). Для крупного текста требования мягче, потому что он лучше читается при меньшем контрасте.

## Формула расчёта контрастности

Коэффициент контрастности рассчитывается по формуле:

`CR = (L1 + 0.05) / (L2 + 0.05)`

где L1 — относительная яркость (relative luminance) более светлого цвета, L2 — более тёмного. Результат — число от 1:1 (нет контраста) до 21:1 (максимальный контраст, чёрный на белом).

### Как рассчитать относительную яркость

Относительная яркость определяется из RGB-компонентов цвета по формуле:

`L = 0.2126 × R + 0.7152 × G + 0.0722 × B`

где R, G, B — линеаризованные значения каналов (после гамма-коррекции). Для значения канала sRGB ≤ 0.04045 линеаризация: `C / 12.92`. Для значений > 0.04045: `((C + 0.055) / 1.055) ^ 2.4`.

На практике формулу не нужно считать вручную — используйте наш \[инструмент проверки контрастности\](https://usetoolz.ru/dev/color-contrast), который мгновенно покажет коэффициент и уровень соответствия WCAG.

## Примеры хорошего и плохого контраста

| Пара цветов | Контраст | WCAG AA | Оценка |
| --- | --- | --- | --- |
| Чёрный (#000) на белом (#FFF) | 21:1 | Проходит | Максимальный контраст |
| Тёмно-серый (#333) на белом (#FFF) | 12.6:1 | Проходит | Отличный |
| Синий (#1D4ED8) на белом (#FFF) | 7.8:1 | Проходит | Хороший |
| Серый (#767676) на белом (#FFF) | 4.5:1 | Проходит | Минимально допустимый |
| Серый (#888) на белом (#FFF) | 3.5:1 | Не проходит | Текст трудно читать |
| Светло-серый (#AAA) на белом (#FFF) | 2.3:1 | Не проходит | Почти не читаемый |

## Как исправить низкую контрастность

Если пара цветов не проходит проверку WCAG, есть несколько стратегий:

- **Затемнить текст** — самый простой способ. Вместо #888 используйте #555 или #333.
- **Осветлить фон** — если фон тёмный, сделайте его светлее или используйте чисто белый.
- **Увеличить размер шрифта** — для крупного текста (≥ 18px bold) требования мягче (3:1 вместо 4.5:1).
- **Подобрать альтернативный цвет** — наш \[инструмент проверки контрастности\](https://usetoolz.ru/dev/color-contrast) предлагает ближайшие цвета, проходящие WCAG AA и AAA.

Помните: доступность — это не ограничение дизайна, а расширение аудитории. Высококонтрастный интерфейс удобен для всех пользователей.

## Инструменты для проверки

Проверка контраста — обязательный этап при разработке любого интерфейса. Вот инструменты, которые помогут:

- \[UseToolz Contrast Checker\](https://usetoolz.ru/dev/color-contrast) — мгновенная проверка любой пары цветов по WCAG с предложением доступных альтернатив.
- \[Color Picker\](https://usetoolz.ru/dev/color-picker) — выбор цветов с конвертацией между HEX, RGB, HSL, CMYK и привязкой к палитре Tailwind CSS.
- DevTools в браузере — вкладка Accessibility → Color Contrast показывает коэффициент для элементов на странице.

## Часто задаваемые вопросы

**Какой минимальный контраст нужен для текста на сайте?**  
По стандарту WCAG 2.1, уровень AA требует коэффициент контрастности не менее 4.5:1 для нормального текста и 3:1 для крупного текста (от 18px bold или от 24px). Уровень AAA — 7:1 и 4.5:1 соответственно.

**Обязательно ли соблюдать WCAG?**  
В ряде стран это требование закона. В США — ADA и Section 508, в ЕС — European Accessibility Act (с 2025 года). В России ГОСТ Р 52872-2019 рекомендует соответствие WCAG 2.0 AA для государственных сайтов. Для коммерческих сайтов соблюдение WCAG — лучшая практика, улучшающая пользовательский опыт и SEO.

**Как быстро проверить контрастность?**  
Откройте наш \[contrast checker\](https://usetoolz.ru/dev/color-contrast), введите два цвета (текст и фон) — и увидите коэффициент контрастности, соответствие уровням AA и AAA, а также рекомендации по исправлению.

**Влияет ли контрастность на SEO?**  
Да. Google учитывает доступность при ранжировании (Core Web Vitals, Lighthouse Accessibility score). Сайты с хорошей контрастностью получают более высокие оценки в аудитах Lighthouse, что косвенно влияет на позиции в поиске.

**Что делать, если бренд-цвет не проходит WCAG?**  
Используйте бренд-цвет для крупных элементов (заголовки, кнопки), где допустимый порог ниже (3:1). Для основного текста подберите более контрастный оттенок из той же цветовой гаммы. Наш \[инструмент\](https://usetoolz.ru/dev/color-contrast) автоматически предложит ближайший подходящий цвет.

## Заключение

Контрастность — не абстрактная метрика, а реальный показатель удобства вашего сайта. Проверяйте каждую пару «текст — фон» по стандарту WCAG 2.1, используйте уровень AA как минимум и стремитесь к AAA для основного контента. Начните с нашего \[инструмента проверки контрастности WCAG\](https://usetoolz.ru/dev/color-contrast) — он покажет проблемы и подскажет решения за секунды.

Понравилась статья?

Оцените — это помогает нам делать контент лучше

## Комментарии

Войдите, чтобы оставить комментарий

## Читайте также

!\[Как создать надёжный пароль: генерация и безопасность\](https://usetoolz.ru/article-covers/thumbnails/kak-sozdat-nadezhnyj-parol.webp) Разработка

### [Как создать надёжный пароль: генерация и безопасность](https://usetoolz.ru/blog/kak-sozdat-nadezhnyj-parol)

23.07.2024 · 4 мин. чтения

!\[Cron-выражения: полное руководство с примерами\](https://usetoolz.ru/article-covers/thumbnails/cron-vyrazheniya-rukovodstvo.webp) Разработка

### [Cron-выражения: полное руководство с примерами](https://usetoolz.ru/blog/cron-vyrazheniya-rukovodstvo)

10.02.2025 · 2 мин. чтения

!\[URL кодирование: зачем нужно и как работает\](https://usetoolz.ru/article-covers/thumbnails/url-kodirovanie-kak-rabotaet.webp) Разработка

### [URL кодирование: зачем нужно и как работает](https://usetoolz.ru/blog/url-kodirovanie-kak-rabotaet)

07.08.2024 · 4 мин. чтения

triggerFly($event.detail || {}), 180)" @fly-to-works.window="triggerFly($event.detail || {})" class="pointer-events-none fixed inset-0 z-\[90\]">