Перевірка контрасту (Contrast Checker)

Перевірте контраст тексту перед публікацією

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

Обчислення виконується у вашому браузері й не потребує жодного завантаження. Оберіть два кольори, за потреби поміняйте їх місцями та скористайтеся блоком попереднього перегляду, щоб побачити, як виглядає реальний текст. Коефіцієнт є об'єктивним, але попередній перегляд усе одно важливий, адже товщина шрифту, розмір літер і навколишній макет впливають на читабельність. Пара, яка технічно проходить перевірку, усе ж може втомлювати, якщо текст дрібний або поверхня візуально перевантажена.

Як розуміти результати AA та AAA

WCAG AA — звичайна ціль для більшості сайтів і продуктів. Звичайний текст має досягати щонайменше 4,5:1, а великий текст — щонайменше 3:1. AAA суворіший: 7:1 для звичайного тексту та 4,5:1 для великого. Великим вважається текст від 18 pt звичайного або 14 pt напівжирного накреслення. Нижчий поріг існує, бо більші й товстіші літери легше розрізнити за меншого контрасту, ніж дрібний основний текст. Якщо не впевнені, до якої категорії належить текст, вважайте його звичайним і орієнтуйтеся на вищу вимогу.

Проєктування доступних систем кольорів

Контраст варто перевіряти на ранньому етапі, а не лише після завершення візуального дизайну. Обираючи кольори бренду, перевіряйте їх на поверхнях, де вони реально з'являтимуться: білих картках, темних панелях навігації, приглушених фонах і вимкнених станах. Документуйте доступні комбінації як токени, щоб команди не відкривали їх заново. Пам'ятайте, що контраст — лише одна зі складових доступності. Використовуйте помітні контури фокуса, зрозумілі підписи, семантичний HTML і не покладайтеся лише на колір, щоб повідомляти про важливі стани, як-от помилки, успіх і попередження.