У цій статті
Що таке контраст кольорів і чому це важливо
Контраст кольорів — це різниця у яскравості між двома кольорами, зазвичай текстом переднього плану та його фоном. Достатній контраст гарантує, що текст читається всіма, включаючи людей зі зниженим зором або дальтонізмом. Поганий контраст робить контент важким або неможливим для читання, виключаючи мільйони користувачів.
Рекомендації щодо доступності веб-контенту (WCAG) визначають мінімальні коефіцієнти контрасту, що забезпечують читабельність для широкого діапазону зорових можливостей. Дотримання цих стандартів — це не лише найкраща практика, а й законодавча вимога у багатьох юрисдикціях.
Як працюють коефіцієнти контрасту WCAG
WCAG використовує відносну яскравість для розрахунку коефіцієнтів контрасту між двома кольорами. Формула дає коефіцієнт від 1:1 (без контрасту, ідентичні кольори) до 21:1 (максимальний контраст, чорний на білому).
- Відносна яскравість розраховується з лінеаризованих значень sRGB за формулою: L = 0.2126R + 0.7152G + 0.0722B
- Коефіцієнт контрасту: (L1 + 0.05) / (L2 + 0.05), де L1 — світліший колір, L2 — темніший
- Звичайний текст (менше 18pt або 14pt напівжирний) потребує щонайменше 4.5:1 для AA та 7:1 для AAA
Спробуйте безкоштовно — реєстрація не потрібна
Перевірити контраст →Розуміння рівнів відповідності WCAG AA та AAA
WCAG визначає два рівні відповідності для контрасту кольорів. Рівень AA є мінімальним стандартом, який вимагається більшістю нормативних актів щодо доступності, тоді як AAA забезпечує підвищену доступність для користувачів із серйознішими порушеннями зору.
- AA звичайний текст — вимагає коефіцієнта контрасту щонайменше 4.5:1 для тексту менше 18pt (або 14pt напівжирний)
- AA великий текст — вимагає щонайменше 3:1 для тексту 18pt і більше (або 14pt напівжирний і більше)
- AAA звичайний текст — вимагає щонайменше 7:1 для найвищого рівня читабельності
- AAA великий текст — вимагає щонайменше 4.5:1 для великого тексту на підвищеному рівні
- Нетекстовий контраст — компоненти інтерфейсу та графічні об'єкти потребують щонайменше 3:1 проти сусідніх кольорів
Поради щодо доступного дизайну кольорів
Дизайн з урахуванням доступності не означає жертвування естетикою. Ці практичні поради допоможуть створити красиві дизайни, якими зможуть користуватися всі.
- Починайте з контрасту — спочатку оберіть кольори тексту та фону, потім будуйте палітру навколо них
- Ніколи не покладайтеся лише на колір — використовуйте іконки, візерунки або підписи разом із кольором
- Тестуйте з реальним контентом — заповнювач може виглядати добре, але реальний контент може виявити проблеми
- Розглядайте темний режим окремо — кольори, що проходять у світлому режимі, можуть не пройти у темному і навпаки
- Використовуйте інструмент перевірки контрасту — автоматизовані інструменти виявляють проблеми швидше за ручну перевірку
Часті запитання
Який мінімальний коефіцієнт контрасту для відповідності WCAG?
Для WCAG 2.1 рівня AA звичайний текст потребує коефіцієнта контрасту щонайменше 4.5:1, а великий текст (18pt або 14pt напівжирний) — щонайменше 3:1. Рівень AAA підвищує ці вимоги до 7:1 та 4.5:1 відповідно. Більшість законів про доступність посилаються на рівень AA як мінімальний стандарт.
Чи важливий контраст кольорів для зображень та іконок?
Так. Критерій успіху WCAG 2.1 1.4.11 вимагає, щоб компоненти інтерфейсу та графічні об'єкти мали контраст щонайменше 3:1 із сусідніми кольорами. Це включає іконки, межі полів, індикатори фокусу та елементи діаграм. Декоративні зображення звільнені від цієї вимоги.
Як виправити низький контраст, не змінюючи кольори бренду?
Ви можете змінити яскравість кольорів бренду, зберігаючи ту саму тональність і насиченість. Наприклад, затемніть світло-синій для тексту або освітліть темний фон. Інший підхід — використовувати кольори бренду для великих декоративних елементів та нейтральні кольори з високим контрастом для основного тексту.