Как проверял что цвет доступен

Проверяю доступность цвета через контрастность, используя WCAG 2.1 стандарты. Основные инструменты:

1. DevTools – в панели Color Picker есть проверка контраста (AA/AAA)
2. Онлайн-инструменты:
   • WebAIM Contrast Checker
   • Contrast Ratio (https://contrast-ratio.com)
3. Автоматизированные тесты:
   javascript

   Копировать

   // Пример с axe-core
   await axe.run(document, {
     rules: { 'color-contrast': { enabled: true } }
   });

Минимальные требования:

• Текст: 4.5:1 (AA), 7:1 (AAA)
• Крупный текст (18+ px): 3:1 (AA)
• Неактивные элементы: не требуют контраста

Пример плохой практики:

/* Контраст 2.8:1 - не проходит AA */
.button {
  background: #AAAAAA;
  color: #FFFFFF;
}