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

Основные принципы контрастности

Контрастность текста и элементов интерфейса напрямую влияет на удобство восприятия информации. В Carbon Components Svelte для управления контрастностью используются предопределённые переменные темы и классы, которые обеспечивают соответствие стандартам WCAG (Web Content Accessibility Guidelines).

Основные моменты:

  • Цвет текста должен контрастировать с фоном минимум 4.5:1 для обычного текста и 3:1 для крупного текста.
  • Контраст фона элементов управления (кнопок, полей ввода, карточек) должен позволять быстро различать активные и неактивные состояния.
  • Использование динамических тем требует проверки контраста при переключении между светлой и тёмной схемой.

Работа с переменными темы

Carbon Components Svelte наследует переменные из Carbon Design System. Ключевые переменные, влияющие на контраст:

$interactive-01: #0f62fe; // Основной интерактивный цвет
$text-01: #161616;        // Основной цвет текста
$text-02: #525252;        // Вторичный текст
$ui-background: #ffffff;  // Фоновый цвет интерфейса

Советы по использованию:

  • Для кнопок используйте $interactive-01 на светлом фоне или $interactive-01-02 на тёмном.
  • Текстовые элементы на фоне $ui-background должны использовать $text-01 для максимальной читаемости.
  • Вторичный текст или подсказки применяют $text-02 и не должны превышать 70% от основного контраста.

Компоненты с повышенными требованиями к читаемости

  1. Кнопки (Button.svelte)

    • Свойство kind (primary, secondary, tertiary) автоматически применяет соответствующие контрастные цвета.
    • Для кастомного стиля использовать комбинацию классов bx--btn и переменных темы.
    • Проверять контраст в разных состояниях (hover, disabled, active) через :global(.bx--btn:disabled).

  2. Информационные карточки (Card.svelte)

    • Заголовки должны иметь минимум 18px и 400 вес для текста на светлом фоне.
    • Фоновая заливка должна быть не менее 3:1 контрастом относительно текста и значков.
    • В тёмной теме использовать модификатор bx--card--inverse.

  3. Таблицы (DataTable.svelte)

    • Заголовки и строки с данными должны обеспечивать чёткую градацию цвета фона.
    • Для чередующихся рядов применять классы bx--data-table--zebra с корректными оттенками серого для соблюдения контраста.

Инструменты проверки и улучшения контрастности

  • @carbon/colors – библиотека с предопределёнными цветами и их градациями.
  • sass-mq – позволяет адаптировать цвета и размеры текста под разные разрешения и сохранять читаемость.
  • Инструменты проверки контраста: встроенные утилиты браузера, axe-core, Lighthouse.

Практические рекомендации по Svelte

  • В Carbon Components Svelte состояние компонента можно динамически изменять через bind:class или bind:style, чтобы адаптировать контраст в зависимости от темы.
  • Использование слотов и кастомных стилей должно учитывать текущую тему. Для текста в слотах рекомендуется применять классы bx--type-body-short-01 или bx--type-heading-02 для соответствия типографике и контрасту.

Контраст и типографика

Читаемость тесно связана с размером, высотой строки и межбуквенным интервалом. Carbon Components Svelte предлагает стандартизированные классы типографики:

  • bx--type-body-short-01 – для основного текста
  • bx--type-body-long-01 – для длинных описаний
  • bx--type-heading-01 – для крупных заголовков

Использование этих классов гарантирует оптимальный контраст и линейное восприятие текста, особенно при смене темы.

Автоматизация проверки контраста

Можно создавать утилиты для динамического подсчета контраста с помощью Svelte reactive statements:




Контраст текста: {contrastRatio.toFixed(2)}:1

Это позволяет мониторить контрастность в реальном времени и автоматически корректировать цвета компонентов при изменении темы или пользовательских настроек.

Оглавление