Что делать с цветами фона и передними цветами в рейтинге lighthouse, которые не имеют достаточно высокого контраста
Отображение цвета фона и переднего плана не достаточно высокий контраст
Убедитесь, что все текстовые элементы имеют достаточный цветовой контраст между текстом переднего плана и цветом фона.
Критерий успеха: убедитесь, что цветовой контраст текста на трубе составляет не менее 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
