Перевірка контрасту кольорів за WCAG
Check text and background colours against WCAG AA and AAA. Усе виконується локально — нічого не надсилається на сервер.
- Вхід
- Two colours
- Вихід
- Contrast ratio · AA / AAA verdicts
Контраст
#777777 / #ffffff
Коефіцієнт контрастності
4.48:1
Проходить лише для великого тексту та графіки інтерфейсу.
- Не пройдено
AA · Звичайний текст
WCAG 1.4.3 · AA · 4.5:1
- Пройдено
AA · Великий текст
WCAG 1.4.3 · AA · 3:1
- Не пройдено
AAA · Звичайний текст
WCAG 1.4.6 · AAA · 7:1
- Не пройдено
AAA · Великий текст
WCAG 1.4.6 · AAA · 4.5:1
- Пройдено
Елементи інтерфейсу й графіка
WCAG 1.4.11 · AA · 3:1
Найближчий колір тексту, що проходить
Той самий тон, світлість змінено в OKLCH, доки коефіцієнт не пройде.
- AA
#767676
4.54:1
- AAA
#595959
7.00:1
APCA (чернетка WCAG 3)Lc 71.1
Лише для довідки. Орієнтовно Lc 75 для основного тексту, 60 для іншого тексту, 45 для великих заголовків. Від'ємне значення означає світлий текст на темному фоні.
Попередній перегляд
Великий текст, 24 px
Великий жирний текст, 19 px
Звичайний основний текст 16 px. Такого розміру більшість абзаців, і йому потрібен коефіцієнт щонайменше 4.5:1.
Дрібний шрифт 12 px читати ще важче. Дайте йому більше контрасту, ніж мінімум.
Заповнена кнопка міняє кольори місцями; іконкам і контурам потрібно щонайменше 3:1.
Перевірте контраст кольорів за WCAG за кілька секунд
Цей інструмент вимірює коефіцієнт контрастності WCAG 2 між кольором тексту та його фоном і одразу показує, яким рівням він відповідає: AA та AAA для звичайного й великого тексту, а також мінімум 3:1 для іконок, рамок та інших елементів інтерфейсу. Коли пара не проходить, він пропонує найближчий колір тексту, що проходить, зі збереженням тону. Кольори можна вводити в будь-якому форматі, і все працює у вашому браузері.
Як перевірити контраст кольорів
- Введіть колір переднього плану (тексту) і колір фону в будь-якому форматі: HEX,
rgb(),hsl(),oklch()або назвою CSS. Або скористайтеся палітрами. - Подивіться коефіцієнт і позначки «Пройдено» чи «Не пройдено» для кожного рівня WCAG.
- Перегляньте пару наживо як справжній текст, кнопку та іконку.
- Якщо пара не проходить, натисніть Застосувати поруч із пропозицією для AA чи AAA, щоб перейти до найближчого кольору тексту, що проходить. Кнопка обміну перевіряє пару навпаки.
Вимоги WCAG до контрасту
Настанови з доступності вебконтенту (WCAG) встановлюють мінімальні коефіцієнти контрастності, щоб текст залишався читабельним для людей зі слабким зором, порушеннями колірного сприйняття або з телефоном на яскравому сонці. Коефіцієнти бувають від 1:1 (однакові кольори) до 21:1 (чорне на білому).
- AA, звичайний текст
- Щонайменше 4.5:1 (критерій успіху 1.4.3). Рівень, якого вимагає більшість законів і політик доступності, зокрема Європейський акт про доступність і настанови ADA у США.
- AA, великий текст
- Щонайменше 3:1. Великий — це від 24 px (18 pt) або від 18.66 px (14 pt) для жирного шрифту.
- AAA, звичайний текст
- Щонайменше 7:1 (критерій успіху 1.4.6). Посилений рівень, до якого варто прагнути для довгих текстів.
- AAA, великий текст
- Щонайменше 4.5:1.
- Контраст нетекстових елементів
- Щонайменше 3:1 (критерій успіху 1.4.11) для іконок, рамок полів введення, індикаторів фокуса, ліній діаграм і тих частин елемента керування, які потрібно бачити, щоб ним користуватися.
Як обчислюється коефіцієнт контрастності
Кожен колір перетворюється на його відносну яскравість: канали sRGB лінеаризуються (скасовується гамма-крива) і зважуються з коефіцієнтами 0.2126 для червоного, 0.7152 для зеленого та 0.0722 для синього, бо око значно чутливіше до зеленого. Потім коефіцієнт дорівнює (L1 + 0.05) / (L2 + 0.05), де L1 — світліший колір. Наприклад, #777777 на білому дає 4.48:1, трохи не дотягуючи до AA, тоді як #767676 досягає 4.54:1 і проходить.
Коефіцієнт ніколи не округлюється вгору до порогу: WCAG прямо вказує, що 4.49:1 не відповідає 4.5:1. Напівпрозорі кольори спершу змішуються так, як їх малює браузер: передній план поверх фону, а напівпрозорий фон — поверх білого.
Як виправити колір, що не проходить
Пропозиції зберігають тон і насиченість кольору тексту й змінюють лише його світлість в OKLCH — перцептивному колірному просторі, який тепер підтримує CSS, — крок за кроком темніше й світліше, доки коефіцієнт не пройде, і обирають варіант, ближчий до початкового. Зазвичай результатом є той самий фірмовий колір, трохи глибший чи світліший, а не різкий перехід до чорного. Якщо жоден відтінок цього тону не досягає цілі на вашому фоні, інструмент про це скаже, і тоді змінювати треба фон.
Щоб самостійно дослідити інші варіанти, відкрийте колір у конвертері кольорів і перегляньте його світлі й темні відтінки або отримайте кольори-кандидати з фото за допомогою генератора палітри кольорів.
Типові помилки з контрастом
- Текст-заповнювач і текст, що виглядає вимкненим. Світло-сірий placeholder — це все одно текст, і він має відповідати 4.5:1, якщо він потрібен користувачам. Справді вимкнені елементи керування є винятком, але те, що лише виглядає вимкненим, — ні.
- Текст на зображеннях і градієнтах. Перевіряйте найсвітлішу частину зображення за текстом, а не середнє значення. Надійне рішення — темне накладання або суцільна панель під текстом.
- Фірмові кольори для тексту. Яскравий помаранчевий чи бірюзовий може виглядати виразно, але не проходити на білому. Скористайтеся пропозицією, щоб знайти глибший варіант того самого тону для тексту, а яскравий залиште для великих заголовків чи декору.
- Індикатори фокуса й рамки полів. Світло-сіра рамка 1 px навколо текстового поля часто не проходить нетекстове правило 3:1, і людям зі слабким зором важко знайти поле.
- Темний режим. Пара, що проходить у світлій темі, нічого не каже про темну. Перевіряйте обидві теми, кнопкою обміну можна швидко подивитися на інвертовану пару.
APCA і WCAG 3
Під результатами WCAG 2 ви також побачите значення контрасту світлості APCA, що записується як Lc. APCA — це метод вимірювання контрасту, запропонований для майбутнього WCAG 3. Він враховує товщину шрифту й те, що світлий текст на темному фоні потребує іншого контрасту, ніж темний на світлому, чого формула WCAG 2 не враховує; саме тому його знак змінюється, коли ви міняєте кольори місцями. Орієнтовно Lc 75 підходить для основного тексту, Lc 60 — для іншого читабельного тексту, а Lc 45 — для великих заголовків. WCAG 3 досі є чернеткою, тож сприймайте APCA як додаткову інформацію: стандартом, на який посилаються аудити й закони, лишається WCAG 2.x.
Поширені запитання
- Який коефіцієнт контрастності достатній для тексту?
- Щонайменше 4.5:1 для звичайного тексту та 3:1 для великого відповідають рівню WCAG AA, якого вимагає більшість законів про доступність. 7:1 для звичайного тексту відповідає суворішому рівню AAA.
- Що вважається великим текстом у WCAG?
- Текст розміром щонайменше 18 пунктів (24 CSS-пікселі) або щонайменше 14 пунктів (близько 18.66 CSS-пікселя), якщо він жирний. Великому тексту потрібно лише 3:1 для AA та 4.5:1 для AAA.
- Як обчислюється коефіцієнт контрастності WCAG?
- Обидва кольори перетворюються на відносну яскравість: канали sRGB лінеаризуються й зважуються з коефіцієнтами 0.2126, 0.7152 і 0.0722. Коефіцієнт дорівнює (світліший + 0.05), поділеному на (темніший + 0.05), що дає значення від 1:1 до 21:1.
- Чи проходить #777777 на білому за WCAG?
- Ні. #777777 на #ffffff — це 4.48:1, трохи нижче за 4.5:1, потрібні для AA для звичайного тексту. #767676 — найсвітліший сірий, що проходить, із коефіцієнтом 4.54:1.
- Чи мають іконки й кнопки відповідати вимогам до контрасту?
- Так. Критерій успіху 1.4.11 WCAG 2.1 вимагає 3:1 відносно сусідніх кольорів для іконок, рамок полів, індикаторів фокуса та іншої графіки, потрібної, щоб розуміти інтерфейс чи керувати ним.
- Що таке APCA?
- APCA (Accessible Perceptual Contrast Algorithm) — метод вимірювання контрасту з чернетки WCAG 3. Він видає значення контрасту світлості (Lc), яке залежить від того, який колір є текстом, і враховує розмір і товщину шрифту. Поки що це не є вимогою.
- Чи враховує перевірка прозорі кольори?
- Так. Перед обчисленням коефіцієнта напівпрозорий передній план змішується з фоном, а напівпрозорий фон — з білим, що відповідає тому, що з'являється на екрані.