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

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

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

Element Plus использует CSS-переменные для управления цветами. Основные переменные:

  • --el-color-primary — основной цвет темы, применяется к кнопкам, ссылкам, активным элементам.
  • --el-color-primary-light-1…9 — оттенки основного цвета, используются для hover-эффектов и фонов.
  • --el-color-success, --el-color-warning, --el-color-danger — семантические цвета для состояний компонентов.
  • --el-text-color-primary, --el-text-color-regular, --el-text-color-placeholder — цвета текста различного уровня важности.

Для обеспечения достаточной контрастности текста на фоне, рекомендуется использовать сочетания переменных следующим образом:

/* Пример настройки текста на кнопке */
.el-button--primary {
  color: var(--el-text-color-primary);
  background-color: var(--el-color-primary);
}

Element Plus автоматически подбирает контрастность для стандартных тем, но при кастомизации важно проверять сочетания цветов с помощью инструментов проверки доступности (WCAG).

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

Контрастность измеряется как отношение яркости текста к фону. Рекомендуемые показатели WCAG:

  • AA: минимум 4.5:1 для обычного текста, 3:1 для крупного текста.
  • AAA: минимум 7:1 для обычного текста, 4.5:1 для крупного текста.

В Element Plus можно использовать утилиты text-color и background-color для создания безопасных контрастных комбинаций:

<template>
  <el-card class="high-contrast-card">
    <p class="high-contrast-text">Важное уведомление</p>
  </el-card>
</template>

<style>
.high-contrast-card {
  background-color: var(--el-color-danger-light-5);
}
.high-contrast-text {
  color: var(--el-color-danger);
  font-weight: 600;
}
</style>

Такое сочетание гарантирует легкое восприятие текста на фоне карточки и привлекает внимание к важной информации.

Размер и насыщенность шрифтов

Читаемость зависит не только от цветов, но и от размера, плотности и насыщенности шрифта. Element Plus использует систему типографики:

  • --el-font-size-base — базовый размер текста (обычно 14px).
  • --el-font-size-medium, --el-font-size-large — увеличенные размеры для заголовков и кнопок.
  • --el-font-weight-regular, --el-font-weight-bold — веса шрифта для акцентирования.

Применение весов и размеров помогает выделять ключевые элементы и улучшает восприятие:

<template>
  <el-button type="primary" class="emphasized-button">Сохранить</el-button>
</template>

<style>
.emphasized-button {
  font-weight: var(--el-font-weight-bold);
  font-size: var(--el-font-size-large);
}
</style>

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

Многие компоненты Element Plus имеют свойства, влияющие на визуальную читаемость:

  • type у кнопок (primary, success, warning, danger, info) задаёт семантический цвет.
  • size (medium, small, mini) регулирует визуальную плотность текста и кнопок.
  • plain для кнопок создаёт контурный стиль, увеличивая контраст с фоном страницы.
  • disabled автоматически снижает контрастность текста и элементов, показывая их неактивность.
<el-button type="warning" size="large">Предупреждение</el-button>
<el-button type="success" plain>Подтверждение</el-button>

Контрастность элементов формы

Формы и поля ввода в Element Plus требуют отдельного внимания к читаемости:

  • el-input и el-select автоматически используют переменные --el-border-color и --el-text-color-regular.
  • Для повышенной контрастности можно явно задавать цвета фона и текста:
<el-input
  placeholder="Введите имя"
  class="high-contrast-input"
/>

<style>
.high-contrast-input .el-input__inner {
  background-color: #ffffff;
  color: #1f2d3d; /* Высокий контраст текста */
  border-color: #1f2d3d;
}
</style>
  • Ошибки и предупреждения используют цвета --el-color-danger и --el-color-warning, обеспечивая визуальное разделение состояния.

Темная тема и контрастность

Element Plus поддерживает тёмную тему, где цвета автоматически инвертируются для сохранения читаемости:

  • Основные переменные: --el-color-primary-dark, --el-text-color-dark-primary.
  • Элементы с низкой контрастностью в тёмной теме требуют дополнительного усиления через font-weight или яркость фона.
  • Компоненты, как el-table и el-card, автоматически подстраиваются под фон, но кастомные цвета нужно проверять.
<el-card class="dark-card">
  <p class="dark-text">Информация для темной темы</p>
</el-card>

<style>
.dark-card {
  background-color: #1f2d3d;
}
.dark-text {
  color: #f0f1f2;
  font-weight: 500;
}
</style>

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

  • Использовать выделение цветом для важного текста без перегрузки страницы яркими акцентами.
  • Применять единообразные размеры шрифтов и веса для разных уровней заголовков и элементов интерфейса.
  • Проверять сочетания цветов через инструменты WCAG и встроенные палитры Element Plus.
  • В тёмной теме использовать контрастные границы и тени для элементов, чтобы визуально отделять блоки.

Эти принципы позволяют создавать интерфейсы на Element Plus, где контрастность и читаемость работают вместе, повышая удобство взаимодействия и визуальную ясность.

Оглавление