Что такое Режим высокой контрастности?

Инструмент для проверки веб-контента в условиях повышенного контраста. Вставьте HTML или снимок экрана и посмотрите, как страница выглядит в режимах высокого контраста Windows, инвертированных цветов и кастомных тем, соответствующих стандарту WCAG.

Выберите готовую тему (Windows High Contrast, инверсия, жёлтый по чёрному) либо задайте свой цвет текста и фона. Коэффициент контраста пересчитывается в реальном времени и показывает, какие уровни WCAG — AA, AAA, обычный текст, крупный текст — проходит ваша пара. HTML из превью можно выгрузить вместе с инлайновыми стилями.

Как использовать

1. Шаг 1 — Вставьте HTML или простой текст в редактор.
2. Шаг 2 — Выберите режим контраста из предустановок: Высокий контраст Windows (чёрный/белый), Инвертированный, Жёлтый на чёрном или Пользовательские цвета.
3. Шаг 3 — Проверьте читаемость в живом предпросмотре. С помощью проверки коэффициента контраста убедитесь в соответствии текстовых элементов стандарту WCAG AA/AAA.

Когда использовать

• Перед запуском маркетинговой кампании проверить лендинг на WCAG AA.
• Убедиться, что фокус и кнопки-иконки видны при Windows High Contrast.
• Подобрать цвет основного текста, дающий 4,5:1 на фирменном фоне.

Результат

Разработчик вставляет HTML навигационного меню и переключается в режим высокого контраста Windows. Кнопки с одними иконками сливаются с чёрным фоном, поэтому он добавляет текстовые подписи.

Частые вопросы

Какой коэффициент контраста требует WCAG AA?

4,5:1 для обычного текста и 3:1 для крупного (от 18pt regular или 14pt bold). AAA повышает планку до 7:1 и 4,5:1 соответственно. Калькулятор отмечает каждую пару уровнями, которые она проходит или нет.

Почему иконки на кнопках исчезают в Windows High Contrast?

Windows подменяет цвета системными токенами и игнорирует фоновые изображения. Иконки, нарисованные через background-image или SVG только с fill, становятся невидимыми. Используйте inline SVG с currentColor в stroke или добавьте видимую текстовую подпись.

Жёлтый по чёрному — действительно тема для доступности?

Да. Это одна из исходных тем Windows High Contrast, и её до сих пор предпочитают многие люди со слабым зрением, потому что жёлтый остаётся ярким даже при дегенерации жёлтого пятна. Некоторые ставят её выше чисто белого на чёрном.

Прохождение WCAG AA означает, что страница доступна?

Контраст — лишь часть WCAG. Странице также нужны навигация с клавиатуры, семантический HTML, alt-тексты, подписи к полям, индикаторы фокуса и поддержка режима reduced motion. Проверка касается только цвета.

Почему фирменный оранжевый не проходит на белом фоне?

Насыщенные средние тона (оранжевый, жёлтый, лайм) часто опускаются ниже 3:1 на белом из-за высокой светимости. Для основного текста сделайте оранжевый темнее, либо оставьте его для фонов и крупных заголовков, где 3:1 хватает.

Похожие инструменты