Что такое коэффициент WCAG? Почему вы должны реализовать это в своих проектах

Рекомендации по доступности веб-контента (WCAG) — это рекомендации по доступности для цифрового и веб-дизайна. Следование этим рекомендациям гарантирует, что цвета будут достаточно контрастными, чтобы люди с нарушениями зрения могли правильно видеть и читать ваши дизайны. Это также идет рука об руку с типографским размером, чтобы обеспечить его удобочитаемость вместе с цветами.

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

Что такое коэффициент WCAG?

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

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

Консорциум World Wide Web разрабатывает стандарты веб-разработки. Хотя не существует установленных правил для веб-доступности, WCAG устанавливает стандарт, которому должен следовать любой веб-дизайнер.

При тестировании коэффициентов контрастности WCAG предлагает рейтинг от A до AAA. Рейтинг A показывает самый низкий уровень контрастности. AA — это средние уровни контрастности с соотношением 4,5:1, которое считается минимальным соотношением. Наконец, AAA — это самый высокий уровень контрастности. При проектировании для всех ваши уровни контрастности лучше всего находятся между диапазоном AA и AAA.

Почему соотношение WCAG важно в графическом и веб-дизайне?

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

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

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

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

Реализация соотношения WCAG в ваших проектах

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

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

Высококонтрастные цвета

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

Вы когда-нибудь пробовали читать светло-розовый текст на светло-зеленом фоне? Это почти невозможно. А вот темно-синий текст на светло-желтом фоне гораздо легче увидеть и прочитать.

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

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

Размер текста

Наряду с тем, что цвета текста достаточно контрастны по отношению к цветам фона, сам текст должен быть достаточно большим, чтобы его можно было легко читать. Соотношение WCAG для большого размера текста составляет 3:1.

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

Читаемость шрифта

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

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

Инклюзивные факторы доступности

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

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

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

Проектирование с использованием коэффициента WCAG улучшает дизайн для всех

Стандарты веб-дизайна исходят от консорциума World Wide Web Consortium, сообщества, которое помогает внедрять лучшие практики в Интернете. Консорциум разработал Руководство по доступности веб-контента, которому должны следовать веб-дизайнеры. Это обеспечивает стандарт соотношения для проверки видимости при проектировании для Интернета.

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