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

Перевіряйте локально контрастність кольорів переднього плану та фону за формулою відносної яскравості WCAG, окремо визначаючи поріг AA/AAA для звичайного та великого основного тексту, із підтримкою експорту звітів.

Локальна обробка в браузері
Цю сторінку перевірено за відкритим каталогом; після ввімкнення JavaScript можна користуватися повною функціональністю.
Посібник з використання

Як користуватися перевіркою контрастності кольорів

Значення кольорів обчислюються лише поточним браузером; їх не буде надіслано чи збережено.

  1. Введіть два кольори

    Установіть кольори переднього плану та тла за допомогою палітри або вставивши значення #RRGGBB, а попередній перегляд оновиться синхронно.

  2. Порогові значення перевірки

    Натисніть «Перевірити», щоб окремо переглянути статус проходження для звичайного тексту AA, звичайного тексту AAA і великого тексту AA.

  3. Скопіювати запис перевірки

    Після проходження можна скопіювати звіт або завантажити TXT, де зафіксовано значення кольорів, співвідношення та результати для всіх порогів.

Обмеження та зауваження

  • Перший випуск приймає лише кольори без прозорості: #RGB або #RRGGBB; для напівпрозорих кольорів спочатку потрібно визначити фактичне тло композиції.
  • 4.5:1 Застосовується до звичайного основного тексту AA, 3:1 застосовується до великого тексту AA, 7:1 є довідковим порогом для звичайного основного тексту AAA; також потрібно перевірити розмір шрифту, насиченість і контраст нетекстових елементів.
  • Інструмент обчислює лише пару суцільних кольорів і не моделює градієнти, зображення, тіні, рендеринг шрифтів або складний фон.

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

Що означає 4.5:1?

Це WCAG мінімальний поріг AA контрастності для звичайного основного тексту; AA поріг для основного тексту великого розміру становить 3:1.

Чому прозорий колір не можна визначити безпосередньо?

Кінцевий колір прозорого переднього плану або фону залежить від порядку композиції та фонового зображення; надійніше спочатку визначити суцільний колір, який фактично відображається.

Чи гарантує відповідність контрастності доступність?

Не обов’язково. Також слід перевірити розмір шрифту, насиченість шрифту, стани, фокус, нетекстові компоненти, фонові зображення та вигляд на реальному пристрої.

Відгук про сторінкуВиявили проблему або маєте пропозиції щодо покращення?
Функцію зворотного зв’язку потрібно використовувати в онлайн-версії

Будь ласка, увімкніть JavaScript в онлайн-версії, а потім надішліть; локальні функції поточного інструмента або прикладу не будуть зачеплені.

Перейти до онлайн-версії, щоб залишити відгук