Перевірка контрастності
Виберіть кольори тексту й тла, щоб перевірити їхній коефіцієнт контрастності за порогами WCAG AA та AAA. Перегляньте окремі результати для звичайного й великого тексту та попередній перегляд із вибраними кольорами.
Що можна робити
Перевірка співвідношення для двох кольорів
Виберіть кольори тексту й тла та перегляньте коефіцієнт контрастності з точністю до двох десяткових знаків.
Порівняння порогів AA та AAA
Перегляньте окремі результати для звичайного й великого тексту та попередній перегляд із вибраними кольорами.
Порівняння з чорним і білим
Відкрийте додаткові відомості, щоб порівняти колір тексту з чорним і білим тлом.
Як користуватися
Введіть колір тексту
Виберіть HEX, RGB, HSL, HSV або CMYK і введіть колір тексту. Вибір зразка кольору перемикає введення на HEX.
Виберіть колір тла
Введіть значення HEX із 3 або 6 цифр або скористайтеся палітрою кольорів. Префікс # необов’язковий.
Перевірте контрастність
Виберіть «Перевірити контрастність», щоб переглянути коефіцієнт, попередній перегляд тексту та результати AA/AAA. Після зміни будь-якого кольору перевірте ще раз.
Коли стане в пригоді
Перевірка основного тексту на тлі
Введіть кольори сторінки та перевірте, чи відповідає контрастність звичайного тексту потрібному коефіцієнту.
Порівняння кольорів заголовка
Використовуйте результат для великого тексту й попередній перегляд, оцінюючи пару кольорів для заголовка.
Як читати результати
Коефіцієнти AA та AAA
Для AA потрібно щонайменше 4.5:1 для звичайного тексту й 3:1 для великого. Для AAA — 7:1 для звичайного та 4.5:1 для великого. Результати визначаються за неокругленим коефіцієнтом.
Що вважається великим текстом
Великий текст — це щонайменше 18 pt або жирний текст від 14 pt. У CSS це 24px або приблизно 18,7px жирним шрифтом. У попередньому перегляді використовується звичайний текст розміром 16px і 24px.
Обсяг перевірки
Перевіряється контрастність тексту між двома непрозорими кольорами sRGB. Не оцінюється тло зображень, змішування альфа-каналу, нетекстові елементи чи відповідність усієї сторінки.
Запитання та відповіді
Чи означає проходження порогового значення, що вся сторінка відповідає вимогам?
Цей результат стосується лише контрастності тексту для двох вибраних кольорів. Відповідність вимогам для всієї сторінки потрібно оцінювати окремо.
Що показує порівняння з чорним і білим?
Порівнюється вибраний колір тексту з чорним і білим, а також показується, з яким контрастність вища. Цей результат не залежить від вибраного кольору тла.
Чи можна перевірити прозорий текст або текст поверх зображення?
Альфа-канал і тло зображень не підтримуються. Введіть непрозорі кольори тексту й тла.
Введення та виведення
- Колір тексту
- Значення HEX, RGB, HSL, HSV або CMYK чи вибір кольору в палітрі. CMYK — приблизне значення без профілю ICC.
- Тло
- HEX із 3 або 6 цифр чи вибір кольору в палітрі. Альфа-канал не підтримується.
- Результат
- Коефіцієнт контрастності, результати AA/AAA для звичайного й великого тексту та попередній перегляд тексту. Зберегти результати не можна.