Проверка контрастности цвета
Проверьте контраст цвета текста и фона по стандартам WCAG 2.1 AA и AAA — мгновенный коэффициент контрастности, предпросмотр в реальном времени и значки «прошло/не прошло».
Цвета
4.48:1Чем выше, тем лучше. WCAG требует не менее 4,5:1 для обычного текста.Aa обычный текст — съешь ещё этих булочек
Aa крупный текст
Об этом инструменте
Эта проверка контрастности цвета измеряет, насколько читаем текст на своём фоне, используя формулу контрастности WCAG 2.1. Введите цвет текста и цвет фона в виде HEX-значений или выберите их визуально, и инструмент мгновенно покажет коэффициент контрастности (например, 4,52:1) вместе со значками «прошло» или «не прошло» для уровней AA и AAA Руководства по доступности веб-контента. Живой предпросмотр отображает пример текста в выбранных цветах, чтобы вы могли оценить результат с первого взгляда, а кнопка обмена меняет местами передний план и фон. Всё работает в браузере, поэтому быстро, конфиденциально и работает офлайн после загрузки — идеально для дизайнеров, разработчиков и всех, кто создаёт доступные интерфейсы.
Как пользоваться
- 1 Введите цвет текста (передний план) в виде HEX или выберите его палитрой.
- 2 Введите цвет фона так же; поддерживаются и #rgb, и #rrggbb.
- 3 Прочитайте коэффициент контрастности и значки AA/AAA для обычного и крупного текста.
- 4 Используйте кнопку обмена и подбирайте, пока не достигнете хотя бы 4,5:1.
Как это работает
Каждый цвет сначала преобразуется из sRGB в линейный свет: каждый канал делится на 255, а значения выше 0,03928 возводятся по гамма-кривой. Относительная яркость затем равна L = 0,2126·R + 0,7152·G + 0,0722·B, причём зелёный имеет наибольший вес, так как глаз наиболее чувствителен к нему. Коэффициент контрастности между двумя цветами равен (L1 + 0,05) / (L2 + 0,05), где L1 — более светлый цвет, а L2 — более тёмный. Это даёт значение от 1:1 (одинаковые цвета) до 21:1 (чисто чёрный на чисто белом). WCAG 2.1 требует коэффициент не менее 4,5:1 для обычного текста и 3:1 для крупного на уровне AA, возрастая до 7:1 и 4,5:1 для AAA. Крупный текст — это примерно 18,66px жирным или 24px обычным и больше.
Частые вопросы
Какой коэффициент контрастности нужен для соответствия WCAG?
Для уровня AA WCAG 2.1 нужно не менее 4,5:1 для обычного текста и 3:1 для крупного. Уровень AAA строже: 7:1 для обычного текста и 4,5:1 для крупного. Большинство сайтов ориентируются на AA как на юридическую и практическую основу.
Что считается крупным текстом?
WCAG определяет крупный текст как минимум 18,66px (около 14pt) жирным или минимум 24px (около 18pt) любой насыщенности. Крупный текст легче читать, поэтому для него допускается более низкий порог контрастности (3:1 для AA, 4,5:1 для AAA).
Как рассчитывается коэффициент контрастности?
Относительная яркость каждого цвета вычисляется из его линеаризованных красного, зелёного и синего каналов (L = 0,2126R + 0,7152G + 0,0722B). Коэффициент затем равен (более светлый + 0,05) / (более тёмный + 0,05), давая значения от 1:1 до 21:1 для чёрного на белом.
Почему чисто чёрный на белом даёт 21:1?
У чёрного относительная яркость 0, у белого — 1. Подставив в (1 + 0,05) / (0 + 0,05), получаем 21 — максимально возможный коэффициент контрастности. Поэтому #000000 на #ffffff проходит любой уровень WCAG.
Влияет ли контрастность цвета на SEO и законы о доступности?
Да. Достаточная контрастность входит в стандарты доступности, на которые ссылаются законы вроде ADA, раздела 508 и Европейского акта о доступности, а хорошая читаемость улучшает показатели удобства. Соответствие WCAG AA снижает юридические риски и делает контент доступным для людей со слабым зрением или нарушениями цветовосприятия.
Связанные инструменты и применение
Проверка контрастности незаменима для доступного веб- и приложений-дизайна. Используйте её вместе с конвертером цветов, чтобы переходить между HEX, RGB и HSL при настройке палитры, и с калькулятором процентов при масштабировании отступов или прозрачности. Дизайнеры, фронтенд-разработчики и контент-мейкеры применяют её, чтобы кнопки, подписи и основной текст оставались читаемыми для всех.