Руководство по цветовому контрасту WCAG
Поймите требования к контрастности AA и AAA, как тестировать текстовые компоненты и компоненты пользовательского интерфейса и как исправлять неудачные пары.
FAQ
- Какое соотношение мне нужно для кнопок?
- Компонентам пользовательского интерфейса и графическим объектам обычно требуется соотношение как минимум 3:1 по отношению к соседним цветам. Текст внутри кнопок по-прежнему требует соотношения сторон 4,5:1 (AA) или 3:1 для крупного текста.
Основы контраста WCAG
WCAG 2.x определяет минимальные коэффициенты контрастности между цветами текста и фона. Уровень AA — это общая юридическая цель и цель продукта; AAA является более строгим и по возможности рекомендуется использовать в основном тексте.
Контраст основан на относительной яркости, а не на оттенке. Два цвета могут выглядеть по-разному, но не контрастировать, если их яркость слишком одинакова.
Рабочий процесс тестирования
Выберите цвета переднего плана и фона из вашей дизайн-системы. Пропустите их через программу проверки контраста. Обратите внимание на пороговые значения нормального и большого текста.
Тестируйте состояния наведения, фокуса и отключенные состояния, а не только кнопки и ссылки по умолчанию.