Перевірка контрастності

Введіть кольори тексту та фону, щоб дізнатися коефіцієнт контрастності WCAG та перевірити відповідність стандартам AA й AAA.

—Коефіцієнт контрастності
Звичайний текстAA4.5:1—
Звичайний текстAAA7:1—
Великий текстAA3:1—
Великий текстAAA4.5:1—
Інтерфейс та графіка3:1—
Введіть кольори тексту та фону для перевірки.

Усі перевірки виконуються локально у вашому браузері. Введені дані не надсилаються на BroBroGo.

Поширені запитання

Що означають результати AA та AAA?

Рівень AA — це стандарт, до якого прагне більшість сайтів: він вимагає коефіцієнт не менше 4.5:1 для звичайного тексту та 3:1 для великого. Рівень AAA суворіший — 7:1 для звичайного тексту та 4.5:1 для великого. Шкала контрастності варіюється від 1:1 (відсутність контрасту) до 21:1 (чорне на білому).

Що вважається великим текстом?

Текст розміром від 18pt (приблизно 24px) або від 14pt (приблизно 18.5px) для напівжирного накреслення. Великий текст легше читати при меншому контрасті, тому для нього вимоги м’якші: проходження AA при 3:1 та AAA при 4.5:1 замість суворіших порогів для звичайного тексту.

Які формати кольорів можна вводити?

