Виберіть колір тексту
Натисніть на першу палітру кольорів, щоб вибрати колір тексту, або введіть шістнадцятковий код безпосередньо.
Виберіть колір фону
Використовуйте другу палітру кольорів, щоб вибрати колір фону для тестування контрасту.
Перегляньте результати контрасту
Перевірте розрахований коефіцієнт контрастності та перегляньте оцінки AA/AAA для звичайного та великого тексту.
Попередній перегляд вашого дизайну
Перегляньте попередній перегляд у реальному часі, щоб побачити, як ваша комбінація кольорів виглядає з фактичним текстовим вмістом.
Тестування контрасту в реальному часі
Миттєво розраховуйте коефіцієнти контрастності, обираючи різні комбінації кольорів тексту та фону.
Оцінки відповідності WCAG
Отримуйте оцінки AA та AAA як для звичайного, так і для великого тексту відповідно до Рекомендацій щодо доступності веб-контенту.
Панель попереднього перегляду в реальному часі
Дивіться, як саме виглядатимуть ваші комбінації кольорів із зразком тексту як звичайного, так і великого розміру.
Візуальний індикатор оцінки
Переглядайте ефективність контрасту за допомогою інтуїтивно зрозумілої кругової діаграми, що показує бали від 0 до 100.
Інтерактивні палітри кольорів
Легко вибирайте кольори за допомогою вбудованих інструментів вибору кольорів як для тексту, так і для фону.
Поради щодо доступності
Отримуйте практичні поради щодо покращення контрасту та відповідності стандартам доступності.
Інструмент перевірки кольорового контрасту – це інструмент, який вимірює різницю в яскравості між кольорами тексту та фону. Він розраховує коефіцієнти контрастності відповідно до стандартів WCAG (Рекомендації щодо доступності веб-контенту), щоб забезпечити читабельність вмісту для користувачів з вадами зору, включаючи дальтонізм та низький зір.
Відповідність WCAG
Переконайтеся, що ваші дизайни відповідають міжнародним стандартам доступності за допомогою точних оцінок AA та AAA.
Зворотний зв'язок у реальному часі
Миттєво бачте результати, змінюючи кольори, що дозволяє легко знаходити комбінації, які відповідають стандартам.
Система візуальної оцінки
Миттєво оцінюйте ефективність контрасту за допомогою нашої інтуїтивно зрозумілої системи оцінки від 0 до 100.
Не потребує встановлення
Миттєво тестуйте комбінації кольорів у своєму браузері без завантаження будь-якого програмного забезпечення.
Для звичайного тексту прагніть до співвідношення щонайменше 4.5:1 для відповідності AA або 7:1 для AAA. Великий текст (18pt або 14pt жирний) потребує 3:1 для AA або 4.5:1 для AAA відповідності.
AA – це стандартний рівень відповідності доступності, який вимагається більшістю нормативних актів. AAA – це найвищий рівень, що забезпечує підвищену доступність для користувачів з більш серйозними вадами зору.
Коефіцієнт контрастності розраховується за відносною яскравістю кольорів, як це визначено рекомендаціями WCAG. Він варіюється від 1:1 (без контрасту) до 21:1 (максимальний контраст).
Великий текст визначається як 18 пунктів (24px) або більше, або 14 пунктів (18.66px) або більше, якщо він жирний. Великий текст має менш суворі вимоги до контрасту.
Хороший кольоровий контраст забезпечує читабельність вмісту для всіх, включаючи користувачів з вадами зору, дальтонізмом, або тих, хто переглядає вміст під яскравим сонячним світлом або на поганих дисплеях.
Інструмент приймає шістнадцяткові коди кольорів. Ви можете конвертувати з інших форматів (RGB, HSL тощо) у шістнадцятковий за допомогою онлайн-конвертерів або дизайнерських інструментів.