Проверка контрастности 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.
Похожие инструменты
Калькулятор нотариальных услуг
Расчёт стоимости нотариальных услуг: тариф + УПТХ. Доверенности, договоры, наследство, согласия. Ст. 22.1 Основ о нотариате.
Калькулятор загрузки паллет/контейнера
Расчёт оптимальной загрузки контейнера или паллета. 20ft, 40ft, еврофура, газель. Количество коробок и заполняемость.
URL Encode/Decode
Кодирование и декодирование URL-параметров онлайн. Поддержка кириллицы, percent-encoding, разбор URL на компоненты.
Калькулятор рассады
Расчёт количества семян, горшков и грунта для рассады. Сроки посева по регионам, расход торфа и удобрений.
Калькулятор тенниса: калории, подача, натяжка, рейтинг
Калькулятор для тенниса. Расход калорий, анализ скорости подачи, натяжка струн, рейтинг игрока и планирование сезона.
Калькулятор CHA2DS2-VASc
Оценка риска инсульта при фибрилляции предсердий по шкале CHA2DS2-VASc. Клинические рекомендации ESC.
Калькулятор мотоциклиста: налог, ОСАГО, расход топлива
Расчёт транспортного налога на мотоцикл, стоимости ОСАГО, расхода топлива, мощности и стоимости обслуживания мотоцикла.
Калькулятор гемодинамики (MAP, CO, объем крови)
Комплексный расчет: среднее артериальное давление (MAP), сердечный выброс (CO) и объем крови (формула Надлера). Оценка кровообращения.
Калькулятор социальных выплат (больничный, декретные, пособия)
Рассчитайте больничный лист, декретные выплаты, пособие по уходу за ребенком, материнский капитал и другие социальные пособия.
Генератор Cubic Bezier (CSS transition)
Интерактивный генератор кривых Безье для CSS анимаций. Визуальная настройка плавности переходов, пресеты (ease, linear) и копирование кода.
Калькулятор надёжности
Расчёты надёжности: Вейбулл, системная надёжность, испытания, анализ отказов, резервирование
Калькулятор балки: момент, прогиб, подбор сечения
Расчёт балки на изгиб и прогиб. Подбор стального двутавра, деревянной и ж/б балки. Эпюры моментов и поперечных сил.
Калькулятор энергопотребления ПК
Расчёт мощности блока питания и расхода электричества компьютера. Подбор БП по компонентам, расчёт стоимости электроэнергии в месяц и год.
Калькулятор развесовки по осям грузовика
Расчёт нагрузки на оси грузовика при загрузке. Проверка на перегруз по ПП №272, рекомендации по размещению груза.
Калькулятор уличного освещения
Расчёт количества уличных светильников, столбов, кабеля и полной сметы наружного освещения. Нормы СП 52.13330, LED фонари, прожекторы, болларды.
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Был ли этот калькулятор полезен?
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.