Тест контраста цветов на фоне бренда #1d4999

Все примеры ниже показаны непосредственно на фоне брендового синего. Пометки AA / AAA — соответствие WCAG для обычного текста.

Белые и светлые (РЕКОМЕНДУЕТСЯ)

Белый текст #FFFFFF
Основной текст, меню, заголовки
AA ✓ / AAA ✓
Светло-серый #F1F5F9
Вторичный текст
AA ✓ / AAA ✓
Серый #E2E8F0
Подписи, breadcrumbs
AA ✓ / AAA ✕

Акцентные цвета (ОСТОРОЖНО)

Жёлтый #FFC107
Только крупные элементы / иконки
Только крупный текст
Оранжевый #FF9800
Hover, маркеры
Только крупный текст
Лайм #84CC16
Статусы OK
Только крупный текст
Голубой #38BDF8
Иконки, ссылки (крупные)
Только крупный текст

CTA-кнопка (ПРАВИЛЬНО)

Получить КП
Жёлтая кнопка + тёмный текст
AA ✓ / AAA ✓
Крупный акцентный заголовок
Допустимо для hero / баннеров
AA ✓ (крупный)

Плохо читается (НЕ ИСПОЛЬЗОВАТЬ)

Тёмно-синий на синем
Контраст ✕
Чёрный на синем
Контраст ✕