Контраст цветов

Контраст цветов обеспечивает читаемость текста, иконок и focus indicator на фоне. WCAG 2.x обычно требует **4.5:1** для обычного текста и **3:1** для крупного текста и UI-компонентов. Не используйте цвет как единственный сигнал состояния — добавляйте текст, иконки или паттерны.

					:focus-visible {
  outline: 2px solid #005fcc;
  outline-offset: 2px;
}
.error { color: #b00020; border-left: 4px solid #b00020; }
				

| Проверка | Инструменты | |----------|-------------| | Текст на фоне | Contrast checker, плагины Figma | | Disabled vs active | Не только более светлый цвет — меняйте label | | Focus ring | 3:1 к соседним цветам | | Графики | Паттерны или подписи, не только цвет |

Dark mode и overlay меняют контраст — проверяйте обе темы и hover/focus.

На интервью: AA vs AAA; порог large text; контраст placeholder и disabled; дизайн для color-blind.

Типовые ошибки: серый placeholder вместо label; только красный/зелёный success/error; тонкий focus на шумном фоне; brand palette на mobile на солнце.

Компромисс — эстетика бренда против читаемости при слабом зрении и ярком свете.

Чеклист:

• Измеряйте контраст на реальных фонах.
• Не-color сигналы для ошибок и выбора.
• `:focus-visible` отличим от hover.
• Повторная проверка при смене light/dark.