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

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

Сейчас мы сконцентрируемся на том, что такое цветовой контраст и как это исправить.

Краткое введение в критерии успеха WCAG.

1. Ну, есть определенные правила/стандарты для создания хорошего корпоративного приложения, называемые правилами WCAG, о которых вы можете подробно рассказать здесь .
2. Соотношение цветового контраста между фоном и содержимым переднего плана (то есть обычно текстом) должно быть достаточно большим, чтобы обеспечить удобочитаемость (пользователь должен иметь возможность читать текст без затруднений или с меньшими трудностями).
3. Как правило, ожидается, что веб-сайт будет соответствовать критериям минимального контраста 1.4.3. но для создания полноценного веб-сайта необходимо следовать критериям 1.4.6 Enhanced контраста. также.

Лучшим инструментом для проверки цветового контраста веб-сайта является использование Siteimprove Accessibility Checker . Бесплатной версии более чем достаточно.

1. Запустите это расширение, щелкнув значок на панели расширения, когда ваш сайт открыт.

3. Теперь нажмите на синий заголовок →, и он выделит конкретный элемент, в котором он неисправен. (Позже я напишу еще одну подробную статью о том, как использовать siteimprove.)

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

Как проанализировать и исправить цветовой контраст

1. Сначала откройте вкладку инструментов разработчика (если вы используете Chrome), щелкнув правой кнопкой мыши -> проверить или CTRL + SHIFT + I. И нажмите на эту маленькую иконку со стрелкой в ​​верхней части вкладки инструментов разработчика и наведите указатель мыши на выделенный элемент на странице.

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

4. Обратите внимание, как изменился коэффициент контрастности с 1,99 до 4,2✅ и 7,01✅✅?

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

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

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