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

Цветовой контраст — ключевой элемент интерфейсного дизайна, влияющий на читаемость, восприятие информации и доступность приложений. В Chakra UI управление цветами строится вокруг тематических объектов, которые позволяют централизованно задавать цвета и использовать их последовательно во всех компонентах.

Тема и цветовые палитры

В Chakra UI все цвета хранятся в объекте theme.colors. Каждый цвет представлен набором оттенков, обычно с шагом 50, 100, 200 и до 900. Например, стандартная палитра синего цвета выглядит так:

const theme = extendTheme({
  colors: {
    blue: {
      50: "#ebf8ff",
      100: "#bee3f8",
      200: "#90cdf4",
      300: "#63b3ed",
      400: "#4299e1",
      500: "#3182ce",
      600: "#2b6cb0",
      700: "#2c5282",
      800: "#2a4365",
      900: "#1A365D",
    },
  },
});

Использование таких палитр обеспечивает согласованность цвета и облегчает поддержку доступного контраста.

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

Для обеспечения читабельности текст должен иметь достаточный контраст с фоном. Chakra UI предоставляет встроенный компонент Text, которому можно назначать цвета из темы:

<Text color="blue.700" bg="blue.50" fontSize="lg">
  Пример текста с высоким контрастом
</Text>
  • color определяет цвет текста.
  • bg задаёт фоновый цвет.
  • Высокий контраст обычно достигается комбинацией светлого фона с темным текстом или наоборот.

Рекомендации по контрасту:

  • Минимальный рекомендуемый коэффициент контраста для обычного текста — 4.5:1.
  • Для крупного текста (≥18pt) достаточно 3:1.
  • Chakra UI позволяет легко тестировать контраст, подбирая оттенки палитры, поскольку каждый цвет уже имеет логически различимые значения по яркости.

Использование семантических цветов

Chakra UI поддерживает семантические цвета (primary, secondary, success, error), которые помогают строить интерфейс с единым стилем:

<Button colorScheme="blue">Основная кнопка</Button>
<Button colorScheme="red">Кнопка ошибки</Button>

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

Автоматический выбор текста на фоне

Для динамического контраста Chakra UI предоставляет функцию useColorModeValue, которая выбирает цвет в зависимости от текущей цветовой схемы (светлая или тёмная):

import { Box, useColorModeValue } from "@chakra-ui/react";

<Box
  bg={useColorModeValue("gray.100", "gray.700")}
  color={useColorModeValue("black", "white")}
  p={4}
>
  Контраст, адаптированный под цветовой режим
</Box>
  • Светлый режим: фон светло-серый, текст черный.
  • Темный режим: фон темно-серый, текст белый.
  • Такая адаптация обеспечивает доступность для пользователей с разными настройками.

Контраст при использовании градиентов

Chakra UI поддерживает CSS-градиенты через свойства bgGradient и background:

<Box
  bgGradient="linear(to-r, teal.500, green.500)"
  color="white"
  p={6}
  borderRadius="md"
>
  Текст на градиентном фоне
</Box>

При градиентных фонах важно проверять контраст текста с каждой зоной градиента, так как визуальная читаемость может меняться. Часто используют текст с белым или черным цветом, или добавляют полупрозрачный оверлей:

<Box
  bgGradient="linear(to-r, teal.500, green.500)"
  color="whiteAlpha.900"
  p={6}
  borderRadius="md"
>
  Улучшенный контраст на градиенте
</Box>

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

Для кнопок важно сочетать цвет текста и фона так, чтобы они были узнаваемыми и доступными:

<Button
  bg="blue.500"
  color="white"
  _hover={{ bg: "blue.600" }}
  _active={{ bg: "blue.700" }}
>
  Доступная кнопка
</Button>
  • _hover и _active обеспечивают динамический контраст при взаимодействии.
  • Chakra UI автоматически применяет фокусные стили (_focus), чтобы выделять элемент и поддерживать визуальную доступность.

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

Chakra UI интегрируется с инструментами для проверки доступности:

  • @chakra-ui/a11y содержит хуки для проверки контраста.
  • Браузерные расширения (например, Contrast Checker) позволяют проверить комбинации цветов из темы.

Настройка собственной палитры

Чтобы гарантировать корректный контраст, можно расширять тему пользовательскими цветами:

const customTheme = extendTheme({
  colors: {
    brand: {
      50: "#f0f4f8",
      100: "#d9e2ec",
      200: "#bcccdc",
      300: "#9fb3c8",
      400: "#829ab1",
      500: "#627d98",
      600: "#486581",
      700: "#334e68",
      800: "#243b53",
      900: "#102a43",
    },
  },
});
  • Использование этих цветов в компонентах через colorScheme или напрямую гарантирует согласованный контраст.
  • В сочетании с useColorModeValue обеспечивается адаптация к темному и светлому режиму.

Контраст в текстовых компонентах

Компоненты Heading и Text можно настраивать по размеру, весу и цвету, чтобы достичь максимальной читаемости:

<Heading color="gray.800" fontSize="3xl">
  Заголовок с высоким контрастом
</Heading>
<Text color="gray.600" fontSize="md">
  Подробный текст на светлом фоне
</Text>
  • Для длинного текста предпочтительнее использовать средние оттенки серого, чтобы снизить усталость глаз.
  • Для интерактивных элементов или уведомлений используют яркие контрастные цвета, чтобы акцентировать внимание.

Использование цветов для состояния

Состояния элементов (ошибка, успех, предупреждение) требуют контрастных цветов:

<Alert status="error" variant="subtle">
  <AlertIcon />
  Ошибка ввода данных
</Alert>
<Alert status="success" variant="subtle">
  <AlertIcon />
  Операция успешно выполнена
</Alert>
  • Chakra UI подбирает цвета фона и иконок, обеспечивая достаточный контраст для уведомлений.
  • Цветовые коды можно настраивать через тему для соответствия брендбуку.

Вывод

Цветовой контраст в Chakra UI строится на:

  • централизованной теме с оттенками цветов;
  • использовании семантических цветов и colorScheme;
  • адаптации под светлый и тёмный режимы через useColorModeValue;
  • правильном сочетании текста и фона, включая градиенты и состояния элементов;
  • проверке доступности контраста при проектировании интерфейсов.

Это позволяет создавать интерфейсы, которые одновременно эстетичны, функциональны и доступны для всех пользователей.

Оглавление