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

Перевір свої кольори

Перевірте комбінації кольорів, щоб переконатися, що вони відповідають стандартам доступності WCAG для читабельності тексту.

1.00:1

Контраст

Не пройдено

Дуже погано

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

AA (4.5:1)

AAA (7:1)

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

AA (3:1)

AAA (4.5:1)

Колір тексту

Колір фону

Швидкі виправлення

Заголовок попереднього перегляду

Швидка руда лисиця стрибає через ледачого собаку

Приклад малого тексту (12px)

Текст

#ffffff

Фон

#e57000

Стандарти WCAG

Рівень AA

Мінімальний коефіцієнт контрастності 4.5:1 для нормального тексту і 3:1 для великого тексту. Потрібно для більшості вебсайтів.

Рівень AAA

Покращений коефіцієнт контрастності 7:1 для нормального тексту і 4.5:1 для великого тексту. Рекомендується для оптимальної доступності.

Недостатній контраст для всіх розмірів тексту - не відповідає стандартам WCAG.

Розрахуйте коефіцієнт контрастності тексту та кольору фону.

Виберіть колір за допомогою вибору кольору для тексту та кольору фону або введіть колір у форматі шістнадцяткових RGB (наприклад, #259 або #2596BE). Ви можете налаштувати слайдер для вибору кольору. Веб-стандарти доступності контенту (WCAG) мають спеціальні керівництва, щоб перевірити, чи є текст читабельним для людей з нормальним зором. Цей критерій використовує спеціальний алгоритм для перетворення комбінацій кольорів у порівняльні коефіцієнти. Згідно з цією формулою, WCAG зазначає, що 4.5:1 коефіцієнт контрастності тексту та фону є адекватним для звичайного тексту, а великий текст (18+ пунктів звичайний, або 14+ пунктів жирний) повинен мати щонайменше 3:1 коефіцієнт контрастності.

Ключові особливості

Розрахунок коефіцієнта контрасту в реальному часі
Перевірка відповідності WCAG AA & AAA
Повзунки HSL для точного налаштування
Кілька форматів попереднього перегляду

Розширені інструменти

Автоматичне виправлення кольору
Зразки тексту та фону
Визначення назви кольору
Експорт результатів

Часті запитання

Для відповідності WCAG AA звичайний текст потребує мінімального коефіцієнта контрастності 4,5:1, а великий текст (18pt або 14pt напівжирним) потребує 3:1.

WCAG AAA вимагає вищих коефіцієнтів контрастності: 7:1 для звичайного тексту та 4,5:1 для великого тексту, тоді як AA вимагає відповідно 4,5:1 і 3:1.

Скористайся функцією автоматичного виправлення, щоб налаштувати текст або фон зі збереженням задуму дизайну, або вручну відрегулюй кольори повзунками HSL, де візуальні індикатори показують оптимальні зони для відповідності AA/AAA.

Зелені зони та позначки AA/AAA показують оптимальні діапазони для відповідності WCAG. Підказки напрямку (Світліше/Темніше) допоможуть досягти кращого контрасту залежно від твоєї поточної комбінації кольорів.

Так, можна ввести будь-який HEX-код кольору або скористатися вибором кольору, щоб обрати власні кольори. URL оновлюється автоматично, тож ти можеш поділитися конкретними комбінаціями кольорів.