Тестирование цветового контраста в веб-дизайне

Обзор трех инструментов и методов тестирования и проверки доступного цветового контраста вашего дизайна.

Адам Аргайл
Адам Аргайл
Чарли Глисон
Чарли Глисон

Допустим, у вас есть текст на светлом фоне, например:

Показана фраза «Быстрая коричневая лиса снова перепрыгивает через ленивую собаку», где каждое слово или пара слов окрашены в светло-синий цвет. Над каждой частью постепенно исчезающих слов указана их оценка коэффициента контрастности. Последние несколько слов очень трудно прочитать из-за низкого контраста.

Хотя все примеры могут быть вам понятны, это относится не ко всем.

Доступный цветовой контраст — это практика, обеспечивающая читаемость текста для всех. Иногда проверить контрастность легко, а иногда очень сложно. К концу этой статьи у вас будут три новых инструмента и метода для проверки, исправления и проверки контрастности вашего веб-дизайна, чтобы вы могли решать самые сложные сценарии.

WCAG и цветовой контраст

Инициатива W3C по обеспечению доступности веб-сайтов предоставляет стратегии, стандарты и ресурсы для обеспечения доступности Интернета для как можно большего числа людей. Рекомендации, лежащие в основе этих стандартов, называются «Рекомендациями по обеспечению доступности веб-контента» или WCAG. Последняя стабильная версия WCAG 2.1 соответствует важному требованию доступности: минимальному контрасту .

Взаимосвязь между двумя цветами в WCAG 2.1 описывается их коэффициентом контрастности — то есть числом, которое вы получаете при сравнении яркости двух цветов. Яркость — это способ описания того, насколько цвет близок к черному (0%) или белому (100%). WCAG определяет некоторые правила и алгоритмы расчета того, каким должен быть коэффициент контрастности, чтобы сеть была доступна. Однако есть известные проблемы с этим расчетом. Со временем будет принят еще более надежный способ, но на данный момент WCAG — лучшее, что у нас есть.

Каковы правила?

АА ААА
Основной текст (< 24 пикселей) 4,5 7
Крупный текст (> 24 пикселей) 3 4,5
Пользовательский интерфейс (значки, графики и т. д.) 3 не определен

Более высокий коэффициент контрастности оценивается более высоким числом, например 4,5 или 7 вместо 3. Чтобы лучше ознакомиться с таблицей оценок, ознакомьтесь с программой проверки контрастности Polypane .

Текст отображается поверх фиолетового цвета: одна пара — черный текст поверх фиолетового, а другая — белый текст поверх фиолетового.
Какое из этих цветовых сочетаний кажется вам более контрастным?

Тестирование контраста между цветами

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

  1. Пика
    Приложение MacOS, уникально способное отображать контрастность любых цветов на всем экране, цвета в градиентах, цвета с прозрачностью и многое другое. Намерение явное, пользователи вручную выбирают пиксели для сравнения. Чуть-чуть менее автоматизировано, но с огромным набором функций.
  2. ВисБуг
    Кросс-браузерное расширение, уникально способное отображать более одного контрастного наложения одновременно, но, как и DevTools, иногда не может определить намерение.
  3. Инструменты разработчика Chrome
    DevTools встроен в Chrome и содержит различные способы проверки, исправления и отладки проблем с цветом, но имеет недостатки при проверке градиентов и полупрозрачных цветов, а иногда и не может определить намерение.

Пика (приложение для macOS)

Если DevTools или VisBug не могут правильно оценить контраст, например, когда вам нужно проверить цвет вне браузера или когда задействована прозрачность или градиенты, тогда Pika здесь, чтобы спасти положение . Pika имеет доступ к каждому пикселю экрана, потому что это системный инструмент, а не веб-инструмент.

Скачать Пика

Это также означает, что UX для использования Pika отличается от DevTools или VisBug. DevTools и VisBug делают все возможное, чтобы отображать цвета текста и фона из DOM браузера, в то время как цвета, которые сравнивает Pika, выбираются вручную из любой точки экрана. Это дает Pika больше контроля и открывает некоторые дополнительные варианты использования:

  • Сравнение любых двух цветов независимо от того, отображаются они в браузере или нет — если вы видите это на экране, вы можете это проверить.
  • Сравнение цветов с прозрачностью.
  • Сравнение цветов в градиентах.
  • Сравнение цветов, использующих режимы наложения, например режим смешивания в CSS.

Сравнение любых двух цветов

Сравните текст с цветом фона:

Два серых цвета сравниваются рядом, они имеют коэффициент контрастности 13,01 и соответствуют требованиям AA и AAA.

Сравните цвета обводки и заливки векторной графики:

Два фиолетовых цвета сравниваются с двухцветным значком, они имеют коэффициент контрастности 1,63 и не соответствуют никаким целевым показателям WCAG.

Сравнение цветов с прозрачностью

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

