Проверка контрастности WCAG
Убедитесь, что цветовые сочетания вашего сайта соответствуют стандартам доступности WCAG 2.1 (уровни AA и AAA).
Зачем нужна контрастность цветов?
Веб-доступность означает создание сайтов, которыми могут пользоваться все люди, включая людей с ограниченными возможностями. Контрастность цветов — один из ключевых аспектов доступности. Она влияет на людей со слабым зрением, дальтонизмом и на всех, кто читает с экрана при ярком солнечном свете.
Руководство по обеспечению доступности веб-контента (WCAG) — международный стандарт веб-доступности. Он определяет три уровня соответствия: A (минимальный), AA (средний) и AAA (максимальный).
Коэффициенты контрастности WCAG
Коэффициент контрастности — это числовое значение от 1:1 (белый текст на белом фоне) до 21:1 (черный текст на белом фоне). Чем выше значение, тем лучше читаемость.
- Уровень AA (минимальный): коэффициент контрастности не менее 4.5:1 для обычного текста и 3:1 для крупного текста.
- Уровень AAA (повышенный): коэффициент контрастности не менее 7:1 для обычного текста и 4.5:1 для крупного текста.
Что считается крупным текстом?
По стандарту WCAG крупный текст — это текст размером от 18pt (24px) или 14pt (18.66px) при полужирном начертании. Поскольку крупный и жирный текст легче воспринимается, для него допустим более низкий коэффициент контрастности.
Как исправить проблемы с контрастностью
Если цвета не прошли проверку, доступность можно улучшить следующими способами:
- Затемните текст: если у вас светлый фон, попробуйте сделать цвет текста темнее.
- Осветлите фон: более светлый фон улучшает контрастность с тёмным текстом.
- Увеличьте размер или жирность шрифта: это позволит тексту попасть в категорию «крупный», где требования к контрастности мягче.
Кому это полезно?
Стандарты WCAG разработаны для людей с нарушениями зрения, но хорошая контрастность полезна всем. Она снижает нагрузку на глаза, облегчает чтение на мобильных устройствах в разных условиях освещения и в целом улучшает пользовательский опыт.
Интересный факт
Дальтонизмом страдают примерно 8% мужчин и 0,5% женщин в мире. Высокая контрастность помогает пользователям с дейтеранопией, протанопией и тританопией эффективно различать элементы интерфейса.
Часто задаваемые вопросы
Что такое WCAG?
WCAG (Web Content Accessibility Guidelines) — это международный стандарт, разработанный консорциумом W3C для обеспечения доступности веб-контента для людей с ограниченными возможностями.
Какой минимальный коэффициент контрастности нужен?
Для уровня AA — не менее 4.5:1 для обычного текста и 3:1 для крупного. Для уровня AAA — не менее 7:1 и 4.5:1 соответственно.
Обязательно ли соблюдать WCAG в России?
В России действует ГОСТ Р 52872-2019, который содержит требования к доступности веб-ресурсов. Требования к контрастности аналогичны WCAG 2.1 уровня AA. Государственные сайты обязаны соблюдать эти стандарты.
Как узнать коэффициент контрастности?
Введите два цвета (текст и фон) в наш калькулятор выше. Инструмент мгновенно рассчитает коэффициент контрастности и покажет, соответствует ли сочетание уровням AA и AAA.
Похожие калькуляторы
Калькулятор конвертации форматов файлов
Изменение размера при конвертации: BMP vs JPG, WAV vs MP3, RAW vs MP4. Lossless и Lossy сжатие.
/file-conversion-calculatorКонвертер систем счисления (Bin/Oct/Dec/Hex)
Перевод чисел между двоичной, восьмеричной, десятичной и шестнадцатеричной системами. Для программистов.
/number-system-converterГенератор UUID v4 онлайн
Генерация UUID v4. Один или сотни уникальных идентификаторов за секунду. Разные форматы.
/uuid-generatorГенератор CSS box-shadow
Визуальный редактор теней CSS. Offset, blur, spread, цвет. Множественные тени, inset. Копирование кода.
/box-shadow-generatorСчётчик символов и слов онлайн
Символы с пробелами и без, слова, предложения, время чтения. Для SEO, соцсетей и копирайтинга.
/character-counterКалькулятор A/B теста
Статистическая значимость A/B теста. Размер выборки, p-value, доверительный интервал и мощность теста.
/ab-test-calculatorКалькулятор контрастности (WCAG), шрифтов и сетки
Инструменты UI/UX дизайнера. Проверка контрастности цветов (WCAG AA/AAA), расчет модульной сетки и подбор типографической шкалы.
/contrast-gridКалькулятор Responsive Margin/Padding (Clamp generator)
Генератор CSS функции clamp() для адаптивных отступов и шрифтов. Создайте отзывчивый дизайн (fluid spacing) от мобильных до десктопа онлайн.
/responsive-helperКалькулятор CSS единиц (PX, REM, EM, %)
Конвертер пикселей в rem/em и генератор calc(). Удобный инструмент для верстки и адаптивного дизайна.
/css-unit-converterКонвертер цветовых пространств
Конвертация цветов между CMYK, RGB, HEX, HSL, HSV с визуальным предпросмотром. Цветовые гармонии и контрастность WCAG.
/konverter-cvetov-cmyk-rgb-hexКалькулятор золотого сечения
Пропорции золотого сечения (phi = 1.618). Для дизайна, архитектуры, фотографии. Прямоугольник и спираль.
/golden-ratio-calculatorГенератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
/cubic-bezierКалькулятор теории цвета: гармония, конвертер, палитры, смешивание, дальтонизм
Комплексный инструмент для работы с цветом: цветовые гармонии (комплементарная, аналогичная, триадная, тетрадная), конвертер HEX/RGB/HSL/HSV/CMYK, генератор палитр (монохроматическая, shades, tints, tones), смешивание цветов (аддитивное/субтрактивное), симулятор дальтонизма и анализ цветовой температуры.
/color-theory-calculatorКалькулятор градиентов и интерполяции цветов
Генератор плавных переходов между цветами. Создайте CSS градиент онлайн, получите коды цветов (HEX/RGB) и настройте количество шагов.
/color-gradientКалькулятор типографики: Type Scale, межстрочный, Fluid Typography
Комплексный типографический калькулятор. Модульная шкала (Type Scale), расчёт межстрочного интервала (line-height), оптимальная длина строки, вертикальный ритм (baseline grid), подбор пар шрифтов и Fluid Typography с CSS clamp().
/typography-calculator
Был ли этот калькулятор полезен?
Инструмент справочный — не заменяет эксперта
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Профессиональные решения — медицинские, финансовые, инженерные — должны приниматься только после консультации с квалифицированным специалистом. Не используйте автоматический расчёт как единственное основание для важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут ответственности за прямой или косвенный ущерб, возникший из-за использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию результатов.