Перевірка контрастності кольорів за WCAG
Два кольори, співвідношення назовні та вердикт для кожного розміру, який WCAG оцінюється окремо. Коли пара не вдається, вона знаходить найближчий колір, який проходить, не змінюючи ваш відтінок, тому виправлення залишається на бренді. Новіша фігура APCA стоїть поруч, чітко позначена як ще не стандартна.
| Де використовується | Потреби | AA | AAA |
|---|
Великий текст, 24 пікселя та більше
Основний текст у звичайному розмірі, регістр, який насправді має проходити більшість сторінок.
Що насправді вимірює співвідношення
Кожен колір перетворюється на відносну яскравість — зважену суму його червоного, зеленого та синього каналів після скасування кривої гами sRGB, причому зелений має найбільшу вагу, оскільки наші очі найбільш чутливі до нього. Відношення дорівнює світлішій яскравості плюс невелика константа над темнішою плюс та сама константа. Ця константа – це те, що зупиняє розтікання шкали до нескінченності на фоні чистого чорного, і також тому формула щадніше до темного фону, ніж очі більшості людей.
Чому одна пара отримує декілька вердиктів
WCAG не оцінює пару кольорів один раз. Для великого тексту допускається нижча смужка, ніж для основного тексту, оскільки розмір виконує частину роботи, яку в іншому випадку повинен виконувати контраст, а компоненти інтерфейсу — межа прапорця, кільце фокусування — знову оцінюються окремо. Палітра, яка не відповідає основній копії, може бути ідеально правильною для заголовка, тому в таблиці вказано кожен випадок, а не одиночне проходження чи помилка.
Зберігає відтінок, коли ви це виправляєте
Звичайним рішенням для невдалої пари є пошук темно-сірого кольору, який тихо втрачає колір бренду. Пропозиція тут змінює лише легкість, найменшим кроком, який очищає поріг, і залишає відтінок і насиченість там, де ви їх розміщуєте. Він такого ж кольору, лише достатньо далеко, щоб його можна було прочитати.
Про номер APCA
APCA – це контрастна модель, яка розробляється для наступної версії настанов. Він враховує речі, яких немає у співвідношенні WCAG 2 — полярність, щільність шрифту, те, як сприймається контрастність на темному тлі — і зазвичай він узгоджується з вашими очима, якщо старіша формула ні. Він показаний тут, тому що він справді інформативний, і він чітко позначений, оскільки це не те, за чим ви оцінюєтеся. Відповідність сьогодні – це співвідношення, а не Lc.
Поширені запитання
Що вважається великим текстом?
18 пунктів, приблизно 24 пікселі, або 14 пунктів напівжирним, приблизно 18,66 пікселів напівжирним. Нижче це звичайний текст і потребує вищого співвідношення.
Мій сірий колір проходить на білому, але не на темному. чому
Формула WCAG 2 не є симетричною у сприйнятті. Світлий текст на темному фоні сприймається як нижчий контраст для очей, ніж передбачає співвідношення, що є однією з прогалин, які APCA була розроблена для усунення. Якщо пара лише виглядає темною, повірте своїм очам і додайте ще трохи.
Чи застосовується співвідношення до значків і рамок?
Так, у співвідношенні 3:1, згідно з правилом нетекстового контрасту. Це охоплює частини елемента керування, які потрібно побачити, щоб ним користуватися — контур поля, перемикач, індикатор фокусу — але не декоративну графіку чи логотип.
Чи надсилається кудись усе, що я тут введу?
Ні. Кольори ніколи не залишають сторінку, і нічого не завантажується та не зберігається.
Створено командою GO AI. OKLCH конвертер · Наша заява про доступність · Усі безкоштовні інструменти