Ви можете ввести значення HEX (наприклад, #1a1a1a), rgb() (наприклад, rgb(26, 26, 26)) або hsl(), або просто клікнути на кольоровий квадрат для вибору. Кнопка заміни дозволяє миттєво поміняти місцями кольори тексту та фону.

Тут використовується WCAG 2 чи новіший метод APCA?

Цей інструмент використовує формулу WCAG 2.1 / 2.2, на яку сьогодні спираються офіційні вимоги та аудити доступності. APCA — це новіший метод візуального сприйняття, який наразі розробляється для WCAG 3. Він перспективний, але ще не став стандартом відповідності, тому результати перевірки тут його не використовують.

Написано та перевірено редакційною командою BroBroGo.Останнє оновлення:

Роль контрастності у вебдоступності за стандартами WCAG 2.1 / 2.2

Колірний контраст є одним із найважливіших чинників забезпечення доступності цифрового контенту. Вебстандарти консорціуму W3C, зокрема Настанови з доступності вебконтенту WCAG 2.1 та WCAG 2.2, визначають чіткі вимоги до різниці в яскравості між текстом та його фоном. Дотримання цих вимог гарантує, що інформацію на сторінці зможуть без перешкод прочитати користувачі з різними особливостями зорового сприйняття.

Інструмент «Перевірка контрастності» створений для того, щоб допомогти дизайнерам, розробникам та контент-менеджерам швидко оцінити відповідність обраної колірної схеми офіційним критеріям доступності. Завдяки використанню стандартних математичних формул WCAG 2.1 / 2.2, інструмент миттєво розраховує точне співвідношення кольорів та показує, чи проходить комбінація перевірку для різних типів контенту.

Вхідні параметри та підтримувані формати кольорів

Для проведення аналізу інструмент потребує двох основних параметрів:

  • Колір тексту (в інтерфейсі позначений як Колір тексту).
  • Колір фону (в інтерфейсі позначений як Колір фону).

Обидва поля підтримують кілька поширених форматів представлення кольору в коді:

  1. Hex-значення: шістнадцяткові коди, наприклад #1a1a1a або #ffffff.
  2. Значення rgb(): десятковий формат представлення каналів червоного, зеленого та синього кольорів, наприклад rgb(26, 26, 26) або rgb(255, 255, 255).
  3. Значення hsl(): формат, що базується на тоні, насиченості та світлоті кольору.

Для зручності користувачів в інтерфейсі передбачена спеціальна кнопка, яка дозволяє миттєво поміняти місцями кольори тексту та фону. За замовчуванням інструмент ініціалізується з колірною парою #4f46e5 для тексту та #ffffff для фону, що дає початковий коефіцієнт контрастності 6.29.

Якщо під час введення буде допущено помилку або вказано непідтримуваний формат, система повідомить про це відповідними повідомленнями про помилку:

  • При некоректному кольорі тексту з'явиться попередження: «Введіть коректний колір тексту, наприклад #1a1a1a or rgb(26, 26, 26).».
  • При некоректному кольорі фону з'явиться попередження: «Введіть коректний колір фону, наприклад #ffffff або rgb(255, 255, 255).».

Результати аналізу та шкала контрастності

Головним результатом обчислень є Коефіцієнт контрастності, який відображається у форматі «X:1». Цей показник демонструє різницю в освітленості між найсвітлішим та найтемнішим кольором із вибраної пари.

Діапазон значень коефіцієнта контрастності суворо обмежений:

  • Мінімальне значення становить 1:1, що означає повну відсутність контрасту (наприклад, білий текст на білому фоні).
  • Максимальне значення становить 21:1, що відповідає граничному рівню контрасту (абсолютно чорний текст на абсолютно білому фоні).

Для кожного перевіреного поєднання кольорів інструмент виводить статус відповідності («Відповідає» або «Невідповідність») за трьома категоріями:

  • Звичайний текст: оцінюється відповідність стандартам AA та AAA.
  • Великий текст: оцінюється відповідність стандартам AA та AAA.
  • Інтерфейс та графіка: оцінюється відповідність єдиному встановленому порогу без поділу на рівні AA та AAA.

Правила відповідності рівням AA та AAA

Стандарти WCAG поділяють вимоги до доступності на кілька рівнів залежно від суворості критеріїв. Інструмент автоматично зіставляє розрахований коефіцієнт із такими нормативними вимогами:

  • Звичайний текст:
    • Для досягнення рівня AA коефіцієнт контрастності має бути не менше 4.5:1.
    • Для досягнення рівня AAA коефіцієнт контрастності має бути не менше 7:1.
  • Великий текст:
    • Для досягнення рівня AA достатньо коефіцієнта не менше 3:1.
    • Для досягнення рівня AAA необхідний коефіцієнт не менше 4.5:1.
  • Інтерфейс та графіка:
    • Для цієї категорії діє єдине правило — коефіцієнт контрастності має бути не менше 3:1. Окремих рівнів AA та AAA для графічних компонентів та елементів інтерфейсу не передбачено.

Великим текстом у контексті вебдоступності вважається текст, розмір якого становить від 18pt (приблизно 24px) для звичайного накреслення або від 14pt (приблизно 18.5px) для напівжирного накреслення.

Підсумковий вердикт інструменту

На основі проведених розрахунків інструмент формує один із чотирьох підсумкових вердиктів, який чітко вказує на максимальний рівень відповідності перевіреної пари кольорів:

  1. «Відповідає рівням AA та AAA для звичайного тексту.» — відображається, якщо контрастність відповідає найсуворішим вимогам.
  2. «Відповідає рівню AA для звичайного тексту.» — відображається, якщо досягнуто базового стандарту для звичайного тексту, але для рівня AAA контрасту недостатньо.
  3. «Відповідає рівню AA лише для великого тексту.» — відображається, коли коефіцієнт задовольняє вимоги лише для великих шрифтів.
  4. «Нижче мінімуму AA — збільште контрастність.» — відображається, якщо колірна пара не долає навіть мінімальний поріг доступності.

Конфіденційність та обробка даних

Використання інструменту «Перевірка контрастності» є повністю безпечним для вашої приватності. Усі математичні розрахунки та перевірки відповідності стандартам виконуються локально безпосередньо у вашому веббраузері. Жодні введені вами колірні значення, текстові дані чи параметри не завантажуються на сервери BroBroGo та не передаються третім сторонам.

Часті запитання (FAQ)

Що означають результати AA та AAA?

Рівень AA — це стандарт, до якого прагне більшість сайтів: він вимагає коефіцієнт не менше 4.5:1 для звичайного тексту та 3:1 для великого. Рівень AAA суворіший — 7:1 для звичайного тексту та 4.5:1 для великого. Шкала контрастності варіюється від 1:1 (відсутність контрасту) до 21:1 (чорне на білому).

Що вважається великим текстом?

Текст розміром від 18pt (приблизно 24px) або від 14pt (приблизно 18.5px) для напівжирного накреслення. Великий текст легше читати при меншому контрасті, тому для нього вимоги м’якші: проходження AA при 3:1 та AAA при 4.5:1 замість суворіших порогів для звичайного тексту.

Які формати кольорів можна вводити?

Ви можете ввести значення HEX (наприклад, #1a1a1a), rgb() (наприклад, rgb(26, 26, 26)) або hsl(), або просто клікнути на кольоровий квадрат для вибору. Кнопка заміни дозволяє миттєво поміняти місцями кольори тексту та фону.

Тут використовується WCAG 2 чи новіший метод APCA?

Цей інструмент використовує формулу WCAG 2.1 / 2.2, на яку сьогодні спираються офіційні вимоги та аудити доступності. APCA — це новіший метод візуального сприйняття, який наразі розробляється для WCAG 3. Він перспективний, але ще не став стандартом відповідності, тому результати перевірки тут його не використовують.

Конвертер кольорівКонвертуйте кольори між HEX, RGB, HSL, HSV, CMYK та LAB — змінюйте будь-яке поле, а інші оновлюватимуться на льоту.Піпетка кольорів із зображенняВибирайте будь-який піксель на зображенні та отримуйте його коди HEX, RGB та HSL за допомогою лупи для максимальної точності.Конвертер форматів зображеньКонвертуйте зображення JPG, PNG, WebP, HEIC та AVIF безпосередньо у своєму браузері.Калькулятор співвідношення сторінПеретворюйте будь-які значення ширини та висоти на чітке співвідношення на кшталт 16:9 або вибирайте пропорцію та розраховуйте відсутню сторону для відео, фото та екранів.Генератор Box ShadowКеруйте параметрами box-shadow за допомогою повзунків, комбінуйте шари для глибини та миттєво копіюйте готовий код CSS.Генератор градієнтівСтворюйте лінійні, радіальні або конічні градієнти, додавайте колірні точки, налаштовуйте напрямок та копіюйте CSS в один клік.Тест монітораПеревірте будь-який екран за допомогою повноекранних тестових шаблонів — биті пікселі, засвіти підсвічування, бандинг, гамма, шлейфи, частота оновлення тощо.