Проверка контрастности 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.
Похожие инструменты
Калькулятор сварки
Расчёты сварки: режимы, расход материалов, предварительный нагрев, прочность шва, деформации
Калькулятор аэрокосмический: баланс топлива и Delta-v
Расчет баланса топлива (формула Циолковского) и планирование бюджета Delta-v для космических миссий. Оценка возможностей ракеты.
Генератор CSS box-shadow
Визуальный редактор теней CSS. Offset, blur, spread, цвет. Множественные тени, inset. Копирование кода.
Калькулятор нутрициологии: нутриенты, PDCAAS, гликемическая нагрузка и HEI
Нутрициологические расчёты: суточная норма нутриентов (МР 2.3.1), аминокислотный скор PDCAAS, гликемическая нагрузка, баланс Омега-3/6, HEI.
Калькулятор веб-производительности: бюджет страницы, изображения, JS-бандл, CWV
Комплексный калькулятор веб-производительности: бюджет веса страницы (3G/4G/Broadband), оптимизация изображений (WebP/AVIF, responsive), анализ JS-бандла (parse/compile, code-splitting, tree-shaking), критический путь рендеринга (TTFB, FCP), стратегия кэширования (CDN, TTL) и трекер Core Web Vitals (LCP, FID, CLS, TTI, TBT, Lighthouse score).
Калькулятор нормы высева семян
Рассчитайте норму высева семян для зерновых и технических культур. Оценка посевных качеств по ГОСТ Р 52325-2005, расчёт потребности в семенах.
Калькулятор нумерологии
Рассчет числа судьбы и совместимости по дате рождения. Узнайте свое число жизненного пути, число судьбы и совместимость с партнером.
Стоматологический калькулятор: КПУ, OHI-S, CPI, анестезия и протезирование
Стоматологические расчёты онлайн: индекс КПУ (DMFT), гигиена OHI-S, пародонтальный CPI, доза анестетика, стоимость протезирования, IOTN.
Калькулятор облигаций (YTM, дюрация, НКД)
Рассчитайте доходность к погашению (YTM), дюрацию, НКД и цену облигации. Для ОФЗ, корпоративных и муниципальных бондов.
Неонатальная дозировка лекарств
Расчёт дозировки лекарств для новорождённых с учётом гестационного возраста и веса. Инфузионная терапия и GIR.
Калькулятор научного цитирования и библиографии
Генератор ссылок по ГОСТ Р 7.0.5-2008, APA, Chicago, MLA. Расчёт индекса Хирша, импакт-фактора журнала и РИНЦ-анализ для диссертаций (ВАК).
Калькулятор трёхфазной мощности
Активная, реактивная и полная мощность. Звезда/треугольник, линейное/фазное напряжение, сечение кабеля.
Генератор паролей (безопасный)
Создать надежный пароль онлайн. Настройка длины, символов. Оценка сложности и энтропии.
Калькулятор керамики
Расчёты керамики: шихта, обжиг, усадка, прочность, глазурь, плотность и пористость
Калькулятор трибологии
Расчёты трибологии: трение, износ, смазка, подшипники, контактное давление, температура
Лиана Арифметова
Миссия: Демократизировать сложные расчеты. Превратить страх перед числами в ясность и контроль. Девиз: «Любая повторяющаяся задача заслуживает своего калькулятора».
Отказ от ответственности
Только для информационных целей. Все расчёты, результаты и данные, предоставляемые данным инструментом, носят исключительно ознакомительный и справочный характер. Они не являются профессиональной консультацией — медицинской, юридической, финансовой, инженерной или иной.
Точность результатов. Калькулятор основан на общепринятых формулах и методиках, однако фактические результаты могут отличаться в зависимости от индивидуальных условий, исходных данных и применяемых стандартов. Мы не гарантируем полноту, точность или актуальность приведённых расчётов.
Медицинские, финансовые и профессиональные решения должны приниматься исключительно на основании консультации с квалифицированными специалистами — врачом, финансовым советником, инженером или другим профессионалом в соответствующей области. Не используйте результаты данного инструмента как единственное основание для принятия важных решений.
Ограничение ответственности. Авторы и разработчики сервиса не несут никакой ответственности за прямой или косвенный ущерб, возникший в результате использования данных расчётов. Пользователь принимает на себя всю ответственность за интерпретацию и применение полученных результатов.