Контрастность и читаемость

Контрастность и читаемость являются ключевыми аспектами при разработке интерфейсов с использованием Ant Design, так как они напрямую влияют на восприятие информации пользователем и соответствие стандартам доступности (a11y).

Цветовые палитры и уровень контраста

Ant Design использует систему предопределённых цветов, где каждый базовый цвет имеет несколько оттенков. Для текста, фона и элементов интерфейса необходимо следовать принципу достаточного контраста:

  • Основной текст: рекомендуется использовать цвет rgba(0, 0, 0, 0.85) на светлом фоне. Такой цвет обеспечивает высокую читаемость и соответствует стандарту WCAG AA для обычного текста.
  • Второстепенный текст: цвет rgba(0, 0, 0, 0.45) используется для подсказок, вспомогательной информации и менее значимых элементов.
  • Интерактивные элементы: кнопки, ссылки и элементы управления должны иметь контраст не менее 4.5:1 относительно фона. Для этого Ant Design предоставляет цветовые переменные в Less и CSS-in-JS через token систему.

Пример использования токенов цвета в Ant Design:

import { theme } from 'antd';

const { token } = theme.useToken();

const styles = {
  color: token.colorText,
  backgroundColor: token.colorBgContainer,
};

Здесь colorText и colorBgContainer автоматически подбираются под текущую тему (light/dark), обеспечивая оптимальный контраст.

Контраст текста и фона

Контраст текста и фона необходимо проверять не только для стандартного текста, но и для:

  • Placeholder в input-компонентах
  • Текстовых кнопок на цветных фонах
  • Модальных окон и уведомлений

Ant Design по умолчанию применяет прозрачность для второстепенного текста (colorTextSecondary), чтобы визуально разграничить уровни информации. Важно контролировать, чтобы прозрачность не снижала контраст ниже допустимого уровня.

Темная тема и адаптивная читаемость

При использовании dark mode Ant Design автоматически корректирует палитру:

  • Основной текст становится светлым (#ffffff или rgba(255,255,255,0.85))
  • Фон контейнеров темный (#141414 или близкие оттенки)
  • Компоненты с яркими акцентами (например, кнопки primary) сохраняют достаточный контраст для видимости

Токены темы позволяют динамически менять цвета компонентов, чтобы обеспечить читаемость независимо от выбранной темы:

import { ConfigProvider } from 'antd';
import { theme } from 'antd';

<ConfigProvider
  theme={{
    token: {
      colorBgContainer: '#1f1f1f',
      colorText: '#f0f0f0',
    },
  }}
>
  <App />
</ConfigProvider>

Текст и типографика

Ant Design включает компонент Typography, который упрощает работу с читаемостью:

  • Title – для заголовков разного уровня, автоматически применяет размеры и вес шрифта
  • Text – для основного текста, поддерживает strong, italic и mark
  • Paragraph – для абзацев с правильным межстрочным интервалом

Использование этих компонентов гарантирует:

  • Поддержку стандарта контраста
  • Единообразие межстрочных интервалов и отступов
  • Корректное отображение текста при масштабировании

Пример использования Typography с контролем контраста:

import { Typography } from 'antd';

const { Title, Paragraph, Text } = Typography;

<Typography>
  <Title level={2}>Контрастный заголовок</Title>
  <Paragraph>
    <Text strong>Важная информация:</Text> уровень контраста текста с фоном критически важен для читаемости.
  </Paragraph>
</Typography>

Контраст в интерактивных элементах

Кнопки, селекты и ссылки должны быть визуально выделены:

  • Primary Button: цвет текста белый на ярком фоне (token.colorPrimary)
  • Default Button: темный текст на светлом фоне (token.colorText)
  • Hover и Focus состояния: используют token.colorPrimaryHover и token.colorPrimaryActive для сохранения контраста при взаимодействии

Пример кастомизации кнопки с повышенным контрастом:

<Button
  style={{
    backgroundColor: token.colorPrimary,
    color: token.colorTextLightSolid,
  }}
>
  Нажми меня
</Button>

Проверка доступности

Ant Design рекомендует использовать встроенные инструменты для проверки доступности:

  • Contrast checker в Storybook компонентов
  • Использование CSS-переменных токенов для соблюдения контрастного соотношения
  • Проверка aria-* атрибутов и семантики компонентов, чтобы текст был читаем экранными читалками

Итоговые рекомендации

  • Всегда использовать токены темы (token.colorText, token.colorBgContainer, token.colorPrimary)
  • Следить за уровнем прозрачности второстепенного текста
  • Использовать Typography для заголовков и абзацев
  • Проверять интерактивные элементы на достаточный контраст в любых состояниях (hover, focus, disabled)
  • При переходе на dark mode корректировать цвета текста и фона с помощью токенов

Эти правила обеспечивают оптимальную читаемость интерфейсов Ant Design и соответствие стандартам доступности.

Оглавление