Цветовые контрасты

MUI (Material-UI) предоставляет мощный инструмент для управления цветами через систему тема (theme). Цветовые контрасты играют ключевую роль в доступности интерфейса, визуальной иерархии и эстетике приложения. В MUI они задаются через палитру (palette) и могут быть использованы в компонентах для фона, текста и элементов управления.

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

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      contrastText: '#fff',
    },
    secondary: {
      main: '#dc004e',
      contrastText: '#000',
    },
  },
});

Здесь contrastText автоматически вычисляется для обеспечения читаемости текста на цветном фоне. MUI использует алгоритм WCAG 2.1 для расчета контраста, что позволяет поддерживать высокий уровень доступности.

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

В MUI ключевым моментом является правильное сочетание фонового цвета и цвета текста. Библиотека предоставляет свойства contrastText для основных цветов и theme.palette.getContrastText(color) для динамического вычисления текста:

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

function ContrastButton() {
  const theme = useTheme();
  const backgroundColor = theme.palette.primary.main;
  const textColor = theme.palette.getContrastText(backgroundColor);

  return <Button style={{ backgroundColor, color: textColor }}>Нажми меня</Button>;
}

Важно: MUI гарантирует соответствие контраста текста и фона стандартам доступности, но при кастомизации цветов лучше проверять соответствие вручную.

Контраст для состояний компонентов

Компоненты MUI поддерживают различные состояния: hover, active, disabled. Цветовые контрасты можно контролировать через тему:

const theme = createTheme({
  palette: {
    primary: {
      main: '#1976d2',
      contrastText: '#fff',
      dark: '#115293',
      light: '#63a4ff',
    },
  },
});
  • main — основной цвет компонента.
  • light — используется для hover или выделенных элементов.
  • dark — применяется для активного состояния или элементов с более сильным визуальным акцентом.

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

Контрастные комбинации для UI-элементов

MUI выделяет три типа контрастов:

  1. Контраст текста и фона Используется для кнопок, карточек и текста. Пример:
import { Typography, Paper } from '@mui/material';

<Paper style={{ backgroundColor: theme.palette.secondary.main, padding: '16px' }}>
  <Typography style={{ color: theme.palette.secondary.contrastText }}>
    Контрастный текст на фоне
  </Typography>
</Paper>

  1. Контраст акцентов Применяется для выделения важных элементов через secondary или error цвета.

  2. Контраст между элементами интерфейса Используется для создания визуальной иерархии, например, между панелями, списками и кнопками.

import { Box } from '@mui/material';

<Box sx={{ backgroundColor: 'primary.main', color: 'primary.contrastText', p: 2 }}>
  Главная панель
</Box>

<Box sx={{ backgroundColor: 'secondary.main', color: 'secondary.contrastText', mt: 2, p: 2 }}>
  Боковая панель
</Box>

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

MUI поддерживает цвета с прозрачностью через функцию alpha из пакета @mui/material/styles. Это полезно для overlay, теней и hover-эффектов:

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

<Box sx={{
  backgroundColor: alpha(theme.palette.primary.main, 0.1),
  color: theme.palette.primary.main,
  p: 2
}}>
  Легкий контраст с прозрачностью
</Box>

Прозрачность позволяет создавать мягкие контрасты без резкого нарушения цветовой гармонии.

Контраст для доступности (Accessibility)

MUI ориентируется на WCAG 2.1:

  • Минимальный контраст текста и фона: 4.5:1 для обычного текста.
  • Контраст крупных заголовков: 3:1.

Функции theme.palette.getContrastText() и alpha() позволяют автоматически поддерживать эти стандарты.

Создание пользовательской палитры с контрастом

Можно расширять тему для всех цветов приложения, добавляя собственные оттенки и контрастные тексты:

const theme = createTheme({
  palette: {
    customGreen: {
      main: '#4caf50',
      light: '#80e27e',
      dark: '#087f23',
      contrastText: '#fff',
    },
    customOrange: {
      main: '#ff9800',
      contrastText: '#000',
    },
  },
});

После этого доступ к цветам возможен через theme.palette.customGreen.main и theme.palette.customGreen.contrastText. Такой подход обеспечивает согласованность контраста во всем интерфейсе.

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

  • Использовать contrastText для текста на цветных фонах.
  • Применять light и dark оттенки для состояний hover и active.
  • Для overlay и теней использовать alpha для мягких контрастов.
  • Проверять соответствие WCAG для текстов и интерактивных элементов.
  • Создавать отдельные кастомные цвета с контрастным текстом для брендинга.

Цветовые контрасты в MUI — это не только визуальная эстетика, но и основа доступного и удобного интерфейса. Правильное применение контрастов повышает читаемость, привлекает внимание к важным элементам и делает интерфейс интуитивно понятным.

Оглавление