Использование высокого цветового контраста для более доступного дизайна

Веб-стандарты цветового контраста

Цветовой контраст измеряет разницу в контрасте между двумя цветами. Чем выше значение, тем легче отличить объект (текст, изображение, графику) на переднем плане от фона.

Цвета могут контрастировать по-разному, например, в оттенок, значение а также насыщение. Коэффициент контрастности цвета рассчитывается по формуле, предоставленной W3C, основной международной организацией по стандартизации для World Wide Web..

Может принимать значение между 1: 1 (никакого контраста вообще, передний план и фон имеют одинаковый цвет) и 21: 1 (максимальный контраст что существует только между черным и белым).

Последнее руководство W3C по доступности веб-контента (WCAG) 2.0 предоставляет веб-разработчикам и создателям контента критерии для минимального (уровень AA) и расширенного (уровень AAA) значения приемлемого коэффициента цветовой контрастности.

Уровень AA требует как минимум Соотношение 4,5: 1 для обычного текста, а также 3: 1 для большого текста. Гораздо проще читать крупный текст, например, субтитры, поэтому ему нужен более низкий цветовой контраст.

Если вы хотите достичь уровня AAA, который является улучшенным уровнем, вам нужно разработать свою цветовую схему с большей осторожностью, так как для этого требуется, по крайней мере, Коэффициент контрастности 7: 1 для обычного текста, а также 4,5: 1 для большого. Если текст является частью логотипа или названия бренда, минимальный уровень цветовой контрастности на уровне WCAG отсутствует.

Мы можем назвать веб-сайт только визуально доступным, если цветовой контраст между каждым объектом переднего плана и его фоном достигает как минимум уровня AA.

Преимущества высокого цветового контраста

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

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

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

Приложения для проверки цветового контраста

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

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

Самое главное помнить, что вам всегда нужно сравните цвет переднего плана, такой как цвет текста, с окружающей областью (цвет фона).

1. Проверка цветовой контрастности WebAim

WebAim (Web Accessibility In Mind) - организация, продвигающая веб-доступность, которая предлагает разработчикам простой, но надежный инструмент проверки цветового контраста среди многих других замечательных инструментов доступности, таких как Wave, общее приложение для оценки доступности, которое может помочь вам быстро оценить проблемы доступности вашего сайта.

Программа проверки цветового контраста WebAim сообщает вам если ваши цвета проходят тесты WCAG AA и AAA, как для обычных, так и для больших текстов.

2. Проверка контрастности цвета Snook

Джонатан Снук (Jonathan Snook), в настоящее время работающий ведущим разработчиком внешнего интерфейса в Shopify, уже более десяти лет предоставляет свой удобный инструмент для проверки контрастности цвета. Приложение Snook позволяет вам изменить значения HSL и RGB цвета переднего плана и фона по одному, используя удобные слайдеры пока вы не достигнете результата, соответствующего тестам WCAG 2.0.

CheckMyColours

CheckMyColours, созданный Джованни Скала, позволяет проверить соотношение цветовой контрастности всех комбинаций цветов переднего плана и фона. на живом сайте.

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

Дизайнер цветовых схем

Color Scheme Designer - не просто средство проверки цветового контраста, а инструмент для разработка полных цветовых схем.

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

W3C также предоставляет вам огромный список инструментов для оценки доступности в Интернете, где вы можете найти множество других инструментов цветовой контрастности, таких как это полезное цветовое колесо специальных возможностей..

Советы по созданию визуально доступных веб-сайтов

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

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

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

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

Читайте сейчас: Практический подход к выбору цветовой схемы сайта