MicroTools

Non-Text Contrast Checker

Перевіряйте контраст 3:1 для рамок, іконок, кілець фокусу та станів UI.

Про інструмент Non-Text Contrast Checker

Перевіряйте WCAG 1.4.11 нетекстовий контраст для UI-компонентів. Валідуйте контраст рамок, іконок, кілець фокусу, полів введення та станів кнопок відносно суміжних кольорів. Мінімальне співвідношення 3:1.

Як використовувати

  1. 1Оберіть тип UI-елемента для перевірки (рамка, іконка, кільце фокусу тощо).
  2. 2Введіть колір елемента та суміжний колір фону.
  3. 3Перегляньте коефіцієнт контрастності та результат WCAG 1.4.11.
  4. 4Для кілець фокусу також введіть колір нефокусованого стану для перевірки обох станів.
  5. 5Використовуйте «Запропонувати виправлення» якщо коефіцієнт нижче 3:1.

Часті запитання

Що таке нетекстовий контраст (WCAG 1.4.11)?
WCAG 1.4.11 вимагає, щоб UI-компоненти (кнопки, поля, чекбокси) та графічні об'єкти (іконки, графіки) мали контраст не менше 3:1 відносно суміжних кольорів.
Що вважається UI-компонентом?
Будь-що, що передає інформацію або стан: рамки полів введення, контури чекбоксів, радіокнопки, індикатори фокусу, межі кнопок та іконкові елементи керування.
Чи поширюється це на неактивні елементи?
Ні — WCAG явно звільняє неактивні UI-компоненти (наприклад, відключені кнопки) від вимог нетекстового контрасту.
Чим це відрізняється від текстового контрасту?
Текстовий контраст (1.4.3) вимагає 4.5:1 або 3:1 (великий текст). Нетекстовий контраст (1.4.11) завжди вимагає 3:1 незалежно від розміру.

Інформація

Категорія
compliance
Використання
Необмежено

Схожі інструменти

WCAG Contrast Checker

Перевіряйте рівні AA/AAA контрастності для будь-яких двох кольорів. Отримайте виправлення миттєво.

Accessible Color Palette Generator

Генеруйте повну AA-сумісну кольорову палітру з вашого фірмового кольору.

Form Accessibility Validator

Валідуйте мітки, aria-атрибути, обов'язкові поля та повідомлення про помилки в HTML-формах.

Більше інструментів: compliance

WCAG Contrast Checker

Перевіряйте рівні AA/AAA контрастності для будь-яких двох кольорів. Отримайте виправлення миттєво.

Heading Structure Auditor

Знаходьте пропущені рівні, дублікати H1 та зламану ієрархію заголовків в HTML/Markdown.

Link Text Quality Checker

Знаходьте «натисніть тут», дублікати посилань та порожні анкери, що порушують WCAG 2.4.4.

Alt-Text Linter

Знаходьте відсутній, надлишковий або неякісний alt-текст у вашому HTML миттєво.