Доступность цветовых контрастов

Одним из ключевых аспектов создания интерфейсов с библиотекой MUI является обеспечение доступности (accessibility, a11y) через корректное использование цветовых контрастов. Цветовые контрасты напрямую влияют на читаемость текста, видимость элементов управления и восприятие визуальных компонентов пользователями с различными нарушениями зрения. MUI предоставляет встроенные инструменты для управления контрастом, а также интеграцию с системами темизации для автоматического соблюдения стандартов WCAG.

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

MUI использует систему цветовой палитры, определяемую в теме, которая включает ключевые цвета: primary, secondary, error, warning, info, success. Каждый из этих цветов имеет различные оттенки (light, main, dark) и варианты контраста текста (contrastText).

Пример настройки темы:

import { createTheme } from '@mui/material/styles';

const theme = createTheme({
  palette: {
    primary: {
      light: '#7986cb',
      main: '#3f51b5',
      dark: '#303f9f',
      contrastText: '#ffffff',
    },
    secondary: {
      light: '#ff4081',
      main: '#f50057',
      dark: '#c51162',
      contrastText: '#000000',
    },
  },
});

contrastText используется автоматически компонентами MUI, например, Button, Chip, Fab, чтобы обеспечить достаточный уровень контраста текста по стандартам WCAG 2.1, минимально 4.5:1 для обычного текста и 3:1 для крупного текста.

Функции для вычисления контраста

MUI предоставляет утилиту getContrastText из theme.palette для динамической оценки контрастности. Это полезно при использовании кастомных цветов или динамически меняющихся фонов.

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

import { useTheme } from '@mui/material/styles';

function ColoredBox({ bgColor }) {
  const theme = useTheme();
  const textColor = theme.palette.getContrastText(bgColor);

  return (
    <div style={{ backgroundColor: bgColor, color: textColor, padding: '16px' }}>
      Текст с правильным контрастом
    </div>
  );
}

В этом примере MUI автоматически подбирает цвет текста — белый или черный — в зависимости от яркости фона, обеспечивая читаемость.

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

Контраст текста должен соответствовать требованиям WCAG 2.1:

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

Для ручной проверки MUI предоставляет утилиту lighten и darken из пакета @mui/system для подстройки оттенков до достижения необходимого контраста.

Пример корректировки цвета:

import { lighten, darken } from '@mui/system';

const adjustedColor = darken('#f50057', 0.2); // затемняет цвет для увеличения контраста

Цвета состояния компонентов

Особое внимание уделяется состояниям компонентов: hover, active, disabled. Контраст должен сохраняться во всех состояниях, иначе элементы интерфейса могут стать нечитаемыми.

Пример конфигурации Button:

import Button from '@mui/material/Button';

<Button
  variant="contained"
  color="primary"
  sx={{
    '&:hover': {
      backgroundColor: theme => theme.palette.primary.dark,
      color: theme => theme.palette.getContrastText(theme.palette.primary.dark),
    },
    '&:disabled': {
      backgroundColor: theme => theme.palette.action.disabledBackground,
      color: theme => theme.palette.action.disabled,
    },
  }}
>
  Кнопка с доступным контрастом
</Button>

Здесь getContrastText гарантирует, что текст останется читаемым при наведении и в активном состоянии.

Доступность на основе цветовой темы

MUI поддерживает динамическую смену тем: светлую (light) и тёмную (dark). Контраст текста автоматически адаптируется при изменении темы, если использовать theme.palette.getContrastText.

Пример с динамической темой:

import { ThemeProvider, createTheme } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';

const lightTheme = createTheme({ palette: { mode: 'light' } });
const darkTheme = createTheme({ palette: { mode: 'dark' } });

function App({ darkMode }) {
  return (
    <ThemeProvider theme={darkMode ? darkTheme : lightTheme}>
      <CssBaseline />
      <ColoredBox bgColor="#3f51b5" />
    </ThemeProvider>
  );
}

Дополнительные инструменты MUI для доступности

  • Typography: автоматически подбирает цвет в зависимости от контекста (color="textPrimary" или color="textSecondary").
  • Box и Paper: позволяют применять sx и цветовую палитру для соблюдения контрастности фона и текста.
  • useTheme: обеспечивает доступ к всей палитре и функции getContrastText для динамического вычисления цвета текста.

Эти инструменты делают MUI мощным решением для создания интерфейсов с соблюдением стандартов доступности и правильной цветовой контрастности.

Оглавление