Сетка контрастности цветов
Проверьте коэффициенты контрастности WCAG 2.x для всей цветовой палитры сразу: вставьте список шестнадцатеричных цветов и получите полную попарную сетку с точным коэффициентом и результатом AA для каждой комбинации — идеально для проверки цветовой палитры системы дизайна на доступность.
Ввод
Один шестнадцатеричный цвет на строку, или разделенные запятыми (например "#000000, #FFFFFF, #FF0000"). До 12 цветов; недопустимые записи пропускаются.
Вывод
| No data yet |
Другие способы использовать этот инструмент
REST API
curl -X POST https://api.iotools.cloud/v1/tool/color-contrast-grid \
-H "Authorization: Bearer YOUR_API_KEY" \
-H "Content-Type: application/json" \
-d '{
"colors": "#000000\n#FFFFFF\n#808080"
}'Подставьте свой собственный ключ из аккаунта. Поля инструмента — это тело запроса, без обёртки.
Спросите у ИИ-агента
Use the IOTools `color-contrast-grid` tool (Color Contrast Grid) on this input:
YOUR_INPUT_HEREВставьте это любому агенту, подключённому к MCP-серверу IOTools, и добавьте свой ввод.
Виджет для встраивания
<iframe
src="https://iotools.cloud/embed/color-contrast-grid/"
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 кредитов |
|---|
Также доступно через
Руководства
Большинство проверок контрастности сравнивают один цвет переднего плана и один цвет фона одновременно. Системы дизайна редко ограничиваются одной парой — палитра может содержать пять цветов бренда, три нейтральных и два цвета акцента, и любой из них может оказаться текстом на любом другом. Сетка контрастности цветов проверяет всю палитру сразу: вставьте список шестнадцатеричных цветов и получите полную попарную матрицу с точным коэффициентом контрастности WCAG 2.x и результатом AA для каждой комбинации.
Что такое контрастность цветов WCAG?
WCAG 2.x определяет relative luminance — насколько ярким выглядит цвет, взвешенный по восприятию человеческим глазом красного, зеленого и синего (L = 0.2126×R + 0.7152×G + 0.0722×B, с использованием линеаризованных каналов sRGB) — и contrast ratio между двумя цветами, (L1 + 0.05) / (L2 + 0.05) (светлее над темнее), который варьируется от 1:1 (идентичные цвета) до 21:1 (чистый черный на чистом белом). Пороговое значение WCAG AA для обычного текста составляет 4.5:1 — стандарт, который требуют большинство проверок доступности, Lighthouse и правовые стандарты (ADA, EN 301 549, Section 508). Этот инструмент отмечает каждую ячейку, которая преодолевает 4.5:1 с ✓ и каждую ячейку, которая не преодолевает, с ✗.
Как это использовать
- Вставьте свою палитру в поле Цвета — один шестнадцатеричный цвет на строку, или разделенные запятыми (например
#000000, #FFFFFF, #FF0000). Трехзначный шестнадцатеричный код (#fff) тоже работает. - Сетка обновляется мгновенно: первая строка и первый столбец перечисляют ваши цвета, и каждая другая ячейка показывает коэффициент контрастности цвета этой строки, используемого как текст на цвете этого столбца как фон, например
4.53:1 ✓. - Отсканируйте сетку на предмет ячеек ✗ — это пары, которые не прошли бы проверку WCAG AA для обычного текста при использовании вместе, и стоит их избежать или отрегулировать.
- Используйте Copy или Download, чтобы экспортировать сетку как CSV для проверки системы дизайна или комментария pull-request.
Каждая сетка поддерживает до 12 цветов (144 ячейки) — достаточно для большинства палитр брендов и нейтральных интерфейсов сразу. Любая запись, которая не является допустимым 3- или 6-значным шестнадцатеричным цветом, пропускается, а не нарушает сетку, и дублирующиеся цвета сворачиваются в один.
FAQ
Почему диагональ всегда 1.00:1 и отмечена ✗? Цвет, сравниваемый с самим собой, имеет идентичную светимость, поэтому коэффициент всегда ровно 1:1 — минимально возможный и намного ниже порога AA 4.5:1. Это ожидаемо; диагональ не является значимой парой (никто не устанавливает текст и фон на одинаковый цвет), это просто побочный продукт того, что сетка является N×N.
Симметрична ли сетка? Да — коэффициент контрастности симметричен по определению (зависит только от того, какая светимость светлее, а какая темнее, а не от того, какой цвет является «передним планом»), поэтому цвет A на цвете B всегда равен цвету B на цвете A.
Что означает отметка ✓/✗ — это AA или AAA? Отметка прохождения использует WCAG AA для обычного текста (≥4.5:1), пороговое значение, которое проверяют большинство проверок и правовые стандарты. Пара, отмеченная ✗, может все еще соответствовать более мягкому пороговому значению AA для крупного текста (3:1); для подробного разбора одной пары по всем четырем пороговым значениям WCAG (AA/AAA × normal/large), включая предложенный доступный цвет, используйте Accessible Color Pair Finder.
Могу ли я вставлять цвета с именами или дополнительным текстом после них?
Инструмент ищет допустимый шестнадцатеричный цвет в начале каждой строки или записи, разделенной запятыми — текст, отформатированный как #RRGGBB или #RGB. Все, что не является узнаваемым шестнадцатеричным цветом, пропускается, поэтому содержите каждую запись только самого цвета.
Почему ограничивать список 12 цветами? Сверх 12 цветов сетка растет до 144+ ячеек и становится сложной для визуального сканирования — если вам нужно проверить большую палитру, разделите ее на меньшие связанные группы (например, нейтральные, затем цвета бренда).
Отправляются ли мои данные о цветах куда-нибудь? Нет — каждый расчет выполняется полностью в вашем браузере. Ничего не загружается и не сохраняется.