Оберіть мову

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

Перевірка контрастності кольорів WCAG для обчислення коефіцієнта контрастності тексту.

Колір переднього плану

Будь ласка, введіть чинну hex трійцю або скористайтеся інструментом вибору кольору.

Колір фону

Будь ласка, введіть чинну hex трійцю або скористайтеся інструментом вибору кольору.

Коефіцієнт контрастності 21:1

Звичайний текст

WCAG AA: Pass

WCAG AAA: Pass

Приклад звичайного тексту - 16px

Великий текст

WCAG AA: Pass

WCAG AAA: Pass

Приклад великого тексту 18pt/24px

Графічні об'єкти та компоненти інтерфейсу користувача

WCAG AA:  Pass

image/svg+xml
  • Обчислити коефіцієнт контрастності для звичайного розміру тексту.
  • Обчислити коефіцієнт контрастності для великого розміру тексту.
  • Обчисліть коефіцієнт контрастності для компонентів інтерфейсу користувача.
  • Виберіть колір з палітри кольорів
  • Налаштування кольору «Легкість»

Як використовувати перевірку контрасту

  • Виберіть колір тла
  • Виберіть колір переднього плану
  • Відрегулюйте освітленість, якщо потрібно
  • Перевірка аудиту для нормального та великого тексту

FAQ

Як працює перевірка контрасту?

Потрібно оцінити колір тексту і фону. Відповідно до рекомендацій WCAG 2.1, це: Великий текст - Текст з мінімальним розміром 18px вимагає коефіцієнта контрастності 3:1; Маленький текст - Текст розміром менше 18 пікселів вимагає коефіцієнта контрастності 4, 5:1.

Чому мій веб-сайт повинен мати достатній колірний контраст?

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

Що означає доступність веб-сайту?

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

Чи повинні зображення та відео відповідати вимогам щодо контрастності кольорів WCAG?

Певні графічні та інтерфейсні компоненти вимагають коефіцієнта контрастності не менше 3:1. Однак це не включає логотипи, декоративні зображення або загальні мультимедійні файли.

© Smallize Pty Ltd 2022-2024. All Rights Reserved.