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

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

Adam Argyle

Charlie Gleason

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

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

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

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

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

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

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

Более высокий коэффициент контрастности оценивается более высоким числом, например 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.

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

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

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

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

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

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

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

ВисБуг

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

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

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

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

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

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

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

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

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

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

• Выбор цвета
• Подсказка проверки
• Обзор CSS
• Маяк
• JS-консоль
• Инструменты эмуляции дальтонизма
• Эмуляция предпочтений цветового контраста системы
• Эксперимент WCAG 3.0 APCA

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Обзор CSS

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

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

Маяк

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

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

JS-консоль

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

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

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

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

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

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

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

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

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

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

Заключение

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