Проверка цветового контраста

Проверьте контрастность переднего и заднего планов по WCAG AA и AAA. См. обновление соотношения при выборе цвета.

Color Contrast Checker

Live

Foreground (text)

Background

17.85:1

Contrast ratio

AA normal: PassAA large: PassAAA normal: PassAAA large: Pass

Readable headline sample

Body text at normal size should stay clear against this background. Adjust colors until WCAG targets pass.

Small caption text for density checks.

CSS output

color: #0f172a;
background-color: #ffffff;
/* contrast ratio: 17.85:1 */

Key capabilities

Проверьте контрастность переднего и заднего планов в соответствии с рекомендациями WCAG AA и AAA.
Запускается в вашем браузере
Бесплатное использование

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

Выберите цвета текста (переднего плана) и фона.
Прочтите коэффициент контрастности и результаты AA/AAA.
Регулируйте, пока не достигнете целевого уровня.

How this tool works

Выберите цвета текста (переднего плана) и фона.
Прочтите коэффициент контрастности и результаты AA/AAA.
Регулируйте, пока не достигнете целевого уровня.

Recommended settings

Сначала используйте параметры по умолчанию, затем при необходимости измените их.

Supported formats

Text / on-page input

File size and limits

Очень сложные многослойные предварительные просмотры могут работать медленнее на старых телефонах.

Privacy

Генераторы цвета и CSS полностью работают в вашем браузере. Предварительный просмотр и преобразование никогда не загружают ваши стили.

Common use cases

Используйте средство проверки цветового контраста всякий раз, когда вам нужно: Проверьте контрастность переднего и заднего плана в соответствии с рекомендациями WCAG AA и AAA.

Troubleshooting

Предварительный просмотр выглядит по-другому после вставки

Проверьте наличие конкурирующих CSS на вашей странице (сбросы, унаследованные цвета). Сначала скопируйте сгенерированное правило в изолированную таблицу стилей.

FAQ

Это загружает мой CSS?

Нет. Генераторы и преобразователи запускаются в вашем браузере с предварительным просмотром в реальном времени.

Нужен ли мне аккаунт?

Нет. Откройте инструмент, настройте элементы управления и скопируйте CSS.