Дизайн

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

Коефіцієнт контрастності WCAG для двох кольорів.

Майже до того, як ми усвідомили, ми вже були в повітрі.
1.00
Коефіцієнт контрастності
СтандартнийЗвичайний текстВеликий текст
WCAG AA
WCAG AAA
WCAG 1.4.11Нетекстові елементи / компоненти UI (≥3:1): —

Найближча альтернатива тексту рівня AAОбчислюється альтернатива OKLCH…

Цей звіт відповідає вимогам WCAG 2.2 до коефіцієнта контрастності. APCA залишається експериментальним і не є результатом відповідності WCAG 3.

Вибрати кольори? Конвертер кольорів · соціальні біографії: Генератор гарного тексту · ваги: Генератор відтінків кольору.

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

Виберіть колір тексту та колір фону. Коефіцієнт контрастності та прохід/непрохід для кожного рівня WCAG оновлюються в реальному часі з попереднім переглядом.

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

Що таке гарний коефіцієнт контрастності?

WCAG AA вимагає контраст 4.5:1 для звичайного тексту та 3:1 для великого. Для AAA потрібно відповідно 7:1 і 4.5:1. WCAG 1.4.11 також вимагає 3:1 для важливої нетекстової графіки, меж або станів компонентів UI.

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

Великий текст — це приблизно 18pt (24px) або 14pt (18,66px) жирний і більше.

Як обчислюється коефіцієнт?

На основі відносної яскравості обох кольорів: (світліший + 0,05) ÷ (темніший + 0,05), згідно з формулою WCAG.

Останнє оновлення: