Проверка контрастности цвета – Веб-доступность

Если вы хотите проверить сайт на соответствие рекомендациям WCAG программным путем, Aspose.HTML for Java предоставляет пакет com.aspose.html.accessibility, который предназначен для всех манипуляций и проверок, связанных с веб-доступностью.

В этой статье речь пойдет о цвете и правильном контрасте согласно WCAG, мировому авторитету в области веб-доступности. Вы узнаете, как проверить контрастность цвета с помощью Aspose.HTML for Java API и сделать ваш веб-контент легко читаемым для всех пользователей.

Доступный цветовой контраст

Обеспечение достаточного цветового контраста в веб-контенте очень важно для создания доступных и удобных для пользователей сайтов. Плохой цветовой контраст может затруднить чтение контента, особенно для пользователей с нарушениями зрения. Руководство по доступности веб-контента (WCAG) определяет минимальные коэффициенты контрастности, чтобы текст был доступен для чтения всем пользователям. Критерии проверки цветового контраста содержатся в руководстве 1.4 – Distinguishable.

Для цветового контраста WCAG определяет два уровня критериев успеха: AA (минимальная контрастность) и AAA (повышенная контрастность). Эти критерии проверяют коэффициент контрастности между текстом и его фоном, который варьируется от 1:1 до 21:1.

Чтобы соответствовать уровню AA стандарта WCAG 2.0, контрастность текста должна составлять не менее 4,5:1 для обычного текста и 3:1 для крупного текста.
Для уровня AAA требования более строгие: 7:1 для обычного текста и 4,5:1 для крупного или жирного текста.

Ниже вы можете увидеть пример правильного контраста между шрифтом и фоном и пример плохого контраста:

Text with good contrast

Text with bad contrast

Давайте напишем HTML-код для этого примера в файл check-color.html и проверим контрастность цветов с помощью Aspose.HTML for Java API.

 1<html>
 2    <head>
 3        <style>
 4            div {
 5                font-family: sans-serif;
 6                text-align: center;
 7                font-weight: bold;
 8                text-align: center;
 9                padding: 10px;
10                border-radius: 15px;
11                width: 300px;
12                margin: auto;
13            }
14            .bad {
15                background-color: #8b030e;
16                font-size: 16px;
17            }
18            .good {
19                background-color: #fff0f2;
20                font-size: 18px;
21            }
22        </style>
23    </head>
24    <body>
25        <div class="good">Text with good contrast</div>
26        <div class="bad">Text with bad contrast</div>
27    </body>
28</html>

Проверка цветового контраста – примеры на Java

Чтобы проверить критерии, относящиеся к проверке контрастности, – найдите принцип в коде и передайте его валидатору доступности. В следующем примере валидатор создаётся для двух критериев: 1.4.3 и 1.4.6 из руководства 1.4:

 1// Prepare a path to a source HTML file
 2String documentPath = "check-color.html";
 3
 4// Initialize a webAccessibility container
 5WebAccessibility webAccessibility = new WebAccessibility();
 6
 7// Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
 8Guideline guideline = webAccessibility.getRules()
 9        .getPrinciple("1").getGuideline("1.4");
10
11// Get criterion by code, for example 1.4.3
12Criterion criterion143 = guideline.getCriterion("1.4.3");
13
14// Get criterion by code, for example 1.4.6
15Criterion criterion146 = guideline.getCriterion("1.4.6");
16
17// Create an accessibility validator, pass the found guideline
18// as parameters and specify the full validation settings
19List<IRule> rules = new List<>();
20rules.add(criterion143);
21rules.add(criterion146);
22
23AccessibilityValidator validator = webAccessibility.createValidator(
24        rules,
25        ValidationBuilder.getAll()
26);
27
28final HTMLDocument document = new HTMLDocument(documentPath);
29ValidationResult validationResult = validator.validate(document);
30if (!validationResult.getSuccess()) {
31    System.out.println(validationResult.saveToString());
32}

Example_CheckColorContrast hosted with ❤ by GitHub

Этот пример демонстрирует, как выполнить проверку веб-доступности HTML-документа сразу по нескольким критериям WCAG — в данном случае 1.4.3 (контраст текста) и 1.4.6 (повышенный контраст). Сначала создаётся список этих критериев, затем с помощью AccessibilityValidator запускается валидация, и итоговый результат выводится в виде полного текстового отчёта. Такой подход удобен для быстрой оценки соответствия документа нескольким правилам без углублённого анализа.

Проверка цветового контраста по определенному критерию доступности

