Перевірка контрасту кольорів
Великий заголовок (24px)
Звичайний текст 14-16px. Більшість текстів інтерфейсу, міток і абзаців належать до цієї категорії, тому вона має найсуворіші вимоги до контрасту.
Про перевірку контрасту кольорів
Коефіцієнт контрасту вимірює, наскільки текст відрізняється від тла, за шкалою від 1:1 (однакові) до 21:1 (чорний на білому). WCAG вимагає щонайменше 4.5:1 для звичайного тексту та 3:1 для великого на рівні AA, і 7:1 / 4.5:1 на рівні AAA.
Ця перевірка обчислює коефіцієнт з відносної яскравості точно за визначенням WCAG 2.x, показує результати pass/fail для кожного рівня та демонструє ваші кольори на реальному тексті. Приймаються нотації HEX, RGB та HSL.
Як перевірити контраст кольорів
- Введіть колір тексту в HEX, RGB чи HSL або скористайтеся піпеткою.
- Введіть колір тла, на якому розміщено текст.
- Прочитайте коефіцієнт контрасту та результати AA/AAA.
- Коригуйте кольори, поки всі потрібні перевірки не пройдуть, і скопіюйте звіт.
Поради з доступності
- Великий текст — це від 24px звичайним або близько 18.66px жирним; лише тоді діє поріг 3:1.
- Перевіряйте стани hover, focus, disabled та placeholder — вони часто використовують світліші відтінки, що не проходять.
- Компоненти інтерфейсу та іконки потребують щонайменше 3:1 відносно сусідніх кольорів (WCAG 1.4.11).
- Тестуйте темну тему окремо; інвертовані палітри змінюють кожен коефіцієнт.
Пов’язані гайди
Дізнайся workflow за цим інструментом і що перевіряти далі.
Technical SEO checks перед відправкою сайту
Фокусний checklist, щоб search engines могли знайти, просканувати, зрозуміти й проіндексувати важливі сторінки.
Як debug JSON API responses
Відформатуйте response, перевірте HTTP status, validate schema і порівняйте payload changes перед змінами в application code.
Що перевірити перед релізом кольорової палітри
Прохідний коефіцієнт — це базовий рівень, а не фініш. Перевірте, як пара поводиться в реальних станах інтерфейсу.
Тестуйте обидві теми
Пара, що проходить на світлому тлі, може провалитися після інверсії в темній темі. Перевіряйте кожну тему, яку випускаєте.
Перевіряйте інтерактивні стани
Hover, focus, disabled та visited часто використовують світліші відтінки, які непомітно падають нижче 4.5:1.
Не покладайтеся лише на колір
Поєднуйте колір з іконками, підкресленнями чи текстовими мітками, щоб інформація переживала порушення колірного зору.
Перевіряйте припущення про великий текст
Полегшений поріг 3:1 діє лише від 24px або 18.66px жирним. Перевіряйте фактичний розмір, а не дизайн-токен.
Приватність і використання
Швидкі перевірки без акаунта
Toolinix створений для коротких developer tasks: вставити безпечний приклад, перевірити результат, скопіювати потрібне й рухатися далі.
Без логіну
Інструменти можна використовувати без акаунта, підписки на розсилку або збереження робочого простору.
Локально, коли можливо
Форматери, генератори, енкодери та текстові утиліти зазвичай працюють у браузері. Network diagnostics можуть потребувати server-assisted lookup для перевірки публічних URL, доменів або IP.
Не вставляй секрети
Не вставляй production passwords, private keys, access tokens, дані клієнтів або regulated data в онлайн-інструменти, якщо це не дозволено твоєю security policy.
Пов’язані інструменти
Можливо, тобі також стануть у пригоді ці інструменти.