MicroTools

Accessible Color Palette Generator

Генеруйте повну AA-сумісну кольорову палітру з вашого фірмового кольору.

Про інструмент Accessible Color Palette Generator

Створюйте повну кольорову палітру дизайн-системи (primary, secondary, neutral, semantic) з гарантованим WCAG AA контрастом для тексту на кожному зразку. Введіть базовий брендовий колір та отримайте шкалу з 9 відтінків з попередньо розрахованими коефіцієнтами контрастності.

Як використовувати

  1. 1Введіть базовий фірмовий колір у форматі hex, RGB або HSL.
  2. 2Шкала з 9 відтінків (від 50 до 900) генерується автоматично.
  3. 3Кожен зразок показує коефіцієнт контрастності з рекомендованим кольором тексту.
  4. 4Перемкніть симуляцію кольорової сліпоти для перевірки візуальної доступності.
  5. 5Натисніть «Копіювати CSS» для експорту як CSS-властивості.

Часті запитання

Як генерується палітра?
Інструмент бере ваш базовий колір та генерує 9 відтінків (50–900) коригуючи яскравість у просторі HSL. Кожен відтінок тестується на контраст з білим та чорним текстом для визначення який використовувати.
Що означає «гарантований AA»?
Кожен зразок у палітрі має щонайменше 4.5:1 коефіцієнт контрастності з рекомендованим кольором тексту (білим або чорним), відповідаючи WCAG 2.1 рівню AA.
Чи можна експортувати палітру як CSS-змінні?
Так — натисніть «Копіювати CSS» для отримання повної палітри як CSS-властивостей готових для вставки у ваш стиль.
Що з кольоровою сліпотою?
Інструмент включає попередній перегляд симуляції кольорової сліпоти (Дейтеранопія, Протанопія, Тританопія) щоб ви могли бачити як палітра виглядає для користувачів з порушенням кольорового зору.

Інформація

Категорія
compliance
Використання
Необмежено

Схожі інструменти

WCAG Contrast Checker

Перевіряйте рівні AA/AAA контрастності для будь-яких двох кольорів. Отримайте виправлення миттєво.

Non-Text Contrast Checker

Перевіряйте контраст 3:1 для рамок, іконок, кілець фокусу та станів UI.

A11y Issue Triage Board

Перетворіть результати аудиту доступності на пріоритизований план виправлень з оцінкою критичності.

Більше інструментів: compliance

WCAG Contrast Checker

Перевіряйте рівні AA/AAA контрастності для будь-яких двох кольорів. Отримайте виправлення миттєво.

Non-Text Contrast Checker

Перевіряйте контраст 3:1 для рамок, іконок, кілець фокусу та станів UI.

Heading Structure Auditor

Знаходьте пропущені рівні, дублікати H1 та зламану ієрархію заголовків в HTML/Markdown.

Link Text Quality Checker

Знаходьте «натисніть тут», дублікати посилань та порожні анкери, що порушують WCAG 2.4.4.