Погружаясь немного глубже, чтобы пополнить свои личные знания о доступности, я решил углубиться в контраст и выяснить, почему текущие рекомендации по доступности устанавливаются там, где они есть, на каких пользователей больше всего влияет этот выбор, а также некоторые инструменты, доступные для оценки дизайна. выбор.
Чтобы сделать веб-сайт функциональным для всех пользователей, важно учитывать, что не все видят вещи так, как вы.
Контрастность можно оценить, сравнив относительную яркость переднего плана и фона. Это имеет решающее значение при рассмотрении текста поверх фона и является одним из основных соображений для пользователей с плохим зрением.
Из-за потери контрастной чувствительности типичная острота зрения людей в возрасте около 80 лет составляет примерно 20/40.
Руководящие принципы WebAIM для минимального коэффициента контрастности для всего текста составляют 4,5:1 и обеспечивают достаточную контрастность, чтобы пользователи в категории остроты зрения 20/40 могли читать текст. Имейте в виду, однако, что этого контраста может быть недостаточно для всех пользователей.
Ниже приведено то же контрастное изображение снова, но с показанными коэффициентами контрастности, чтобы прочувствовать внешний вид различных коэффициентов, а также уменьшенная версия с размером шрифта 14.
В соответствии с рекомендациями WebAIM первый и второй столбцы имеют коэффициент контрастности, неприемлемо низкий для доступности, даже с текстом, который более чем в полтора раза превышает размер текста абзаца по умолчанию, что увеличивает приемлемое соотношение до 3:1.
Контраст с цветным фоном и текстом работает так же и может оцениваться аналогичным образом. Я нахожу цвета более сложными для оценки на глаз. К счастью, есть много инструментов, которые помогут!
Lighthouse в Google Chrome может создать отчет, в котором будут выделены все элементы, контрастность которых не соответствует минимальным стандартам. Однако вы также можете получить более подробные показания, установив для своего браузера Accessibility Insights Extension, который будет давать рекомендации по исправлению элементов, не прошедших тесты.
Существует множество инструментов, которые могут помочь вам предварительно проверить цвета во время разработки, в том числе этот простой сайт проверки контраста, где вы можете ввести цвета, которые планируете использовать.
Спасибо!
Я продолжаю учиться и совершенствоваться. Если у вас есть отзывы или предложения, дайте мне знать, и я буду рад внести исправления.
Фото на обложке davisuko на Unsplash
