Перевірка колірного контрасту

Do4U перевіряє контраст фірмових кольорів і кольорів сайту. Ти вводиш свої кольори, по одному в рядку, і вказуєш, для чого кожен колір: text, background, accent (наприклад, кнопка) або border. Код обчислює коефіцієнт контрасту кожної пари за формулою WCAG і показує, яких рівнів вона досягає: AA і AAA для звичайного й великого тексту та 3:1 для меж, значків і областей кнопок. Значення не округлюються вгору. Для кожної пари, що не проходить, ти отримаєш найближчий колір, що проходить, – один темніший і один світліший, того самого відтінку. Do4U також складає скориговану палітру й перевіряє її ще раз як ціле. Ти експортуєш палітру як власні властивості CSS, змінні SCSS або JSON, а експорт створюється у твоєму браузері. Усе працює в коді, без ШІ, і безкоштовно.

Спробувати зараз Ціни

Безкоштовно й без облікового запису: Калькулятор коефіцієнта контрасту →

Для кого

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

Типове використання

Перевірити нову фірмову палітру до початку дизайну
Знайти сірий для другорядного тексту, що ще проходить AA
Перевірити кольори кнопок, посилань і меж на тлі сторінки
Експортувати скориговані кольори як змінні CSS для своєї таблиці стилів

Приклад

Ввід

#1a1a1a text #777777 text Secondary #ffffff background #cccccc border

Результат

#1a1a1a на #ffffff: 17.4:1, проходить AA і AAA #777777 на #ffffff: 4.47:1, не проходить AA для звичайного тексту (проходить для великого). Темніший: #767676 → 4.54:1. Світліший: неможливо #cccccc на #ffffff: 1.6:1, не проходить нетекстовий контраст 3:1. Темніший: #949494 → 3.03:1 Експорт (скоригований): :root { --color-text: #1a1a1a; --secondary: #767676; --color-background: #ffffff; --color-border: #949494; }

Фіксований приклад, скорочений. Справжні результати створює ШІ: перевіряй їх.

Ціна й ліміти

Ціна: безкоштовно, до 30 перевірок на день
Доступно з: Безкоштовний, З пакетом
Ліміт вводу: До 3 000 символів на файл

Конфіденційність

Обробка на наших власних серверах у ЄС (Польща). Ввід і результати видаляються через 7 дн. (безкоштовний тариф) або 30 дн. (пакети), а якщо ти вирішиш їх не зберігати — одразу після того, як побачиш результат. Зображення видаляються одразу після обробки.

В API

Назва інструмента: contrast_check. Створи завдання через POST /api/v1/jobs і отримай результат через GET /api/v1/jobs/{id}. Свій ключ API ти знайдеш у своєму акаунті.

curl -X POST https://do4u.eu/api/v1/jobs \
  -H "Authorization: Bearer d4u_…" -H "Content-Type: application/json" \
  -d '{"tool": "contrast_check", "colors": ["#1a1a1a text", "#ffffff background", "#0066cc accent"]}'

Повна документація API →

Запитання та відповіді

Як обчислюється коефіцієнт контрасту?

За формулою WCAG 2.2: спершу відносна яскравість кожного кольору, потім (L1 + 0.05) / (L2 + 0.05), де L1 – світліший колір. Результат лежить між 1:1 і 21:1. Значення порівнюються без округлення, тож 4.49:1 не досягає 4.5:1, і показ ніколи не округлює вгору.

Які пари перевіряються?

Текст перевіряється на кожному тлі й на акцентних кольорах – на 4.5:1 і 7:1 для звичайного тексту та 3:1 і 4.5:1 для великого. Акцентні кольори й кольори меж перевіряються на тлі на 3:1 для нетекстового контрасту. Колір без ролі порівнюється з усіма іншими кольорами.

Як знаходяться запропоновані кольори?

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

Чи зберігається мій текст?

Лише доти, доки це потрібно: 7 дн. на тарифі Free, 30 дн. з пакетом – або взагалі не зберігається, якщо ти вирішиш його не зберігати. Обробка відбувається на наших власних серверах у ЄС (Польща).

Чи можна одразу користуватися результатом?

Результати створені ШІ. Будь ласка, прочитай їх, перш ніж публікувати чи надсилати.

Пов’язані інструменти

Перевірка доступності
Перевіряє сторінку на поширені бар’єри й пояснює, як їх виправити.
Відгук про дизайн за знімком екрана
Завантаж знімок екрана сторінки чи застосунку й отримай пронумеровані конкретні зауваження щодо розміру кнопок, контрасту, тексту на зображеннях, ієрархії та відступів, кожне з рамкою на зображенні. Оцінка ШІ, а не вимірювання.
Альтернативні тексти
Короткі описи зображень для зчитувачів екрана та пошукових систем.

Усі інструменти →