Что делать с цветами фона и передними цветами в рейтинге lighthouse, которые не имеют достаточно высокого контраста

март 25, 2026
行业资讯
0
On this page

Описание проблемы:

Отображение цвета фона и переднего плана не достаточно высокий контраст

Убедитесь, что все текстовые элементы имеют достаточный цветовой контраст между текстом переднего плана и цветом фона.

Критерий успеха: убедитесь, что цветовой контраст текста на трубе составляет не менее 4,5: 1, а текст на большом-не менее 3:1, даже если текст является частью изображения, не исключение. Согласно соответствующим требованиям, текст большого размера определяется как 18pt(24 CSS пикселей) или 14pt жирным текстом (19 CSS пикселей). Примечание. Если будет обнаружено, что цветовой контраст элемента составляет 1:1, элемент будет считаться «незавершенным» и требует ручного обзора.

Почему это важно:

Некоторые люди с низким зрением испытывают ситуации с низким контрастом, что означает, что не так много ярких или темных областей. Все объекты имеют тенденцию демонстрировать одинаковую яркость, что затрудняет различение контуров, границ, краев и деталей. Текст с яркостью, слишком близкой к фону, может быть трудно читать.

Число людей с низким зрением почти в три раза превышает число людей, которые полностью слепы. Каждый двенадцатый человек не может видеть весь спектр цвета-в Соединенных Штатах около 8% мужчин и 0,4% женщин. Люди с низким зрением или дальтонизмом не могут различить текст на заднем плане в случае недостаточного контраста.

Прозрачность и непрозрачность цвета учитываются в фоновом режиме.

Прозрачность и непрозрачность цвета на переднем плане сложнее рассмотреть и обработать, потому что:

  • Окраска переднего плана и фона одинакова.
  • CSS фон градиент.
  • CSS цвет фона в псевдоэлементе.
  • Цвет фона, созданный с помощью CSS границы.
  • Перекрывается с другим элементом на переднем плане-это иногда возникает из-за хитрого позиционирования.
  • Элемент выходит из зрительного отверстия через CSS.

Решение:

Откройте https://color.adobe.com/zh/create/color-contrast-analyzer средств помощи Adobe Color

Установить цвет текста и цвет фона, как показано на рисунке

Справочная документация:

https://dequeuniversity.com/rules/axe/4.11/color-contrast? Lang = ru

Поделиться на
Псевдоним*:
E-mail*:
Оценивать*:
Комментарии*:
о авторе
JEAWIN
JEAWIN
JEAWIN,在外贸B2B营销领域已有二十年的经验,担任过编辑、SEO,数据分析师和营销主管。他1998年就开始接触互联网,曾在Thomas,GlobalSpec等国际知名工业B2B营销公司(大中华区)任职工作,2011年创建厦门杰赢网络科技有限公司,为中国外贸企业提供高性价比品牌营销服务,尤其擅长工业品营销和Google SEO营销。

Если вам нужно связаться с нами, вот наши контактные методы

Если вам нужно связаться с нами, вот наши контактные методы
Контактный телефон
Контактная почта
WeChat Контакты
Jie Win Network
QQ
215168