Проверка пар цветов на доступность
Проверьте цветовой контраст WCAG 2.x между цветом текста и цветом фона: получите точный коэффициент контраста, результат «прошло/не прошло» для AA и AAA для обычного и крупного текста, а также рекомендуемый доступный цвет текста, если пара не прошла проверку.
Ввод
Цвет текста.
Цвет позади текста.
Вывод
| Показатель | Значение |
|---|---|
| No data yet | |
Ближайшая корректировка яркости вашего цвета текста, которая проходит WCAG AA для обычного текста. Без изменений, если ваша пара уже проходит.
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/accessible-color-pair-finder \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"foregroundColor": "#000000",
"backgroundColor": "#FFFFFF"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `accessible-color-pair-finder` tool (Accessible Color Pair Finder) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/accessible-color-pair-finder/"
width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
title="Проверка пар цветов на доступность — iotools.cloud"
sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
allow="clipboard-write"
style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>Вставьте это на свою страницу — бесплатно, без ключа, нужна лишь обратная ссылка.
| Стоимость вызова API/MCP | От 5 кредитов |
|---|---|
| Нужно больше кредитов? | Посмотреть тарифы |
Также доступно через
Руководства
Выберите цвет текста и цвет фона — и этот инструмент проверит, соответствует ли пара требованиям к контрасту Web Content Accessibility Guidelines (WCAG) — стандарту, который используют аудиты доступности, Lighthouse и большинство законодательных требований к цифровой доступности (ADA, EN 301 549, Section 508).
Что такое цветовой контраст WCAG?
WCAG 2.x определяет две формулы. Во-первых, относительная яркость — насколько ярким кажется цвет, с учетом того, как человеческий глаз воспринимает красный, зеленый и синий (L = 0.2126×R + 0.7152×G + 0.0722×B, с использованием линеаризованных каналов sRGB). Во-вторых, коэффициент контраста между двумя цветами — (L1 + 0.05) / (L2 + 0.05), где более светлая яркость делится на более темную, — который варьируется от 1:1 (одинаковые цвета) до 21:1 (чисто черный на чисто белом).
WCAG устанавливает минимальные коэффициенты, чтобы текст был читаем для людей с ослабленным зрением или нарушениями цветовосприятия:
- AA, обычный текст: 4.5:1
- AA, крупный текст (≥18pt или ≥14pt полужирный): 3:1
- AAA, обычный текст: 7:1
- AAA, крупный текст: 4.5:1
AA — это планка, на которую ориентируется большинство сайтов: именно его требуют аудиты доступности и большинство правовых стандартов. AAA строже и в основном актуален для государственных продуктов или продуктов с высокими требованиями к доступности.
Как пользоваться
- Выберите цвет текста — введите значение hex или воспользуйтесь пипеткой.
- Выберите цвет фона.
- Таблица результатов мгновенно обновляется: точный коэффициент контраста и значок «прошло/не прошло» для всех четырех порогов (AA/AAA × обычный/крупный).
- Если пара не проходит AA для обычного текста, инструмент также вычисляет рекомендуемый доступный цвет текста — ближайшую корректировку яркости вашего исходного цвета (темнее или светлее, в зависимости от того, какое изменение визуально меньше), которая достигает 4.5:1, сохраняя тот же оттенок и насыщенность.
Часто задаваемые вопросы
Почему одна и та же пара иногда проходит для крупного текста, но не проходит для обычного? Крупный и жирный текст легче читается при более низком контрасте, поэтому WCAG смягчает коэффициент до 3:1 (AA) или 4.5:1 (AAA) для текста не меньше 18pt или 14pt полужирного.
Влияет ли на это дальтонизм? Коэффициент контраста — это расчет яркости, а не разницы цветов, поэтому он довольно устойчив к распространенным формам нарушения цветовосприятия — но он не заменяет проверку того, что информация не передается только оттенком (например, для «красный = ошибка» нужен еще и значок или текстовая подпись).
Почему рекомендуемый цвет текста — не тот оттенок, который я ввел? Это тот же оттенок и та же насыщенность — меняется только яркость, в ту сторону (к черному или к белому), которая достигает 4.5:1 с наименьшим отклонением от вашего исходного цвета.
А если мне нужно соответствие AAA? Проверьте строки AAA в таблице результатов. Функция рекомендуемого цвета сейчас нацелена на AA для обычного текста (4.5:1) — порог, который используют большинство аудитов; цвет, соответствующий AA, не всегда соответствует AAA.
Передаются ли мои данные о цвете куда-либо? Нет — все вычисления выполняются полностью в вашем браузере. Ничего не загружается и не сохраняется.