Проверка контрастности 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.
Похожие инструменты
Генератор favicon из текста
Создание иконки сайта (favicon) из буквы, эмодзи или символа. Генерация ICO, PNG, SVG для всех устройств с готовым HTML-кодом.
Калькулятор стоимости содержания собаки
Расчёт годовых расходов на содержание собаки: корм, ветеринар, груминг, аксессуары.
Калькулятор штукатурки
Расчёт расхода штукатурки на стены: количество мешков, толщина слоя.
Калькулятор химической кинетики
Расчёт скорости реакции, константы скорости, периода полураспада, уравнение Аррениуса. Кинетика нулевого, первого и второго порядка.
Калькулятор маршрутизации транспорта: расстояние, стоимость, загрузка
Расчёт стоимости перевозки, оптимального маршрута, загрузки транспорта и режима труда водителя. Система Платон, топливо, амортизация.
Калькулятор расхода топлива на поездку
Расчёт стоимости поездки на автомобиле: расход топлива, стоимость бензина, расстояние. Популярные маршруты по России.
Генератор UTM-меток
Создание UTM-параметров для ссылок. Пресеты для Яндекс Директ, VK, Telegram. Динамические параметры, QR-код, массовая генерация.
Калькулятор психофизики: Вебер-Фехнер, Стивенс, d-prime и время реакции
Психофизические расчёты онлайн: закон Вебера-Фехнера, степенной закон Стивенса, теория обнаружения сигнала (d′), закон Хика.
Калькулятор группы крови ребёнка
Определите возможную группу крови и резус-фактор ребёнка по группе крови и резус-фактору родителей. Генетический калькулятор наследования по системе ABO и Rh.
Калькулятор фильтров НЧ и ВЧ (RC/LC)
Фильтры нижних и верхних частот. Построение АЧХ, подбор компонентов RC и LC цепей. Формулы.
Калькулятор коррозии
Расчёты коррозии: скорость, катодная защита, покрытия, гальваническая коррозия, ресурс трубопровода
Калькулятор астрономии: планеты, Луна и МКС
Положение планет, восход и заход Солнца, фаза Луны и трекер МКС. Астрономический календарь и карта звездного неба онлайн.
Калькулятор бюджета путешествия: транспорт, жильё, питание
Калькулятор бюджета поездки. Расчёт стоимости перелёта, проживания, питания и развлечений по направлениям России.
Калькулятор накоплений
Расчёт цели накопления: ежемесячный взнос, срок достижения, доходность с учётом инфляции.
Конвертер размеров колец
Конвертация размеров колец: RU ↔ EU ↔ US ↔ UK ↔ мм. По окружности и диаметру пальца.
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.