Перейти к содержимомуПерейти к содержимому

Модуль «Механика» · WCAG 1.4.6 · Уровень AAA

Исправление цветового контраста

Автоматически повышает недостаточный контраст до уровня AA или AAA с помощью переопределения переменной CSS.

Что это делает

Функция в одном предложении — и в трёх предложениях

Если сканер контраста обнаружит проблемы, есть два варианта: исправить их вручную в CSS (трудоемкий процесс) или позволить плагину настроиться автоматически. Функция Color Contrast Fix увеличивает яркость слишком ярких цветов текста до тех пор, пока контраст не достигнет целевого уровня.

Важный: Этот способ надёжно работает только с темами, использующими CSS-переменные для цветов. При использовании жёстких шестнадцатеричных значений исправление работает только через переопределения, что может привести к визуально заметной разнице.

Вот как это реализовано в плагине.

Технические меры

  • Обнаружение переменных CSS: автоматически распознает `--color-text`, `--text-secondary` и т. д.
  • Увеличение яркостиПри необходимости значение цвета смещается в сторону более темного тона.
  • Сохранение оттенкаЦветовой тон остается тем же, меняется только яркость.
  • Резервное переопределениеДля строгих цветовых рамок устанавливается атрибут `style` с более высокой степенью детализации.
  • Предварительный просмотр визуальных различий В бэкэнде: скриншоты «до» и «после» для каждого затронутого селектора.
В административной панели плагина

Эти настройки можно найти на вкладке "Модуль".

  • Целевой контраст: AA (4,5:1) / AAA (7:1)
  • Стратегия: только переменные CSS / переменные + переопределения / все агрессивные методы
  • Предел отклонения оттенка (насколько сильно может изменяться цветовой тон, по умолчанию 5°)
  • Уведомление администратора по электронной почте о различиях в визуальном отображении: да / нет
  • Белый список (параметры, которые никогда не изменяются)

Путь в административной панели: WP-Admin → Доступность → Модули → Исправление цветового контраста

Когда вам понадобится этот модуль?

Вариант использования

Рекомендуется после С помощью контрастного сканера: сначала определите, что не работает, а затем позвольте системе автоматически это исправить. Сайтам, которые заботятся о своем бренде, следует использовать функцию визуального предварительного просмотра перед запуском.

Связанные модули

Это тематически взаимосвязано.

  • Контрастный сканер

    WCAG 1.4.3

    Сканирование в реальном времени на стороне клиента: проверяет все пары текст/фон на соответствие стандартам AA (4,5:1) или AAA (7:1).

  • Видимый фокус

    WCAG 2.4.11

    Обеспечивает четкое, всегда видимое кольцо фокусировки на всех фокусируемых элементах — с контрастностью класса AAA.

Активировать модуль для вашего сайта?

В ходе первоначальной 15-минутной консультации мы выясним, подходит ли данный модуль для вашей темы и типа контента, а также как будет выглядеть его настройка.

Первичная консультация (15 минут)
Просмотреть все модули

Простой язык