Следующий Java-код выполняет более детальную проверку по одному критерию (1.4.3). Он не просто валидирует документ, а извлекает конкретные ошибки, связанные с HTML-элементами, и выводит информацию о нарушенных правилах, тексте ошибок и проблемных участках HTML-кода. Такой способ подходит для отладки и точного выявления мест, где доступность нарушена.

 1// Prepare a path to a source HTML file
 2String documentPath = "check-color.html";
 3
 4// Initialize a webAccessibility container
 5WebAccessibility webAccessibility = new WebAccessibility();
 6
 7// Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
 8Guideline guideline = webAccessibility.getRules()
 9        .getPrinciple("1").getGuideline("1.4");
10
11// Get criterion by code, for example 1.4.3
12Criterion criterion = guideline.getCriterion("1.4.3");
13
14// Create an accessibility validator, pass the found guideline
15// as parameters and specify the full validation settings
16AccessibilityValidator validator = webAccessibility.createValidator(
17        criterion,
18        ValidationBuilder.getAll()
19);
20
21final HTMLDocument document = new HTMLDocument(documentPath);
22ValidationResult validationResult = validator.validate(document);
23if (!validationResult.getSuccess()) {
24    // Get all result details
25    for (RuleValidationResult ruleResult : validationResult.getDetails()) {
26        // If the result of the rule is unsuccessful
27        if (!ruleResult.getSuccess()) {
28            // Get errors list
29            for (ITechniqueResult result : ruleResult.getErrors()) {
30                // Check the type of the erroneous element, in this case
31                // we have an error in the html element rule
32                if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
33                    // Element of file with error
34                    HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
35
36                    System.out.println(String.format("Error in rule %s : %s",
37                            result.getRule().getCode(), result.getError().getErrorMessage()));
38
39                    System.out.println(String.format("CSS Rule: %s",
40                            rule.getOuterHTML()));
41                }
42}}}}

Example_CheckColorContrastAgainstAccessibilityCriteria hosted with ❤ by GitHub

Используйте конструктор WebAccessibility(), чтобы создать экземпляр WebAccessibility для доступа к принципам и рекомендациям, определенным в WCAG.
Укажите руководящий принцип (Guideline 1.4), чтобы сосредоточиться на конкретном аспекте веб-доступности. Вызовите метод getPrinciple() класса AccessibilityRules и метод getGuideline() класса Principle, чтобы получить требуемый принцип по коду из WCAG.
Используйте метод getCriterion() класса Guideline, чтобы получить конкретный критерий с кодом “1.4.3” из ранее выбранного руководства. Теперь переменная criterion содержит конкретный критерий “1.4.3”, и вы можете использовать его при создании валидатора для проверки вашего веб-контента на соответствие этому критерию.
Вызовите метод createValidator() для создания объекта валидатора и передайте ему в качестве параметров criterion и ValidationBuilder.getAll().
- criterion – это конкретный критерий доступности, который представляет собой конкретное правило или требование, по которому вы хотите провести валидацию.
- ValidationBuilder.getAll() – это параметр, означающий, что вы хотите проверить все аспекты, охватываемые критерием.
Загрузите HTML-документ, используя один из конструкторов HTMLDocument().
Используйте метод validate(document) для проверки содержимого HTML-документа на соответствие выбранному критерию. Результат сохраняется в переменной validationResult.
Проверьте, успешно ли прошла валидация. Если в результатах проверки обнаружены ошибки, выведите информацию об ошибке, включая сообщение об ошибке и само правило.

При неудачной проверке вывод может выглядеть следующим образом:

1Error in rule G18 : Make sure the contrast ratio between the text (and images of text) and the background behind the text is at least 4.5:1 for text less than 18 points if it is not in bold,
2and less than 14 points if it is in bold.
3CSS Rule: <div class="bad">Text with bad contrast</div>

Какие шаги вы можете предпринять, чтобы гарантировать доступность цветового контраста?

Убедитесь, что текст достаточно выделяется на фоне, чтобы его можно было легко прочитать. Руководство по обеспечению доступности веб-контента (WCAG) рекомендует минимальный коэффициент контрастности 4,5:1 для обычного текста и 3:1 для крупного текста (обычно 18- или 14-пунктового полужирного). При увеличении размера шрифта и ширины штриха читабельность улучшается даже при более низком контрасте. Поэтому требования к контрастности для крупного текста ниже.
Избегайте текстовых изображений и используйте реальный текст везде, где это возможно.
Предоставляйте описательный альтернативный текст для изображений, кнопок, иконок, и др. чтобы донести их важность до пользователей программ чтения с экрана, особенно при использовании цветовых вариаций.
Выбирайте цветовые сочетания, которые подходят пользователям с различными типами дальтонизма.
Убедитесь в том, что заполнители в формах также имеют приемлемый цветовой контраст.
Используйте онлайн-инструменты для проверки контрастности, оцените и подтвердите соотношение контрастности в дизайне вашего сайта.

Полезные ссылки

Смотрите также

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

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

Доступность для программ чтения с экрана Расширенное программирование