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

Сравните цвета текста и фона. Узнайте коэффициент контрастности и проверьте числовые пороги WCAG для обычного и крупного текста и важных деталей интерфейса.

Цвета

HEX цвета переднего плана

Три или шесть символов HEX; знак # необязателен.

HEX цвета фона

Три или шесть символов HEX; знак # необязателен.

Непрозрачность переднего плана (%)

0–100%, не более двух знаков после запятой. Фон непрозрачный.

При обмене цветов непрозрачность остаётся у переднего плана.

Результат проверки контраста

Введите оба цвета и допустимую непрозрачность, чтобы увидеть контраст.

Сравнение выполняется в браузере без загрузок, добавленных инструментом, и сохранения истории цветов. Отчёт записывается в буфер обмена только по запросу. Обычные сервисы сайта и настройки согласия действуют отдельно.

Проверьте пару цветов

Введите каждый цвет в формате HEX из трёх или шести символов либо выберите его в палитре. Фон должен быть сплошным и непрозрачным.
Для непрозрачного текста оставьте непрозрачность переднего плана 100%, а для полупрозрачного введите меньшее значение. Результат обновляется, когда все три значения допустимы.
Посмотрите коэффициент и отдельные результаты для обычного и крупного текста и нетекстовых элементов. Проверьте реальный контекст дизайна и при необходимости скопируйте отчёт с оговорками.

Как читать результаты

Для обычного текста числовые пороги составляют 4,5:1 на уровне AA и 7:1 на уровне AAA. Расчёт сравнивает относительную яркость, а не названия цветов.

Для крупного текста пороги составляют 3:1 на уровне AA и 4,5:1 на уровне AAA. Крупный текст — от 18 pt обычного или 14 pt полужирного начертания либо эквивалентного размера для других письменностей. Это примерно 24 и 18,67 CSS-пикселя; реальную типографику нужно проверить отдельно.

Непрозрачность переднего плана меняет результирующий цвет на заданном фоне. При 100% цвет полностью непрозрачен, при 0% сливается с фоном и коэффициент равен 1:1. Прозрачный фон инструмент не рассматривает.

Строка 3:1 для нетекстовых элементов сравнивает эту пару для важных визуальных деталей и соседнего цвета. Решения принимаются по неокруглённому коэффициенту; число с двумя знаками приведено для удобства.

Примеры для проверки

Чёрный #000000 на белом #FFFFFF при непрозрачности 100% даёт 21:1 и достигает всех пяти числовых порогов. При обмене непрозрачных цветов коэффициент не меняется.

Серый #777777 на белом даёт около 4,48:1. Он не достигает порога 4,5:1 для обычного текста AA, но превышает порог 3:1 для крупного текста AA.

Чёрный с непрозрачностью 50% на белом даёт около 3,98:1 в этом расчёте sRGB. Уменьшение непрозрачности может снизить контраст даже у исходно контрастной пары.

Проверка пары — лишь часть оценки доступности

Инструмент оценивает сплошные цвета sRGB с непрозрачным фоном и необязательной непрозрачностью переднего плана. Он не анализирует страницу и шрифты, не берёт пробы изображений и градиентов, не моделирует особенности цветового зрения и не проверяет все требования и исключения WCAG.

Достижение числового порога не подтверждает доступность страницы или продукта. Проверьте реальный размер и начертание текста, соседние цвета, значимые формы и состояния и другие требования доступности. Отображение и сглаживание также влияют на читаемость.

Расчёт в браузере

Сравнение выполняется в браузере без загрузок, добавленных инструментом, и сохранения истории цветов. Текущий отчёт записывается в буфер обмена только по запросу. Обычные сервисы сайта и настройки согласия действуют отдельно.

Вопросы о контрастности цветов

Нет. Он означает только достижение указанного числового порога для этой пары. Реальное применение, типографику, исключения и остальные требования нужно оценить отдельно.

Не менее 18 pt обычного или 14 pt полужирного начертания либо эквивалентный размер для других письменностей. Проверяйте фактический размер и начертание, а не считайте любой заголовок крупным.

Например, 4,499 округляется до 4,50, но остаётся меньше 4,5. Пороги сравниваются с неокруглённым значением.

Эта версия принимает RGB HEX из трёх или шести символов. Непрозрачность переднего плана задаётся отдельно. Функции CSS, HEX с альфа-каналом и прозрачный фон не поддерживаются.

Значения цветов меняются местами, а непрозрачность остаётся у переднего плана. Для непрозрачной пары коэффициент сохраняется; при частичной непрозрачности он может измениться.

Источники и метод

Результаты отражают только числовой контраст заданной пары и не подтверждают соответствие WCAG.

SVG в PNG

Преобразуйте SVG-файл или вставленный код в PNG: задайте размер, прозрачный фон или цвет и используйте встроенные шрифты.

Открыть инструмент — SVG в PNG

Генератор CSS-фильтров

Настройте порядок эффектов, сравните образец и скопируйте объявление filter.

Открыть инструмент — Генератор CSS-фильтров

Калькулятор плавного размера шрифта

Задайте размеры шрифта для двух значений ширины окна. Скопируйте CSS с единицами rem и изучите модель, рассчитанную по тем же коэффициентам, что и в коде.

Открыть инструмент — Калькулятор плавного размера шрифта

Генератор CSS-кнопок

Настройте состояния кнопки, проверьте фокус клавиатуры и скопируйте HTML и CSS.

Открыть инструмент — Генератор CSS-кнопок

Генератор CSS border-radius

Настройте восемь радиусов, посмотрите результат и скопируйте CSS в пикселях или процентах.

Открыть инструмент — Генератор CSS border-radius

Генератор CSS Grid

Создайте пример CSS Grid с дорожками, размещением и именованными областями. Просматривайте, копируйте CSS и HTML или скачивайте полный пример.

Открыть инструмент — Генератор CSS Grid

Генератор CSS Flexbox

Создайте пример Flexbox с элементами управления контейнером и элементами, явными осями макета, соответствующими CSS и HTML, а также локальной загрузкой полного примера.

Открыть инструмент — Генератор CSS Flexbox

Генератор CSS-тени текста

Создавайте упорядоченные тени текста, просматривайте пример и копируйте точный CSS.

Открыть инструмент — Генератор CSS-тени текста

Генератор преобразований CSS

Создавайте повторяемые двумерные преобразования CSS, редактируйте px или процентный перевод и начало координат, проверяйте поле ссылки и копируйте точные текущие объявления.

Открыть инструмент — Генератор преобразований CSS