Проверка контрастности текста и цвета с помощью средства выбора цвета

  • Статья

Люди с низким зрением может не видеть очень яркие или очень темные области. Все, как правило, выглядит примерно с одинаковым уровнем яркости, что делает его трудно различить контуры и края.

Коэффициент контрастности измеряет разницу яркости между передним планом и фоном текста. Если ваш текст имеет низкий коэффициент контрастности, люди с низким зрением могут столкнуться с вашим сайтом как пустой экран.

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

Чтобы проверка контрастность текста и цвета с помощью средства выбора цвета, выполните следующие действия:

  1. В DevTools откройте инструмент Элементы .

  2. В дереве DOM выберите текстовый элемент, который требуется проверить.

  3. На вкладке Стили найдите свойство color , применяемое к элементу, и щелкните цветной квадрат рядом со свойством color .

    Откроется средство выбора цвета:

    Средство выбора цвета, открытое на вкладке Стили, рядом со свойством color элемента

  4. Изучите раздел Коэффициент контрастности средства выбора цвета:

    В разделе

    В разделе Коэффициент контрастности отображается оценка коэффициента контрастности между текстом и фоном, а также значок, указывающий, соответствует ли коэффициент контрастности рекомендациям.

    • Красный перечеркнутый круг означает, что элемент не соответствует минимальной рекомендации.
    • Одна проверка метка означает, что элемент соответствует минимальной рекомендации.
    • Две проверка метки означают, что элемент соответствует расширенной рекомендации.

  5. Для получения дополнительных сведений щелкните раздел Коэффициент контрастности , чтобы развернуть его:

    Линия

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

  6. Чтобы попробовать различные цвета, щелкните в средстве выбора визуальных элементов или выберите цветной образец в нижней части палитры.

См. также

Примечание.

Части этой страницы являются изменениями, основанными на работе, созданной и совместно используемой Google и используемой в соответствии с условиями, описанными в международной лицензии Creative Commons Attribution 4.0. Исходная страница находится здесь и автор Kayce Basques (Технический писатель, Chrome DevTools & Lighthouse).

Creative Commons License Эта работа лицензируется по международной лицензии Creative Commons Attribution 4.0.