Доступны ли мои цвета?

В этой статье вы получите представление о доступности цвета и инструментах, которые помогут вам принимать правильные решения по цветовому контрасту.

Содержание

• Что такое цветовой контраст
• Что такое доступность цвета
• Как улучшить доступность цвета
• Инструменты для ручной проверки доступности цвета

Цветовой контраст измеряется как соотношение двух цветов. Разница в «яркости» или яркости двух цветов называется цветовым контрастом.

В основном нас интересует различие между основным содержимым и его фоном в типичном веб-приложении (разница в текстах или кнопках на фоне). Текст, значки, ссылки, элементы формы, кнопки и другие настраиваемые элементы управления являются общими компонентами основного содержимого.

Поэтому, если контрастность слишком низкая, многие пользователи не смогут различить содержимое переднего плана и фона.

При разработке вы должны понимать, что у некоторых конкретных пользователей могут быть дефекты зрения, в том числе у дальтоников или слепых, которые используют шрифт Брайла или аудиопомощь (что приводит к использованию альтернативного текста в изображениях).

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

Дальтонизм означает не только то, что люди видят только в черно-белом цвете, более 99% дальтоников могут видеть цвета. Существуют разные типы дальтонизма;

• второстепенная; заставляет все выглядеть блеклым
• протанопия; которые делают вещи зелеными
• зеленоватый; сделать вещи розовыми тонами
• монохромность; страдают полной дальтонизмом, вещи монохромны

https://www.boredpanda.com/different-types-color-blindness-photos/?utm_source=uxdesign&utm_medium=referral&utm_campaign=organic

Что такое доступность цвета

WCAG {руководство по доступности цветов для веб-сайтов} считается эталоном доступности веб-сайтов, созданным консорциумом всемирной паутины (w3c). По сути, это золотой стандарт лучших практик веб-доступности.

Стандарты WCAG содержат 12–13 рекомендаций. Рекомендации организованы по 4 принципам: воспринимаемость, работоспособность, понятность и надежность .

Для каждого руководства есть проверяемые критерии успеха . Критерии успеха находятся на трех уровнях: A, AA и AAA .

Критерии успеха определяют «соответствие» WCAG. Иными словами, чтобы соответствовать WCAG, контент должен соответствовать критериям успеха. Подробности в разделе «Соответствие» WCAG .

См. Обзор Руководства по обеспечению доступности веб-контента (WCAG)

Помимо соблюдения этических норм, несоблюдение нормативных требований доступности может привести к юридическим последствиям.

В 2017 году истцы подали не менее 814 федеральных исков в отношении якобы недоступных веб-сайтов, в том числе несколько коллективных исков.

Раздел 508 Закона о реабилитации 1973 года;

Указывает, что когда агентства разрабатывают, закупают или обслуживают информационные и коммуникационные технологии (ИКТ), они должны быть доступны для лиц с ограниченными возможностями. .

W3C излагает свои рекомендации по веб-доступности в рамках WCAG 2.1 .

Как улучшить доступность цвета

1. Добавьте достаточно контраста:

2. Использование правильных инструментов:

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

• Раскрашиваемый
• A11y для пользователей программного обеспечения с открытым исходным кодом Figma; a11y — отличный плагин для плагина доступности цвета Figma.
• Lighthouse — расширение для Chrome, позволяющее определить, что не так с цветовым контрастом сайта.
• https://colourcontrast.cc/учитывает размер и цвет текста

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

Изображение ниже представляет собой изображение, которое объясняет сочетание цветов и хорошую иконографию для передачи сообщения.

3. Задокументируйте и социализируйте цветовую систему.

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

https://www.w3.org/TR/WCAG21/чтобы дать вам информацию и более подробную информацию о доступности цвета.

Для получения полной информации Рекомендации по обеспечению доступности веб-контента (WCAG) 2.1 (w3.org)