Перевірка контрасту кольорів
Переконайтеся, що ваш текст легко читати кожному, і отримайте виправлення, якщо це не так.
Запечатано на цьому пристрої
Працює у вашому браузері. Нічого не завантажується на сервер.
Запечатано
Кольори
- Коефіцієнт контрасту
- Звичайний текст
- AA · 4,5:1
- AAA · 7:1
- Великий текст
- AA · 3:1
- AAA · 4,5:1
- Елементи інтерфейсу та іконки
- AA · 3:1
- Контраст APCA (для довідки)
APCA — новіший метод, який вивчають для майбутніх настанов із доступності. Еталоном сьогодні залишається WCAG 2.2.
Попередній перегляд
Так виглядає великий текст
Звичайний текст має залишатися легким для читання для всіх, зокрема для людей зі слабким зором, на телефоні під яскравим сонцем чи на старому екрані.
Дрібному шрифту й підписам потрібен найбільший контраст.
Пропоновані виправлення
Як це працює
-
Введіть два кольори
Введіть або оберіть колір тексту й колір фону. Підходить будь-який формат: HEX, RGB, HSL або назва CSS.
-
Перегляньте результат
Подивіться коефіцієнт контрасту й чи відповідає він WCAG 2.2 AA і AAA для звичайного тексту, великого тексту й елементів інтерфейсу.
-
За потреби застосуйте виправлення
Якщо рівень не пройдено, скористайтеся одним із запропонованих кольорів: це найближчий колір того самого тону, що проходить перевірку.
Поширені запитання
Який коефіцієнт контрасту потрібен?
Рівень AA стандарту WCAG 2.2 вимагає щонайменше 4,5:1 для звичайного тексту й 3:1 для великого. Рівень AAA вимагає 7:1 і 4,5:1. Іконкам, рамкам полів введення та іншим елементам інтерфейсу потрібно щонайменше 3:1 відносно сусідніх кольорів.
Що вважається великим текстом?
Текст розміром щонайменше 18 пунктів (24 пікселі CSS) або щонайменше 14 пунктів (близько 18,7 пікселя CSS), якщо він жирний. Усе менше — звичайний текст.
Чому 4,49:1 не проходить, хоча це так близько до 4,5:1?
Пороги WCAG — це суворі мінімуми, і коефіцієнт не можна округлювати вгору. Тому ця перевірка показує коефіцієнт, округлений униз: значення, яке виглядає прохідним, справді таким є.
Що таке APCA?
APCA (Accessible Perceptual Contrast Algorithm) — новіший спосіб вимірювання контрасту, що враховує, чи текст темний на світлому, чи світлий на темному. Його вивчають для майбутньої версії настанов. Тут він показаний лише для довідки: сьогодні юридичні вимоги й аудити посилаються на коефіцієнт WCAG 2.
Як добираються запропоновані кольори?
Інструмент зберігає тон і насиченість вашого кольору й змінює лише світлість у перцептивному колірному просторі OKLCH, доки не знайде найближче значення, що досягає рівня. Ваш колір залишається впізнаваним — лише трохи світлішим або темнішим.
Чи працює це з прозорими кольорами?
Так, для кольору тексту: напівпрозорий колір тексту спершу змішується з фоном, бо саме такий колір люди бачать насправді. Фон вважається суцільним.