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

Що таке Перевірка контрастності кольорів?

Перевірка контрастності кольорів — це безкоштовний онлайн-інструмент для розрахунку коефіцієнта контрастності WCAG, призначений для дизайнерів, розробників і фахівців із тестування доступності. Він приймає колір переднього плану (тексту) і колір фону, обчислює відносну яскравість кожного з них і показує коефіцієнт контрастності у вигляді значення від 1:1 до 21:1. Потім він повідомляє, чи відповідає це значення рівню AA WCAG 2.1 (4.5:1 для звичайного тексту, 3:1 для великого) і рівню AAA (7:1 для звичайного, 4.5:1 для великого), та відображає два кольори у вигляді живого попереднього перегляду зі зразком тексту, щоб ви могли з одного погляду оцінити читабельність. Використовуйте його, щоб переконатися, що основний текст, кнопки, посилання й підписи читабельні, перш ніж публікувати дизайн.

Як користуватися Перевірка контрастності кольорів

1. Введіть або вставте колір переднього плану (тексту) у вигляді значення HEX або клацніть на вбудовану палітру, щоб вибрати його візуально.
2. Зробіть те саме для кольору фону, на якому розташований текст.
3. Прочитайте результат коефіцієнта контрастності, показаний у вигляді значення на кшталт 4.5:1 (1:1 — однакові кольори, 21:1 — чистий чорний на білому).
4. Перевірте позначки AA та AAA для звичайного й великого тексту (18pt / 14pt напівжирний і більше), щоб побачити, які рівні проходять.
5. Подивіться на попередній перегляд зі зразком тексту, відтворений вашими двома кольорами, щоб переконатися, що текст легко читається.
6. Коригуйте будь-який із кольорів, доки не досягнете рівня контрастності, потрібного вашому дизайну.

Приклади

Передній план #595959, Фон #ffffff

Коефіцієнт 7.00:1 — проходить AA та AAA для звичайного й великого тексту

Передній план #999999, Фон #ffffff

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

Передній план #767676, Фон #ffffff

Коефіцієнт 4.54:1 — проходить AA звичайний та AA великий, але не проходить AAA звичайний

Поширені запитання

Які коефіцієнти контрастності вимагає WCAG?

Рівень AA WCAG 2.1 вимагає щонайменше 4.5:1 для звичайного тексту й 3:1 для великого. Рівень AAA суворіший: 7:1 для звичайного тексту й 4.5:1 для великого. Ця перевірка показує позначку проходження/непроходження для кожного з цих чотирьох порогів.

Що вважається великим текстом?

WCAG визначає великий текст як 18pt (близько 24px) і більше або 14pt (близько 18.66px) і більше для напівжирного накреслення. Великий текст має нижчі вимоги до контрастності, бо більші символи легше читати, тому позначки великого тексту можуть проходити, коли позначки звичайного тексту — ні.

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

Використовується офіційна формула WCAG: відносна яскравість кожного кольору обчислюється з його лінеаризованих каналів sRGB, а коефіцієнт дорівнює (світліший + 0.05) / (темніший + 0.05). Результат лежить у діапазоні від 1:1 (однакові кольори) до 21:1 (чорний на білому).

Чи підтримуються альфа-канал, RGB або іменовані кольори?

Введення лише в HEX (скорочений #rgb або #rrggbb), для кожного поля є вбудована палітра. Альфа-канал/непрозорість і часткова прозорість не враховуються — спершу зведіть напівпрозорі шари в суцільний колір, а потім перевірте його.

Чи надсилаються мої кольори на сервер?

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