Взгляд внутрь
Этот безопасный просмотр показывает, для чего нужен инструмент, не выполняя действий, требующих аккаунта.
Что умеет Проверка контраста CSS
Контраст это не вопрос вкуса, а доступность. Люди со слабым зрением, пожилые люди, все, кто сидит за дешёвым экраном или на солнце, зависят от контраста между текстом и фоном. CSS-Kontrast-Checker делает это значение видимым, а не оставляет его на ощущение.
Checker вычисляет коэффициент контраста по WCAG 2.1 и сразу говорит, достигает ли твоё сочетание уровня AA или AAA, отдельно для обычного и крупного текста, потому что там действуют разные пороги. Цвет текста и фона вводишь как Hex, RGB, RGBA, HSL, HSLA или как название цвета CSS; Checker понимает все распространённые варианты записи.
Помимо классического соотношения WCAG, инструмент считает ещё и APCA, Accessible Perceptual Contrast Algorithm. APCA это проект для будущих версий WCAG и пока не является обязательным. APCA оценивает контраст ближе к восприятию, особенно для тонких шрифтов и тёмного режима, где старое соотношение часто ошибается. Так ты видишь обе перспективы сразу.
Чтобы получить не только вердикт, но и выход, Checker моделирует распространённые формы дальтонизма: протанопию (нет красного), дейтеранопию (нет зелёного), тританопию (нет синего) и ахроматопсию (нет цветов). А когда сочетание не проходит, движок подсказок предлагает скорректированные цвета, которые отвечают требованиям, не переворачивая твой стиль с ног на голову.
Для крупных задач есть ещё два режима. В режиме палитры проверяешь сразу всю цветовую схему и видишь, какие пары работают вместе. В режиме Batch вставляешь настоящий CSS, а Checker вытаскивает значения цветов и проверяет их за один проход. Это удобно, когда нужно проверить существующий дизайн на доступность.
Это больше, чем упражнение для пальцев: по Barrierefreiheitsstärkungsgesetz (BFSG, немецкий закон об усилении доступности) требования к контрасту для многих цифровых предложений в Германии обязательны с июня 2025 года. Готовые пресеты, от свободно подобранных цветов в ведомственном стиле до намеренной серой катастрофы ведомственного сайта, показывают, как выглядят хорошие и плохие контрасты на практике.
Всё работает в твоём браузере. Ни одно значение цвета, ни один фрагмент CSS не отправляется на сервер. Без аккаунта, без входа, без передачи данных. Только быстрые и честные значения контраста.
Функции
WCAG 2.1 AA и AAA
Коэффициент контраста по WCAG 2.1, отдельно для обычного и крупного текста.
APCA (черновик, не обязательный)
Дополнительно значение APCA, ближе к восприятию; особенно показательно для тонких шрифтов и тёмного режима.
Моделирование дальтонизма
Просмотр для протанопии, дейтеранопии, тританопии и ахроматопсии: посмотри, как другие видят твои цвета.
Советы по улучшению
Если сочетание не проходит, Checker предлагает скорректированные цвета, которые достигают порога.
Аудит палитры и Batch
Проверяй целые цветовые схемы сразу или вставь настоящий CSS и проверь все значения за один проход.
Гибкий ввод цвета
Hex, RGB, RGBA, HSL, HSLA и названия цветов CSS: Checker понимает все распространённые варианты записи.
Пресеты контраста
Готовые примеры с Bund.de, Elster и других сайтов и отпугивающие неудачные цвета для сравнения.
Как это работает
- 1
Ввести цвета
Введи цвет текста и фона как Hex, RGB, HSL или название цвета CSS либо возьми пресет.
- 2
Прочитать значения WCAG и APCA
Checker показывает коэффициент контраста, достигнуты ли AA/AAA, и значение APCA.
- 3
Проверить дальтонизм
Посмотри моделирование, чтобы убедиться, что твои цвета работают и для людей с нарушением цветового зрения.
- 4
Принять предложения
Если сочетание не проходит, возьми одно из предложенных значений или проверь весь CSS в режиме Batch.
Кому это нужно
Частые вопросы
Что означают уровни AA и AAA?
AA это обычное минимальное требование WCAG: не менее 4,5:1 для обычного и 3:1 для крупного текста. AAA строже (соответственно 7:1 и 4,5:1). Checker показывает для каждого сочетания, какой уровень достигнут.
Что такое APCA и зачем оно мне?
APCA это метод контраста, предусмотренный для WCAG 3.0. Он оценивает контраст ближе к человеческому восприятию, особенно для тонких шрифтов и тёмного режима, где классическое соотношение WCAG часто слишком оптимистично или слишком строго. Оба значения рядом дают более полную картину.
Важен ли Checker для соответствия BFSG?
Barrierefreiheitsstärkungsgesetz (немецкий закон об усилении доступности) с июня 2025 года обязывает многие цифровые предложения к доступному оформлению, к чему относится и достаточный контраст. Checker помогает проверить это требование, но не заменяет полной оценки доступности всего твоего предложения.
Можно ли проверить целый файл стилей CSS?
Да. В режиме Batch вставляешь свой CSS, а Checker вытаскивает значения цветов и проверяет сочетания за один проход. В режиме палитры проверяешь составленную цветовую схему.
Какие форматы цвета понимает Checker?
Hex (короткий и длинный), RGB, RGBA, HSL, HSLA и именованные цвета CSS. Значения можно вводить вперемешку, например цвет текста как Hex, а фона как HSL.
Сохраняются ли мои цвета где-нибудь?
Нет. Всё работает в твоём браузере. Ни одно значение цвета и ни один CSS не отправляется на сервер и не сохраняется без твоего действия.
Похожие инструменты
Инструмент для цветов
Преобразуй между HEX, RGB, HSL и CMYK. Создавай гармоничные цветовые палитры.
Извлечение палитры цветов
Извлекай основные цвета из изображений. Копируй HEX, RGB, HSL, OKLCH. Экспорт в CSS, Tailwind…
Доступность
Настрой Werkzeu.ge под свои потребности: размер текста, контраст, анимации и шрифт для дислек…
Мастерская кода
Редактор с вкладками, подсветкой синтаксиса, живым предпросмотром, консолью, 20+ шаблонами и…
Оценка читабельности
Измерь читаемость своих текстов. Flesch-DE, Wiener Sachtextformel, индекс Lix.
Собственная тема
Настрой акцентный цвет, размер шрифта и тёмный/светлый режим. Твой рабочий стол, твой стиль.
Начнём с Проверка контраста CSS?
Без установки. Входит в Plus. Открывай прямо в браузере.
Открыть сейчас