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

Контрастность и читаемость играют ключевую роль в создании веб-компонентов с использованием FAST Element, так как они напрямую влияют на восприятие интерфейса пользователем и соответствие стандартам доступности (WCAG). FAST Element предоставляет гибкие средства для управления стилями и состояниями элементов, что позволяет обеспечить оптимальный контраст и комфортное чтение текста.

Управление контрастностью через CSS-переменные

FAST Element активно использует CSS-переменные, что позволяет задавать динамические цветовые темы и поддерживать высокую контрастность. Например, базовые цвета текста и фона можно определить так:

:host {
    --neutral-foreground-rest: #212121;
    --neutral-background-rest: #ffffff;
    --neutral-foreground-hover: #000000;
    --neutral-background-hover: #f0f0f0;
}

Эти переменные затем применяются в шаблонах компонентов:

import { FASTElement, html, css } from "@microsoft/fast-element";

const template = html<MyButton>`
    <button class="btn">
        <slot></slot>
    </button>
`;

const styles = css`
    .btn {
        color: var(--neutral-foreground-rest);
        background-color: var(--neutral-background-rest);
        border: 1px solid var(--neutral-foreground-rest);
        padding: 8px 16px;
        font-size: 16px;
    }
    .btn:hover {
        color: var(--neutral-foreground-hover);
        background-color: var(--neutral-background-hover);
    }
`;

export class MyButton extends FASTElement {}
FASTElement.define({ name: "my-button", template, styles });

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

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

Для обеспечения читаемости текста необходимо соблюдать минимальный коэффициент контрастности. Стандарты WCAG рекомендуют:

  • 4.5:1 для обычного текста;
  • 3:1 для крупного текста (≥ 18pt или 14pt жирного).

В FAST Element это можно контролировать через утилиты Design System:

import { neutralForegroundRest, neutralBackgroundRest } from "@microsoft/fast-components";

const contrastRatio = calculateContrast(neutralForegroundRest, neutralBackgroundRest);

Функция calculateContrast может использоваться для динамического выбора цветовой пары, соответствующей стандартам доступности. FAST предоставляет встроенные токены цветов, которые упрощают соблюдение этих требований без ручного подбора значений.

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

Читаемость зависит не только от базового контраста, но и от визуальных состояний компонентов: hover, active, disabled. FAST Element позволяет легко определять их через CSS и состояния шаблона:

.btn:disabled {
    color: var(--neutral-foreground-rest);
    background-color: var(--neutral-background-rest);
    opacity: 0.5;
    cursor: not-allowed;
}

.btn:focus {
    outline: 2px solid var(--accent-color);
    outline-offset: 2px;
}

Использование outline и изменения контраста при фокусе улучшает восприятие компонента пользователем с ограниченным зрением и повышает доступность.

Динамическая смена тем

FAST Element интегрируется с Design System Provider, что позволяет переключать темы в реальном времени:

<fast-design-system-provider
    design-system:fill-color="#ffffff"
    design-system:neutral-foreground-rest="#212121"
    design-system:accent-color="#0078d4"
>
    <my-button>Нажать</my-button>
</fast-design-system-provider>

Такой подход обеспечивает корректную контрастность на всех этапах работы приложения и поддерживает режимы высокой контрастности без изменения структуры компонентов.

Использование типографики для читаемости

Контрастность включает не только цвет, но и размер и вес шрифта. В FAST Element удобно задавать типографику через CSS-переменные:

:host {
    --type-ramp-base-font-size: 16px;
    --type-ramp-base-font-weight: 400;
    --type-ramp-heading-font-size: 24px;
    --type-ramp-heading-font-weight: 600;
}

Комбинация размеров шрифта и контраста цвета обеспечивает оптимальную читаемость на всех устройствах и экранах с различными уровнями яркости.

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

FAST Element не предоставляет встроенного проверщика контрастности, но поддерживает интеграцию с инструментами вроде axe-core или Lighthouse, позволяя автоматически тестировать компоненты:

import axe from "axe-core";

axe.run(document, {}, (err, results) => {
    if (results.violations.length) {
        console.warn("Найдены проблемы с контрастностью:", results.violations);
    }
});

Это позволяет гарантировать соответствие компонент стандартам WCAG при любых изменениях темы или стилей.

Контрастность и читаемость в FAST Element достигаются сочетанием динамических CSS-переменных, системных токенов, управляемых состояний и типографики, что обеспечивает как визуальную привлекательность, так и доступность интерфейса для всех пользователей.

Оглавление