Читаемо для всех

Крупный подзаголовок

Основной текст сильнее всего страдает от низкого контраста: его читают дольше и мелким шрифтом. Текстовая ссылка

Кнопка

Цвет текста

Непрозрачность текста

Цвет фона

Симуляция дальтонизма

Тема

Подробнее о цветовом контрасте

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

Проверьте, читается ли текст на своём фоне, прежде чем публиковать дизайн. Выберите или введите цвет текста и цвет фона, и инструмент покажет коэффициент контраста WCAG 2.x с результатом пройдено или не пройдено для AA и AAA, для обычного и крупного текста и для элементов интерфейса. Живой предпросмотр, симуляция дальтонизма и предложенные исправления помогут подобрать удачную пару. Выберите цвет текста и фона в формате HEX, RGB или HSL. Коэффициент контраста WCAG, результаты AA и AAA и предпросмотр обновляются при вводе, а ближайшие подходящие цвета предлагаются автоматически. Всё сохраняется в этом браузере.

Как это работает

Выберите цвет текста и цвет фона или введите их в HEX, RGB или HSL. Задайте непрозрачность текста, если он полупрозрачный.
Посмотрите коэффициент контраста и значки AA и AAA для обычного текста, крупного текста и элементов интерфейса, а также живой предпросмотр.
Примените предложенный цвет, если пара не проходит, сохраните удачные пары в палитру и скопируйте CSS в свой проект.

Исправления, а не только оценки

Если пара не проходит, инструмент ищет ближайший цвет текста и фона с тем же тоном и насыщенностью, который достигает AA и AAA, и применяет его одним щелчком. Полупрозрачный текст сначала смешивается с фоном, точно так же, как его рисует браузер.

Приватно и переносимо

Ваши цвета и палитра хранятся только в этом браузере. Сохраните всё в JSON для резервной копии или переноса на другое устройство либо сохраните результат как PDF или изображение. Отмена и повтор работают для каждого изменения.

Часто задаваемые вопросы

Проверка контраста бесплатна?

Да. Она бесплатна, не требует учётной записи и работает в любом современном браузере.

Какой коэффициент мне нужен?

Уровень AA в WCAG требует не менее 4,5:1 для обычного текста и 3:1 для крупного текста и элементов интерфейса, например рамок полей и значков. Уровень AAA требует 7:1 для обычного текста и 4,5:1 для крупного.

Почему 4,48 не проходит, если округляется до 4,5?

Пороги WCAG точные. Коэффициент 4,48:1 ниже 4,5:1, поэтому не проходит AA для обычного текста. Инструмент сравнивает неокруглённое значение, так что значки всегда строгие.