Перевірка контрасту WCAG проходить через кілька простих кроків. Нічого не покидає ваш браузер.
- Ви вводите колір переднього плану та фону. Інструмент розбирає hex, rgb(), hsl() або названі CSS-кольори на їхні значення червоного, зеленого та синього каналів.
- Кожен RGB-канал лінеаризується за допомогою передавальної функції sRGB. Це перетворює гамма-кодовані значення дисплея в лінійну інтенсивність світла.
- Лінійні значення зважуються за чутливістю людського ока до кожного каналу — 0,2126 для червоного, 0,7152 для зеленого, 0,0722 для синього. Сума є відносною яскравістю кольору.
- Коефіцієнт контрасту дорівнює (L1 + 0,05) ÷ (L2 + 0,05), де L1 — яскравість світлішого кольору, а L2 — темнішого. Додаткові 0,05 зберігають формулу дійсною для чистого чорного.
- Коефіцієнт порівнюється з порогами WCAG: звичайний текст AA потребує щонайменше 4.5:1, великий текст AA — 3:1, звичайний текст AAA — 7:1, а великий текст AAA — 4.5:1. Великий текст означає щонайменше 18pt або 14pt жирний.
FAQ
Поширені запитання про перевірку контрасту WCAG.
Яка різниця між AA та AAA?
AA — це мінімальний рівень відповідності для більшості веб-контенту. Він вимагає коефіцієнта контрасту щонайменше 4.5:1 для звичайного тексту та 3:1 для великого тексту. AAA — це вищий стандарт, який вимагає 7:1 для звичайного тексту та 4.5:1 для великого тексту. Ви можете орієнтуватися на AAA для ключового контенту, як-от основний текст на новинному сайті, використовуючи AA для решти дизайну. Досягти AAA скрізь може бути складно з фірмовими кольорами, тому багато команд орієнтуються на AA всюди та підвищують ключовий текст до AAA, де це можливо.
Що вважається «великим текстом» згідно з WCAG?
WCAG 2.x визначає великий текст як щонайменше 18 пунктів (24px) для звичайної ваги або 14 пунктів (близько 19px) для жирної ваги. Символи та іконки, які є частиною шрифту, підпорядковуються тим самим порогам. Якщо ви не впевнені, який поріг застосовується до вашого інтерфейсу, перевірте обидва — AA великий має нижчу планку (3:1), тому більшість колірних пар, які не проходять AA звичайний, насправді проходять AA великий, коли текст досить великий.
Чому моя пара проходить AA великий, але не проходить AA звичайний?
Тому що AA великий вимагає лише коефіцієнта 3:1, тоді як AA звичайний вимагає 4.5:1. WCAG встановлює нижчий поріг для великого тексту, оскільки більші символи легше читати навіть із меншим контрастом. Колірна пара, яка має, скажімо, 4.0:1, проходить AA великий (поріг 3:1), але не проходить AA звичайний (поріг 4.5:1). Це дуже поширено зі світлими фірмовими кольорами, які використовуються на білому фоні.
Чи можна покладатися лише на цей інструмент для аудиту доступності?
Цей інструмент перевіряє одну річ — коефіцієнт контрасту WCAG 2.x між двома суцільними кольорами. Справжня доступність включає більше: індикатори фокусу, розмір і вагу шрифту, колір як єдиний спосіб передачі інформації, а також сумісність із програмами зчитування екрана та інструментами масштабування. Використовуйте цю перевірку контрасту разом з іншими методами аудиту для повної картини доступності вашого застосунку.
Які формати кольорів приймає введення?
Ви можете вставити 3-, 4-, 6- або 8-значні hex-коди (з # або без), значення rgb() та rgba() у старому синтаксисі з комами або сучасному синтаксисі з пробілами, hsl() та hsla() з будь-якою стандартною одиницею відтінку (deg, rad, grad, turn), hsv(), hwb() та будь-який із 150 названих CSS-кольорів зі специфікації CSS Color Module Level 4. Колір повністю розбирається на вашому пристрої.