Два цвета, которые выглядят как серый, но на самом деле являются очень ненасыщенными фиолетовыми, сравниваются с изображением с размытой полупрозрачной подписью. Они имеют коэффициент контрастности 4,65 и соответствуют целевому уровню АА.

Сравнение цветов с градиентами

Сравните текст на градиенте или на изображении. Здесь буква L из «Лассо» сравнивается со светло-голубым цветом изображения:

На снимке экрана из телешоу название шоу находится поверх названия, буква L — белая, а синяя буква позади нее сравнивается. Они имеют коэффициент контрастности 8 и соответствуют требованиям AA и AAA.

ВисБуг

VisBug — это инструмент, созданный на основе FireBug , позволяющий дизайнерам и разработчикам визуально проверять, отлаживать и экспериментировать с дизайном своих веб-сайтов. Предполагается, что он будет иметь более низкий барьер для входа, чем Chrome DevTools, за счет эмуляции пользовательского интерфейса и UX инструментов дизайна, которые люди узнали и любят использовать.

Попробуйте VisBug или установите его на Chrome , Firefox , Edge , Brave или Safari .

Одним из предлагаемых инструментов является инструмент проверки доступности.

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

Проверяйте в браузерах (и даже на мобильных устройствах)

После нажатия на инструмент «Проверка доступности» все, на что указывает пользователь или к чему перемещается клавиатура, будет содержать информацию о доступности во всплывающей подсказке. Эта подсказка включает сравнение цветов между обнаруженными цветами переднего плана и фона.

Компонент с заголовком и значком отображается в розовой ограничивающей рамке вокруг него, всплывающая подсказка специальных возможностей VisBug указывает на розовую рамку с отчетом о сравнении цветов текста и его фона. Коэффициент составляет 13,86 и соответствует целевым показателям как AA, так и AAA.

Осмотрите один или несколько

DevTools может либо просмотреть одно сочетание цветов, либо получить отчет обо всех ваших сочетаниях цветов на странице, но VisBug предлагает приятную золотую середину, позволяя использовать несколько сочетаний цветов. Щелкните элемент, и всплывающая подсказка останется на месте. Удерживайте Shift и продолжайте нажимать на другие элементы, и все всплывающие подсказки останутся на месте:

Список ссылок на веб-странице отображается с несколькими наложениями специальных возможностей VisBug, каждый из которых контекстуально указывает на обнаруженный текст и контрасты цвета фона и сообщает об этом.

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

Инструменты разработчика Chrome

Если у вас установлен Chrome, значит, у вас уже есть множество инструментов для тестирования контрастности:

Выбор цвета Chrome DevTools

На панели «Стили Chrome DevTools» панели «Элементы» рядом со значениями цвета будет отображаться небольшой визуальный квадратный образец цвета. При нажатии на этот образец вы увидите инструмент выбора цвета. Если возможно, середина инструмента покажет контраст цвета с передним планом или фоном.

В следующем примере палитра цветов открывается для значения цвета настраиваемого свойства. Показатель коэффициента контрастности равен 15,79 и имеет две зеленые галочки, что означает, что показатель соответствует требованиям AA и AAA WCAG 2.1:

Снимок экрана панели «Элементы DevTools», в стилях показана палитра цветов, а посередине указан коэффициент контрастности цвета 4,98.

Автокоррекция выбора цвета

Просмотр оценок при выборе цветов удобен, но в Chrome DevTools есть дополнительная функция автокоррекции. Когда палитра цветов сообщает о невозможности получить доступную оценку цветового контраста, ее можно расширить, чтобы отобразить целевые значения оценок AA и AAA, а также инструмент «Пипетка» . Рядом с AA и AAA находятся образцы и значок обновления, при нажатии на который вы найдете ближайший проходящий цвет:

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

Подсказка проверки

Инструмент выбора элемента имеет специальную функцию при наведении на страницу, которая сообщает общую информацию о шрифте, цвете и доступности. Инструмент выбора элемента — это значок слева на следующем снимке экрана. Это поле со стрелкой в ​​правом нижнем углу. Его также можно выбрать с помощью горячей клавиши Control+Shift+C (или Command+Shift+C в MacOS).

Снимок экрана: значок поля и стрелки в DevTools, который вызывает инструмент выбора элемента.

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

Скриншот наложения, очень похожего на VisBug. Он показывает некоторую информацию о стиле и раздел доступности, где показан показатель контрастности 15,79, соответствующий целевому уровню AA.

Вместо инструмента выбора цвета, который требует от вас найти образец цвета на панели «Стили», этот инструмент позволяет просто наводить курсор на страницу, чтобы увидеть показатели контрастности. Как и палитра цветов, она может отображать только одну оценку контрастности одновременно.

Стучите, пока не пройдете 🎶

