Категории

← View All Tools

Проверка контраста доступной цветовой палитры

Проверяет пары цветов по WCAG 2.1 AA и AAA и предлагает корректировки

Подходит для дизайн-систем, брендовых палитр и тем интерфейса с рекомендациями по улучшению.

Примеры результатов

1 Примеры

Проверить фирменную палитру по WCAG AA

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

{
  "summary": {
    "colorCount": 4,
    "combinationCount": 12,
    "failingCount": 4
  },
  "recommendations": [
    {
      "pair": "brand-secondary on surface"
    }
  ]
}
Показать параметры ввода
{ "paletteInput": "brand-primary: #2563EB\nbrand-secondary: #F59E0B\nsurface: #FFFFFF\ntext: #111827", "minimumTarget": "aa", "includeSelfPairs": false }

Ключевые факты

Категория
Design
Типы входных данных
textarea, select, checkbox
Тип результата
json
Покрытие примерами
4
API доступен
Yes

Обзор

Инструмент для проверки контраста цветовой палитры помогает дизайнерам и разработчикам автоматически анализировать все возможные комбинации цветов на соответствие стандартам доступности WCAG 2.1 (AA и AAA). Просто введите ваши фирменные цвета, и утилита рассчитает коэффициенты контрастности, выявит проблемные пары и предложит рекомендации по их улучшению для создания инклюзивных интерфейсов и дизайн-систем.

Когда использовать

  • •При разработке новой дизайн-системы или UI-кита для проверки всех базовых цветов на читаемость.
  • •Во время аудита доступности (accessibility audit) существующего веб-сайта или мобильного приложения.
  • •При адаптации фирменного стиля бренда для цифровых продуктов, чтобы убедиться в соответствии стандартам WCAG.

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

  • •Введите список цветов вашей палитры в формате «название: HEX-код» (например, surface: #FFFFFF).
  • •Выберите целевой стандарт доступности WCAG (например, AA для обычного текста или AAA для максимального контраста).
  • •Укажите, нужно ли проверять сочетания одинаковых цветов между собой.
  • •Получите подробный JSON-отчет с анализом всех пар, списком непрошедших проверку комбинаций и рекомендациями по корректировке.

Сценарии использования

Массовая проверка контрастности токенов в дизайн-системах перед передачей в разработку.
Оценка читаемости текста на различных фоновых плашках для маркетинговых лендингов и баннеров.
Создание темных и светлых тем интерфейса (Dark/Light mode) с гарантированным соблюдением инклюзивности.

Примеры

1. Аудит базовой палитры бренда

UX/UI Дизайнер
Контекст
Дизайнер создает новый UI-кит и хочет убедиться, что основной синий цвет бренда хорошо читается на белом и сером фонах.
Проблема
Вручную проверять каждую пару цветов в палитре долго и есть риск пропустить неконтрастные сочетания.
Как использовать
Ввести список цветов в поле «Цвета палитры» и выбрать цель «AA Normal Text (4.5:1)».
Пример конфигурации
brand-primary: #2563EB
brand-secondary: #F59E0B
surface: #FFFFFF
text: #111827
Результат
Инструмент генерирует отчет, показывающий, что brand-secondary на surface не проходит проверку, и предлагает скорректировать оттенки.

2. Проверка контраста для крупного текста

Веб-разработчик
Контекст
Разработчик верстает заголовки крупного размера (более 24px) и хочет использовать более мягкие цвета, допустимые стандартом.
Проблема
Нужно проверить, соответствует ли выбранная пара цветов смягченным требованиям WCAG для крупных шрифтов.
Как использовать
Вставить HEX-коды текста и фона, затем выбрать в настройках «AA Large Text (3:1)».
Пример конфигурации
heading: #8B5CF6
background: #F3F4F6
Результат
Отчет подтверждает, что контрастность превышает 3:1, что делает комбинацию валидной для крупных заголовков.

Проверить на примерах

design
Примеры цветовых кодов
Коллекция цветовых кодов в различных форматах (Hex, RGB, HSL, именованные цвета) для тестирования валидации
title token color
sample
Примеры Storybook
Комплексные примеры Storybook для разработки компонентов, тестирования, документации и управления системами дизайна
keywords design,system
sample
Образцы Анализатора Путей
Комплексная коллекция путей файловой системы из Windows, Linux и macOS для анализа и тестирования путей
task analyze
sample
SVG Примеры
Примеры масштабируемой векторной графики (SVG) демонстрирующие различные возможности и техники SVG
keywords design
sample

Связанные хабы

Инструменты Design для Convert
Изучите 98 инструментов design для сценариев convert и быстро сравните близкие утилиты.
Инструменты Design для Generate
Изучите 19 инструментов design для сценариев generate и быстро сравните близкие утилиты.
Инструменты Validation для Validate
Изучите 16 инструментов validation для сценариев validate и быстро сравните близкие утилиты.

FAQ

Что такое стандарты WCAG AA и AAA?

WCAG (Web Content Accessibility Guidelines) — это руководство по доступности веб-контента. Уровень AA требует минимального контраста 4.5:1 для обычного текста, а AAA — 7:1.

Как правильно вводить цвета в инструмент?

Цвета нужно вводить списком, где каждая строка содержит название цвета и его HEX-код, разделенные двоеточием. Например: primary: #2563EB.

Что делать, если пара цветов не прошла проверку?

Инструмент покажет проблемные комбинации в отчете. Вам потребуется сделать светлый цвет еще светлее, а темный — темнее, чтобы увеличить коэффициент контрастности.

Можно ли проверить контраст для крупного текста?

Да, в настройках можно выбрать цели «AA Large Text» (контраст 3:1) или «AAA Large Text» (контраст 4.5:1), которые применяются для шрифтов от 18pt или 14pt bold.

Поддерживаются ли форматы цветов кроме HEX?

В данный момент инструмент оптимизирован для работы с HEX-кодами (например, #FFFFFF или #000000).

Документация API

Конечная точка запроса

POST /ru/api/tools/accessible-color-palette-contrast-checker

Параметры запроса

Имя параметра Тип Обязательно Описание
paletteInput textarea Да -
minimumTarget select Нет -
includeSelfPairs checkbox Нет -

Формат ответа

{
  "key": {...},
  "metadata": {
    "key": "value"
  },
  "error": "Error message (optional)",
  "message": "Notification message (optional)"
}
Данные JSON: Данные JSON

Документация MCP

Добавьте этот инструмент к конфигурации сервера MCP: 

{
  "mcpServers": {
    "elysiatools-accessible-color-palette-contrast-checker": {
      "name": "accessible-color-palette-contrast-checker",
      "description": "Проверяет пары цветов по WCAG 2.1 AA и AAA и предлагает корректировки",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=accessible-color-palette-contrast-checker",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Вы можете объединять несколько инструментов, например: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, максимум 20 инструментов.

Если вы столкнулись с проблемами, пожалуйста, свяжитесь с нами по адресу [email protected]