Колірний контраст WCAG для дизайнерів

Якщо ваш текст не відповідає вимогам контрасту 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 (відповідає).
• Білий на жовтому — майже завжди не відповідає. Використовуйте темний текст на жовтому.
• Кольорові посилання в основному тексті — більшість синіх посилань відповідають вимогам на білому, але не відповідають на світло-сірому. Тестуйте фактичний фон.
• Фірмові кольори, які виглядають чудово — часто не відповідають вимогам. Додайте майже білий фон або затемніть текст.

Вибір доступних пар кольорів

Три надійні схеми:

1. Темний на світлому — #1f2937 на #fff = 14:1 (ідеально).
2. Білий на темному — #fff на #1f2937 = 14:1 (ідеально).
3. Темний на акцентному — #1f2937 на #fbbf24 = 9:1 (ідеально для кнопок).

Не лише текст

WCAG 2.1 також вимагає 3:1 для нетекстових елементів (кнопки, фокуси, межі форм). Інструмент перевірки працює з обома випадками.

Шпалери, які не заважатимуть вашим віджетам

Якщо ви дизайнер і встановлюєте шпалери за віджетами годинника та сповіщеннями, обирайте шпалери з контрастом нижче 5:1 у зонах віджетів. Наш інструмент Gaussian blur може пом'якшити насичені ділянки будь-яких шпалер для кращої читабельності віджетів.

Спробуйте наші безкоштовні інструменти

Більшість цих посібників супроводжуються практичним інструментом, яким ви можете скористатися прямо зараз — без реєстрації для першого запуску:

• Зміна розміру зображення — піксельно точне зменшення та збільшення.
• Конвертація в WebP — файли на 30-50% менші за JPG.
• Видалення фону — вирізання в один клік, прозорий PNG.
• Генератор фавіконів — усі розміри для браузерів з одного джерела.
• Зміна розміру для соцмереж — точні розміри для кожної платформи.
• Пакетна обробка — застосуйте будь-який інструмент до 200 зображень одночасно.

Перегляньте повний каталог інструментів.