Вставте колір переднього плану та фону (або виберіть зі скріншоту); отримайте коефіцієнт контрастності та рівні WCAG, яким він відповідає. WCAG 2.1 AA є юридичним базовим рівнем доступності в більшості юрисдикцій; AAA — вищий стандарт, рекомендований для критичного контенту.
Пороги
- WCAG AA, звичайний текст: мінімум 4.5:1.
- WCAG AA, великий текст (18pt+ або 14pt+ жирний): мінімум 3:1.
- WCAG AAA, звичайний текст: мінімум 7:1.
- WCAG AAA, великий текст: мінімум 4.5:1.
- Нетекстові компоненти інтерфейсу (кнопки, межі форм): мінімум 3:1 (WCAG 2.1+).
Чому контрастність важлива
Текст із низькою контрастністю нечитабельний для користувачів із поганим зором (близько 4% населення), користувачів при яскравому сонячному світлі, на дешевих моніторах і для старіючих очей (усіх, зрештою). Багато дизайн-систем за замовчуванням використовують сірий на сірому, тому що це виглядає елегантно на відкаліброваному 5K-дисплеї дизайнера — і є нечитабельним в інших умовах.
Невідповідність WCAG AA також може мати юридичні наслідки в США (ADA Title III), ЄС (EAA) та багатьох інших юрисдикціях. Дешева страховка: перевіряйте кожну пару текст/фон перед випуском.
Що ми повідомляємо
- Коефіцієнт контрастності у вигляді числа (наприклад, 4.71:1).
- Пройдено/не пройдено для кожного рівня WCAG та розміру тексту.
- Запропоновані виправлення: найближчий темніший колір переднього плану або світліший фон, які пройдуть перевірку.
- Попередній перегляд із зразком тексту в цій парі кольорів.
Поєднуйте з симулятором дальтонізму
Контрастність і дальтонізм — різні осі доступності. Запустіть Color Blindness Simulator на тому ж інтерфейсі, щоб переконатися, що він працює і для користувачів із CVD.
Часті запитання
Що таке 'великий текст'?
WCAG: 18pt звичайний або 14pt жирний. Приблизно 24px звичайний або 19px жирний у CSS.
Чи працює це на градієнтах?
Перевірте найгіршу точку — зазвичай найсвітлішу частину градієнта на тлі вашого переднього плану.
Чи можу я перевірити зі скріншоту?
Так — завантажте скріншот і натисніть кольори переднього плану та фону.
Який мінімально прийнятний коефіцієнт контрастності?
WCAG AA: 4,5:1 для основного тексту. Все, що нижче, не відповідає вимогам.
Чи завжди темніше означає краще?
Вищий контраст кращий для читабельності. Але чистий чорний на чистому білому може бути різким; багато систем використовують #1A1A1A на #FAFAFA для трохи м'якшого контрасту, який все ще відповідає стандарту AAA.
А як щодо контрасту іконок?
WCAG 2.1 додав мінімум 3:1 для нетекстових компонентів інтерфейсу — кнопок, меж форм, кілець фокусу.
Чи можу я перевірити колірні пари пакетно?
Premium: вставте CSV з парами та отримайте всі співвідношення в одному звіті.
Чи є завантаження приватними?
Так — видаляються протягом 24 годин.
Про Перевірка контрастності
Перевірка контрастності — це безкоштовний онлайн-інструмент від Wallpapers.com, який працює повністю у вашому браузері — без встановлення, без водяних знаків, без реєстрації електронної пошти для першої спроби.
Перевірте, чи пара кольорів переднього плану / фону відповідає стандартам доступності WCAG.
Як використовувати Перевірка контрастності
- Перетягніть зображення в область завантаження (одне або кілька — увімкніть Bulk зверху).
- Виберіть будь-які налаштування, які пропонує інструмент (розмір, формат, якість).
- Натисніть Run. Результат завантажиться автоматично — без ручного збереження.
Коли це використовувати
Типові випадки використання:
підготовка зображень для веб-завантаження, списків товарів в e-commerce, платформ соцмереж з обмеженнями формату та конвертація файлів між пристроями або додатками.
Безкоштовно проти Premium
Кожен відвідувач отримує безкоштовний пробний запуск; авторизовані безкоштовні користувачі мають вищу денну квоту. Підпишіться на
Преміум
для необмежених запусків, пакетної обробки до 200 зображень за завдання, пріоритетної черги та перегляду без реклами.
Пов'язані інструменти
Шукаєте щось інше? Спробуйте
EXIF Stripper
,
Видалити EXIF-метадані
або
EXIF Viewer
— або перегляньте всі
Метадані та доступність Інструменти.
