Перевірка доступності кольорів — контраст WCAG і симуляція дальтонізму

Інструмент для перевірки контрастності за WCAG 2.1: тестуйте будь-які комбінації кольорів на відповідність стандартам доступності. Перевіряйте читабельність тексту для рівнів AA та AAA — необхідно для інклюзивного вебдизайну.

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

Оберіть або введіть кольори переднього плану та фону за допомогою палітри або полів HEX/RGB.

Перегляньте попередній перегляд тексту та результати перевірки на відповідність WCAG AA/AAA.

Ознайомтеся з панеллю симуляції дальтонізму, щоб побачити, як кожен тип порушення сприйняття впливає на ваші кольори.

Якщо будь-яка перевірка не пройдена, натисніть на запропоновану альтернативу, щоб миттєво виправити пару кольорів.

Використовуйте режим перевірки палітри, щоб проаналізувати всі комбінації з вашої дизайн-системи.

Перевірте пари кольорів на відповідність WCAG і розрізнюваність для людей з дальтонізмом

Оберіть два кольори, щоб перевірити контрастність і видимість для людей з порушеннями сприйняття кольорів.

Передній план

Фон

Великий текст (18pt+)

Попередній перегляд заголовка

Звичайний текст (16px)

Швидка бура лисиця перестрибує через ледачого собаку.

Попередній перегляд основного тексту — так ваші користувачі бачитимуть цю комбінацію кольорів у реальному контенті.

Контраст WCAG 2.1

AA: 4.5:1 для звичайного тексту, 3:1 для великого. AAA: 7:1 / 4.5:1.

12.63:1

AA Звичайний Пройдено

AA Великий Пройдено

AAA Звичайний Пройдено

AAA Великий Пройдено

Симуляція дальтонізму

Як ваша пара кольорів виглядає для людей з різними типами порушень сприйняття кольорів.

Запропоновані альтернативи

Доступні варіанти кольорів, які проходять перевірку WCAG AA і розрізняються за всіх типів дальтонізму.

Перевірка палітри

Вставте 3–10 HEX-кольорів (по одному на рядок або через кому), щоб перевірити всі пари комбінацій.

Можливості

Коефіцієнт контрасту WCAG 2.1 з відзнаками AA/AAA

Відображає точний коефіцієнт і показує, чи перевищує він 4.5:1 для основного тексту або 3:1 для великого — порогові значення, які перевіряють аудитори та фахівці з дотримання вимог ADA.

Симуляція дальтонізму для 4 типів порушень сприйняття кольорів (протанопія, дейтеранопія, тританопія, ахроматопсія)

Показує вашу пару кольорів так, як її бачать ~8% чоловіків із порушеннями сприйняття червоного або зеленого, — виявляє комбінації, які виглядають нормально для вас, але зникають для них.

Автоматичне пропонування доступних альтернатив при невдалій перевірці

Якщо комбінація не проходить перевірку, інструмент коригує яскравість, зберігаючи відтінок, і пропонує близький колір, що відповідає стандартам і вписується у ваш бренд.

Режим перевірки палітри: аналіз усіх пар із 3–10 кольорів одночасно

Вставте всю палітру дизайн-системи й отримайте оцінку кожного поєднання переднього плану та фону за один прохід — без ручної перевірки кожної комбінації.

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

Що таке коефіцієнт контрасту WCAG?

Настанови з доступності вебвмісту (WCAG) визначають мінімальні коефіцієнти контрасту між кольорами тексту та фону. Рівень AA вимагає 4.5:1 для звичайного тексту та 3:1 для великого (18pt+). Рівень AAA вимагає 7:1 для звичайного та 4.5:1 для великого тексту. Вищий коефіцієнт — краща читабельність.

Що таке дальтонізм (CVD)?

Порушення кольорового зору (CVD) зустрічається приблизно у 8% чоловіків та 0.5% жінок у всьому світі. Найпоширеніші типи — протанопія (відсутність сприйняття червоного) та дейтеранопія (відсутність сприйняття зеленого). Цей інструмент симулює, як ваші пари кольорів виглядають для людей із кожним із типів, допомагаючи створювати дизайн для всіх.

Як працює функція автоматичного пропонування?

Якщо ваша пара кольорів не проходить перевірку WCAG або CVD, інструмент шукає близькі кольори, що задовольняють усі критерії. Він коригує яскравість, зберігаючи схожий відтінок, тому запропоновані кольори залишаються близькими до вашого задуму і водночас є доступними.

Що таке Delta E і чому це важливо?

Delta E (CIE2000) вимірює сприйняту різницю між двома кольорами. Delta E менше 1 означає, що два кольори практично ідентичні для людського ока. Для забезпечення доступності рекомендуємо мінімальне значення Delta E 10 між переднім планом і фоном за всіх типів симуляції дальтонізму.

💡 Хочете, щоб ми покращили цей інструмент спеціально для вас?

Звичайно! Просто надішліть нам коротке повідомлення з вашою ідеєю. Якщо хочете обговорити детальніше — залиште email, і ми зв’яжемося з вами. Можна залишитися анонімом.

Як ви оцінюєте цей інструмент?

Дякуємо за вашу оцінку!

Змінити мою оцінку

Хочете залишити коментар?

Хочете розповісти більше? Залиште коментар!

Дякуємо! Ваш коментар з’явиться після модерації.

Для кого цей інструмент?

💻 Розробники та ІТ-спеціалісти ♿ Користувачі з особливими потребами

Опубліковано 08 бер 2026 Оновлено 01 тра 2026 Автор: Верховний