Я часто проверяю сочетание цветов с помощью этого инструмента быстрой проверки и обнаруживаю, что оно не соответствует требуемому соотношению. Вместо использования функции автокоррекции палитры цветов (потому что я придирчив) я подталкиваю цветовые каналы в CSS и наблюдаю, пока не добьюсь нужного мне соотношения. Я называю этот процесс « удар-удар, пока не пройдете », потому что я меняю номера цветовых каналов до тех пор, пока они не пройдут WCAG 2.1.

Шаги следующие и должны выполняться в точном порядке:

  1. Установите фокус клавиатуры внутри цвета на панели «Стили».
  2. Активируйте инструмент проверки элемента с помощью сочетания клавиш Control+Shift+C (или Command+Shift+C в MacOS).
  3. Наведите курсор на цель.
  4. Нажимайте вверх/вниз на клавиатуре, чтобы изменить цифры в значении цвета.

Это работает, потому что значение стиля CSS по-прежнему имеет фокус клавиатуры, а мышь позволяет вам наводить курсор на цель. Обязательно не нажимайте на цель, иначе фокус переместится из области значений цвета и вы больше не сможете перемещать значения, пока не перефокусируетесь.

Обзор CSS

До этого момента в Chrome DevTools предоставлялись способы одновременного просмотра одной пары цветов, но обзор CSS может сканировать всю страницу и отображать все недоступные пары одновременно:

Снимок экрана с обзорной сводкой, полученной при запуске инструмента захвата обзора CSS. Он показывает 7 проблем с контрастностью, показывая обнаруженные пары цветов и их неудачные результаты.

Подробнее об этой функции читайте в статье «Обзор CSS: определите потенциальные улучшения CSS» или посмотрите сериал Джеселин Йен на YouTube. «Советы для разработчиков» научат вас, как определять потенциальные улучшения CSS с помощью панели «Обзор CSS» .

Маяк

Lighthouse — еще один инструмент аудита в Chrome DevTools. Он может сканировать вашу страницу и сообщать о недоступных сочетаниях цветов. В нем представлены крошечные скриншоты каждой цветовой пары, которые вы можете просмотреть, пройти или не пройти. Любые неудачные комбинации отрицательно повлияют на ваш счет Маяка.

Вот как могут выглядеть эти результаты:

Скриншот оценки Lighthouse, показывающий результаты низкоконтрастного текста с цветовыми комбинациями из двух слов.

JS-консоль

Возможно, все инструменты, перечисленные до сих пор, просто не там, где вы находитесь. Возможно, то, где вы находитесь (весь день), — это JavaScript. Вот эксперимент, который стоит попробовать . Панель «Проблемы» консоли может постоянно сообщать о любых проблемах с доступностью цветового контраста во время сборки. Включите эту функцию в «Настройки» > «Эксперименты», как показано ниже:

Снимок экрана с включенным флажком: «Включить автоматическое оповещение о проблемах с контрастностью через панель «Проблемы».»

Затем откройте панель «Проблемы» и посмотрите, были ли сделаны какие-либо открытия. Если да, то они могут выглядеть так:

Снимок экрана панели «Проблемы» внутри консоли. На ней сообщается о 6 ошибках, связанных с контрастностью.

Эмуляция дальтоников

Говоря о цветовом контрасте и обеспечении доступных цветовых сочетаний, стоит отметить инструмент эмуляции недостатков зрения. Это изменит цвета или внешний вид вашего дизайна, чтобы продемонстрировать результаты различных разновидностей дальтонизма, давая вам возможность изменить свой дизайн так, чтобы цвет не был единственным способом взаимодействия UX с пользователем.

Скриншот вариантов эмуляции DevTools для эмуляции недостатков зрения: нет эмуляции, нечеткость зрения, протанопия, дейтеранопия, тританопия, ахроматопсия.

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

Эмуляция предпочтений системы цветового контраста

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

Снимок экрана с опциями эмуляции DevTools для эмуляции медиа-запроса CSS предпочитает-контраст: без эмуляции, больше, меньше, по индивидуальному заказу.

Попробуйте WCAG 3.0 APCA

Еще один эксперимент, который стоит попробовать, — это тестирование ваших цветовых сочетаний с помощью экспериментальной системы оценки соотношения цветов APCA. Включаемый через «Настройки» > «Эксперименты», он заменяет систему соотношений WCAG 2.1 новым и улучшенным алгоритмом проверки контрастности, позволяя вам предварительно просмотреть его результаты по мере того, как предложение приближается к стандарту.

Снимок экрана с включенным флажком: «Включить новый алгоритм расширенного перцептивного контраста (APCA), заменяющий предыдущий коэффициент контрастности и рекомендации AA/AAA».

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

Всплывающая подсказка элемента проверки Devtools показывает -100,2% для показателя контрастности элемента dd.

Заключение

Цветовой контраст — важная часть головоломки доступности в Интернете, и его соблюдение делает Интернет более удобным для использования как можно большим количеством людей в самых разных ситуациях. Надеемся, эти три инструмента помогут вам сделать правильный выбор цвета.