MicroTools

WCAG Contrast Checker

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

Попередній перегляд — Normal text (16px)

Large text (24px bold)

Про інструмент WCAG Contrast Checker

Безкоштовний WCAG-перевірник контрасту кольорів. Введіть будь-які два кольори (hex, RGB або HSL) щоб миттєво розрахувати коефіцієнт контрастності та перевірити відповідність AA/AAA для звичайного тексту, великого тексту та UI-компонентів.

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

  1. 1Введіть колір переднього плану (текст) та фону у будь-якому форматі — hex, rgb(), hsl() або rgba().
  2. 2Коефіцієнт контрастності розраховується миттєво.
  3. 3Дивіться, які рівні WCAG (AA звичайний, AA великий, AAA) пройдені або провалені.
  4. 4Якщо тест провалено — натисніть «Запропонувати виправлення» для найближчого AA-сумісного кольору.
  5. 5Скопіюйте виправлений колір для використання в дизайні.

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

Який коефіцієнт контрастності потрібен для проходження WCAG AA?
Для звичайного тексту (менше 18pt / 14pt жирний) — мінімум 4.5:1. Для великого тексту (18pt+ / 14pt+ жирний) — 3:1. UI-компоненти та графічні об'єкти потребують 3:1.
Що таке WCAG AAA?
Найвищий рівень доступності WCAG. Вимагає 7:1 для звичайного тексту та 4.5:1 для великого. Відповідність AAA необов'язкова, але рекомендована для критично важливого контенту.
Чи підтримує інструмент прозорість (alpha)?
Так — введіть кольори з альфа-каналом (наприклад rgba(0,0,0,0.5)) і інструмент розрахує ефективний контраст на білому або вказаному фоні.
Що означає «найближчий сумісний колір»?
Коли ваша комбінація провалена, інструмент коригує яскравість кольору переднього плану до мінімального проходження AA, показуючи найменшу необхідну зміну.

Інформація

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

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

Non-Text Contrast Checker

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

Accessible Color Palette Generator

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

A11y Issue Triage Board

Перетворіть результати аудиту доступності на пріоритизований план виправлень з оцінкою критичності.

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

Non-Text Contrast Checker

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

Heading Structure Auditor

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

Link Text Quality Checker

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

Alt-Text Linter

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