Колірний контраст WCAG для дизайнерів
Правило 4.5:1, математика коефіцієнта контрасту та безкоштовні інструменти для перевірки будь-якої пари кольорів.
Якщо ваш текст не відповідає вимогам контрасту WCAG AA, приблизно 285 мільйонів людей із порушеннями зору не зможуть його прочитати. До того ж ви ризикуєте порушити законодавство ЄС та США. Хороша новина: правило просте.
Правило 4.5:1
Основний текст повинен мати коефіцієнт контрасту щонайменше 4.5:1 відносно фону, щоб відповідати WCAG AA. Великий текст (24px+ звичайний або 18px+ жирний) має нижчий поріг — 3:1.
Для рівня AAA: 7:1 для основного тексту, 4.5:1 для великого тексту.
Як розраховується коефіцієнт контрасту
WCAG використовує відносну яскравість — перетворіть кожен колір на значення яскравості (0 = чорний, 1 = білий) за спеціальною формулою, потім обчисліть (L1 + 0.05) / (L2 + 0.05), де L1 — світліший колір.
Вам не потрібно робити обчислення — скористайтеся нашим безкоштовним інструментом перевірки контрасту, щоб ввести будь-які два кольори та побачити коефіцієнт.
Типові випадки невідповідності
- Світло-сірий на білому — #999 на #fff = 2.85 (не відповідає). #767676 на #fff = 4.54 (відповідає).
- Білий на жовтому — майже завжди не відповідає. Використовуйте темний текст на жовтому.
- Кольорові посилання в основному тексті — більшість синіх посилань відповідають вимогам на білому, але не відповідають на світло-сірому. Тестуйте фактичний фон.
- Фірмові кольори, які виглядають чудово — часто не відповідають вимогам. Додайте майже білий фон або затемніть текст.
Вибір доступних пар кольорів
Три надійні схеми:
- Темний на світлому — #1f2937 на #fff = 14:1 (ідеально).
- Білий на темному — #fff на #1f2937 = 14:1 (ідеально).
- Темний на акцентному — #1f2937 на #fbbf24 = 9:1 (ідеально для кнопок).
Не лише текст
WCAG 2.1 також вимагає 3:1 для нетекстових елементів (кнопки, фокуси, межі форм). Інструмент перевірки працює з обома випадками.
Шпалери, які не заважатимуть вашим віджетам
Якщо ви дизайнер і встановлюєте шпалери за віджетами годинника та сповіщеннями, обирайте шпалери з контрастом нижче 5:1 у зонах віджетів. Наш інструмент Gaussian blur може пом'якшити насичені ділянки будь-яких шпалер для кращої читабельності віджетів.
Спробуйте наші безкоштовні інструменти
Більшість цих посібників супроводжуються практичним інструментом, яким ви можете скористатися прямо зараз — без реєстрації для першого запуску:
- Зміна розміру зображення — піксельно точне зменшення та збільшення.
- Конвертація в WebP — файли на 30-50% менші за JPG.
- Видалення фону — вирізання в один клік, прозорий PNG.
- Генератор фавіконів — усі розміри для браузерів з одного джерела.
- Зміна розміру для соцмереж — точні розміри для кожної платформи.
- Пакетна обробка — застосуйте будь-який інструмент до 200 зображень одночасно.
Перегляньте повний каталог інструментів.
