Проверка контраста – коэффициент контрастности WCAG
Введите цвет текста и цвет фона, чтобы рассчитать коэффициент контрастности и узнать, соответствует ли ваша комбинация стандартам доступности WCAG AA и AAA.
Введите два цвета для проверки контрастности
Поддерживаются форматы HEX, RGB, HSL и OKLCH
Попробовать пример
Другие инструменты
Проверка цветового контраста для доступности
Цветовой контраст напрямую влияет на читаемость. Когда текст недостаточно выделяется на фоне, его сложно воспринимать — особенно людям со слабым зрением или нарушениями цветовосприятия.
Этот инструмент вычисляет коэффициент контрастности между любыми двумя цветами и оценивает его по критериям WCAG 2.1. Введите цвета в формате HEX, RGB или HSL и получите результат мгновенно.
Уровни контрастности WCAG
Руководство по доступности веб-контента (WCAG) устанавливает минимальные коэффициенты контрастности для читаемости текста. Существует два уровня соответствия:
- WCAG AA, обычный текст — коэффициент контрастности не менее 4,5:1
- WCAG AA, крупный текст — коэффициент контрастности не менее 3:1 (крупный текст: от 18pt или от 14pt полужирный)
- WCAG AAA, обычный текст — коэффициент контрастности не менее 7:1
- WCAG AAA, крупный текст — коэффициент контрастности не менее 4,5:1
Уровень AA — базовый стандарт, которому стремится соответствовать большинство сайтов и приложений. Уровень AAA — усиленный стандарт, рекомендуемый для контента, где максимальная читаемость критически важна.
Как пользоваться инструментом
- Введите цвет текста (переднего плана) — в формате HEX, RGB или HSL
- Введите цвет фона в любом поддерживаемом формате
- Посмотрите коэффициент контрастности и предварительный вид текста на выбранном фоне
- Проверьте результаты «соответствует / не соответствует» для уровней WCAG AA и AAA
- Используйте кнопку «Поменять местами», чтобы быстро поменять цвет текста и фона
Когда нужно проверять контраст
- При выборе цветов текста и фона для сайта или приложения
- При проверке дизайн-системы на соответствие требованиям доступности
- При тестировании цветов кнопок, ссылок или иконок на различных фонах
- При проверке цветовых сочетаний в тёмной теме
- При соблюдении правовых стандартов доступности (ADA, EAA, Section 508)
Точно, мгновенно и бесплатно
Инструмент рассчитывает коэффициент контрастности по стандартной формуле относительной яркости WCAG 2.1. Все вычисления происходят прямо в браузере — данные не отправляются ни на какой сервер.
Нужно сначала найти или преобразовать цвет? Воспользуйтесь Пипеткой, чтобы извлечь цвет из изображения, или Конвертером цветов для перевода между HEX, RGB и HSL.
Часто задаваемые вопросы
- Какой коэффициент контрастности считается хорошим?
- Для обычного текста стандарт WCAG AA требует коэффициент контрастности не менее 4,5:1. Для крупного текста (18pt или 14pt полужирный и выше) минимум составляет 3:1. Для наивысшего уровня доступности (WCAG AAA) обычному тексту необходим коэффициент не менее 7:1.
- В чём разница между WCAG AA и AAA?
- AA — базовый уровень соответствия, которому должно отвечать большинство сайтов и приложений. AAA — усиленный уровень с более строгими требованиями к контрасту, рекомендуемый для контента, где максимальная читаемость критически важна, например для государственных или медицинских сайтов.
- Что считается крупным текстом по WCAG?
- Крупным считается текст размером 18 пунктов (24px) и более при обычном начертании или 14 пунктов (примерно 18,66px) и более при полужирном начертании. К крупному тексту предъявляются менее строгие требования по контрасту, поскольку его размер облегчает восприятие.
- Какие цветовые форматы поддерживает этот инструмент?
- Вы можете вводить цвета в форматах HEX (например, #1E293B), RGB (например, rgb(30, 41, 59)) или HSL (например, hsl(222, 33%, 17%)). Формат определяется автоматически.
- Как рассчитывается коэффициент контрастности?
- Коэффициент контрастности рассчитывается по формуле WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), где L1 — относительная яркость более светлого цвета, а L2 — более тёмного. Результат варьируется от 1:1 (контраста нет) до 21:1 (максимальный контраст — чёрный на белом).
- Работает ли инструмент на мобильных устройствах?
- Да. Проверка контраста работает на любом устройстве с современным браузером — компьютере, планшете или телефоне.
- Это бесплатный инструмент?
- Да. ColourPicker.app полностью бесплатен и не требует регистрации.
- Можно ли проверять контраст для элементов интерфейса, а не только для текста?
- WCAG 2.1 также требует минимальный коэффициент контрастности 3:1 для значимых элементов интерфейса и графических объектов (критерий успеха 1.4.11). Этот инструмент подходит и для таких проверок — формула расчёта та же.