Цветовой контраст – Доступность – Проверка цветового контраста на C#

Если вы хотите проверить веб-сайт на соответствие рекомендациям WCAG программным способом на C#, Aspose.HTML for .NET предоставляет пространство имен Aspose.Html.Accessibility, которое предназначено для всех манипуляций и проверок, связанных с веб-доступностью. Узнайте, соответствует ли ваш сайт требованиям WCAG!

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

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

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

Критерии испытаний цветового контраста содержатся в методическом указании 1.4 – Distinguishable, существуют такие критерии испытаний:

1.4.1 Использование цвета – уровень А
1.4.3 Контрастность (Минимум) – Уровень АА
1.4.6 Контрастность (повышенная) – уровень ААА

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

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

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

Good contrast

Bad contrast

Давайте напишем HTML-код для этого примера в файл check-color.html и проверим цветовой контраст с помощью Aspose.HTML for .NET 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: #045DE2;
16                font-size: 16px;
17            }
18            .good {
19                background-color: #f0f6ff;
20                font-size: 18px;
21            }
22        </style>
23    </head>
24    <body>
25        <div class="good">Good contrast</div>
26        <div class="bad">Bad contrast</div>
27    </body>
28</html>

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

Для слабовидящих пользователей необходимо иметь возможность нормально воспринимать контент на странице. Контрастность фона и текста должны быть достаточными для его восприятия. Чтобы проверить все критерии, которые относятся к проверке контрастности – найдите Principle по коду и передайте его валидатору веб-доступности:

 1using Aspose.Html;
 2using Aspose.Html.Accessibility;
 3using System.IO;
 4...
 5    // Initialize a webAccessibility container
 6    WebAccessibility webAccessibility = new WebAccessibility();
 7
 8    // Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
 9    var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
10
11    // Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
12    var validator = webAccessibility.CreateValidator(guideline, ValidationBuilder.All);
13
14    // Initialize an object of the HTMLDocument
15    using (var document = new Aspose.Html.HTMLDocument(htmlFile))
16    {
17        // Check the document using the Validate() method
18        var validationResult = validator.Validate(document);
19
20        // Checking for success
21        if (!validationResult.Success)
22        {
23            // here is the result handling code
24        }
25    }

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

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

Создайте экземпляр класса WebAccessibility.
Определите руководство (Руководство 1.4), чтобы сосредоточиться на конкретном аспекте веб-доступности. Вызовите метод GetPrinciple() класса AccessibilityRules и метод GetGuideline() класса Principle, чтобы получить требуемый принцип по коду из WCAG.
Используйте метод GetCriterion() класса Guideline для получения конкретного критерия с кодом «1.4.3» из ранее определенного guideline. Переменная criterion теперь содержит конкретный критерий “1.4.3”, и вы можете использовать ее при создании валидатора для проверки веб-контента на соответствие этому конкретному критерию.
Вызовите метод CreateValidator(), чтобы создать объект валидатора, и передайте ему criterion и ValidationBuilder.All в качестве параметров.
- criterion – это конкретный критерий доступности, который представляет конкретное правило или требование, соответствие которому вы хотите проверить.
- ValidationBuilder.All – это параметр, который означает, что вы хотите проверить все аспекты, охватываемые критерием.
Загрузите HTML-документ, используя один из конструкторов HTMLDocument().
Используйте метод Validate(document), чтобы проверить содержимое HTML на соответствие выбранному критерию. Результат сохраняется в переменной validationResult.
Проверьте, прошла ли проверка успешно. Если результаты проверки указывают на какие-либо ошибки, выведите выходные данные об ошибке, включая сообщение об ошибке и само правило.

 1using Aspose.Html;
 2using Aspose.Html.Accessibility;
 3using System.IO;
 4...
 5    // Initialize a webAccessibility container
 6    WebAccessibility webAccessibility = new WebAccessibility();
 7
 8    // Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
 9    var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
10
11    // Get criterion by code, for example 1.4.3
12    var criterion = guideline.GetCriterion("1.4.3");
13
14    // Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
15    var validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);
16
17    using (var document = new HTMLDocument(htmlFile))
18    {
19        var validationResult = validator.Validate(document);
20        if (!validationResult.Success)
21        {
22            // Get all result details
23            foreach (var ruleResult in validationResult.Details)
24            {
25                // If the result of the rule is unsuccessful
26                if (!ruleResult.Success)
27                {
28                    // Get errors list
29                    foreach (var result in ruleResult.Errors)
30                    {
31                        // Check the type of the erroneous element, in this case we have an error in the html element rule
32                        if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
33                        {
34                            // Element of file with error
35                            var rule = (HTMLElement)result.Error.Target.Item;
36
37                            Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
38                            Console.WriteLine("CSS Rule: {0}", rule.OuterHTML);
39                        }
40                    }
41                }
42            }
43        }
44    }

Результатом проверки файла будет список результатов, содержащий одну ошибку типа IError. Программа выведет на консоль:

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, and less than 14 points if it is in bold.
2    CSS Rule: <div class="bad">Bad contrast</div>

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

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

References

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

Альтернативный Текст Веб-доступность Мультимедиа