| Уровень | Обычный текст | Крупный текст | UI-компоненты |
|---|---|---|---|
| AA | — | — | — |
| AAA | — | — | Н/Д |
Что такое Contrast Checker?
Проверьте коэффициент цветового контраста на соответствие требованиям доступности WCAG AA и AAA. Мгновенно проверяйте сочетания цветов переднего плана и фона для обычного текста, крупного текста и компонентов интерфейса.
Как использовать Contrast Checker
- Введите или выберите цвет текста переднего плана.
- Введите или выберите цвет фона за ним.
- Мгновенно проверьте коэффициент контрастности и результат соответствия WCAG (пройдено или не пройдено).
- Настраивайте любой из цветов, пока сочетание не достигнет вашей цели по доступности.
Понимание цветового контраста ▾
Пример
Типичные сценарии использования
- Проверяйте контраст кнопок и ссылок перед выпуском обновлений интерфейса
- Проверяйте цвета текста в брендовых системах и руководствах по стилю
- Проверяйте маркетинговую графику на читабельность
- Быстро проверяйте комбинации тёмного на светлом и светлого на тёмном
Часто задаваемые вопросы
WCAG AA требует коэффициент 4.5:1 для обычного текста и 3:1 для крупного текста — это стандартное законодательное требование. AAA требует 7:1 для обычного текста и 4.5:1 для крупного текста, обеспечивая повышенную доступность для пользователей с серьёзными нарушениями зрения.
Да — WCAG 1.4.11 (Non-text Contrast) требует 3:1 для компонентов UI и графических элементов. Результат «AA UI Components» в таблице покрывает это требование.
Соответствие AAA не требуется для всего контента. WCAG AA — стандартное законодательное требование в большинстве юрисдикций. Стремитесь к AAA где возможно, но AA достаточно для юридического соответствия.
WCAG определяет крупный текст как 18pt (24px) или больше для обычного начертания или 14pt (примерно 18.67px) или больше для полужирного текста. Для крупного текста ниже требование к контрасту (3:1 для AA), так как его изначально легче читать.