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

Чому варто перевіряти всі поєднання кольорів одразу, а не по одній парі?

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

Як обчислюється коефіцієнт — конкретний приклад

WCAG 2.1 визначає коефіцієнт контрастності як (L1 + 0,05) / (L2 + 0,05), де L1 і L2 — відносна яскравість двох кольорів (вище значення означає ближче до білого). Чистий чорний #000000 на чистому білому #FFFFFF дає ідеальні 21:1, а світло-сірий #999999 на білому — лише 2,85:1, що набагато нижче мінімуму 4,5:1, необхідного для звичайного тексту. Звичайний текст (менше 18px або менше 14px жирним) потребує AA ≥ 4,5:1, або AAA ≥ 7:1 за суворішим стандартом; великий текст (жирний 18px+ або 24px+) має нижчий порог AA ≥ 3:1.

Як читати підсумкову матрицю

Кожна клітинка матриці показує коефіцієнт контрастності між кольором цього рядка та кольором цього стовпця, з кольоровим позначенням: зелений (проходить AAA), жовтий (проходить лише AA), червоний (не проходить) —так ви одразу бачите проблемні пари, замість обчислення кожної вручну.

Контрастність обчислюється виключно на основі значення RGB кожного кольору —без урахування товщини шрифту, згладжування (anti-aliasing) чи напівпрозорих накладень під час реального рендерингу. Завжди перевіряйте результат на реальному пристрої перед публікацією.