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

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

Перевірка контрастності кольорів — це безкоштовний онлайн-інструмент контрастності WCAG та APCA для дизайнерів, розробників і фахівців із доступності. Він приймає кольори в HEX (#rgb, #rrggbb і 8-значний #rrggbbaa з альфою), rgb()/rgba() та hsl()/hsla(), накладає напівпрозорий передній план на фон перед вимірюванням і повідомляє як коефіцієнт WCAG 2.1 (від 1:1 до 21:1), так і оцінку контрасту світлоти APCA Lc. Він позначає рівень AA WCAG 2.1 (4.5:1 звичайний, 3:1 великий) і AAA (7:1 звичайний, 4.5:1 великий), додає позначку 3:1 для нетекстових компонентів інтерфейсу та графіки й може запропонувати найближчий прохідний передній план — змінюючи лише його світлоту до досягнення AA або AAA — який ви застосовуєте одним кліком.

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

1. Введіть колір переднього плану (тексту) як HEX, rgb() або hsl() — приймається 8-значний HEX чи rgba з альфою — або клацніть на палітру, щоб вибрати візуально.
2. Введіть колір фону так само; перед вимірюванням контрасту напівпрозорий передній план накладається на нього (а фон — на білий).
3. Використовуйте кнопку «Поміняти», щоб будь-коли поміняти місцями передній план і фон.
4. Прочитайте коефіцієнт контрастності WCAG 2.1 та оцінку APCA Lc, показану поруч.
5. Перевірте позначки AA та AAA для звичайного й великого тексту, а також позначку 3:1 для компонентів інтерфейсу та графіки.
6. Якщо пара не проходить, подивіться найближчий прохідний колір AA або AAA і натисніть «Застосувати», щоб оновити передній план.

Приклади

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

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

Передній план #00000080 (50% чорного) на #ffffff

Спершу накладається в суцільний сірий, потім обчислюються коефіцієнт WCAG та APCA Lc

Передній план #999999 на #ffffff — 2.85:1, не проходить AA

Відкрийте найближчий колір AA й натисніть «Застосувати», щоб досягти 4.5:1, зберігши той самий відтінок

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

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

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

Що таке оцінка APCA Lc?

APCA (Accessible Perceptual Contrast Algorithm) — це метод контрасту, запропонований для WCAG 3. Він дає значення контрасту світлоти (Lc) приблизно від 0 до 108, де більше означає вищий контраст, і враховує полярність (темне на світлому чи світле на темному). Він показується поруч із коефіцієнтом WCAG 2.1 і використовує власні рівні рекомендацій замість єдиного «пройшов/не пройшов».

Як працює підказка найближчого прохідного кольору?

Вона зберігає відтінок і насиченість переднього плану та змінює лише його світлоту — світліше чи темніше — доки контраст із фоном не досягне AA (4.5:1) або AAA (7:1); потім ви можете застосувати її одним кліком. Якщо фон середнього тону й мети не досягти, вона показує найближчий можливий колір.

Які формати кольору можна вводити?

HEX (#rgb, #rrggbb, а також #rgba і 8-значний #rrggbbaa з альфою), rgb()/rgba() та hsl()/hsla(), із вбудованою палітрою для кожного поля. Перед обчисленням коефіцієнта напівпрозорий передній план накладається на фон, який сам спершу зводиться на білий. Іменовані кольори не підтримуються.

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

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