Цветовой контраст – Доступность – Проверка цветового контраста на 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 по коду и передайте его валидатору веб-доступности:

 1// Prepare a path to a source HTML file
 2string documentPath = Path.Combine(DataDir, "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"
 8var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
 9
10// Get criterion by code, for example 1.4.3
11var criterion143 = guideline.GetCriterion("1.4.3");
12
13// Get criterion by code, for example 1.4.6
14var criterion146 = guideline.GetCriterion("1.4.6");
15
16// Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
17var validator = webAccessibility.CreateValidator(new IRule[] { criterion143, criterion146 }, ValidationBuilder.All);
18
19using (var document = new HTMLDocument(documentPath))
20{
21    var validationResult = validator.Validate(document);
22    if (!validationResult.Success)
23    {
24
25        Console.WriteLine(validationResult.SaveToString());
26
27    }
28}

view raw Example-CheckColorContrast hosted with ❤ by GitHub

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

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

Создайте экземпляр класса WebAccessibility.
Определите руководство (Guideline 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.
Проверьте, прошла ли проверка успешно. Если результаты проверки указывают на какие-либо ошибки, выведите выходные данные об ошибке, включая сообщение об ошибке и само правило.

 1// Prepare a path to a source HTML file
 2string documentPath = Path.Combine(DataDir, "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"
 8var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
 9
10// Get criterion by code, for example 1.4.3
11var criterion = guideline.GetCriterion("1.4.3");
12
13// Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
14var validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);
15
16using (var document = new HTMLDocument(documentPath))
17{
18    var validationResult = validator.Validate(document);
19    if (!validationResult.Success)
20    {
21        // Get all result details
22        foreach (var ruleResult in validationResult.Details)
23        {
24            // If the result of the rule is unsuccessful
25            if (!ruleResult.Success)
26            {
27                // Get errors list
28                foreach (var result in ruleResult.Errors)
29                {
30                    // Check the type of the erroneous element, in this case we have an error in the html element rule
31                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
32                    {
33                        // Element of file with error
34                        var rule = (HTMLElement)result.Error.Target.Item;
35
36                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
37                        Console.WriteLine("CSS Rule: {0}", rule.OuterHTML);
38                    }
39                }
40            }
41        }
42    }
43}

view raw Example-CheckColorContrastAgainstAccessibilityCriteria hosted with ❤ by GitHub

Результатом проверки файла будет список результатов, содержащий одну ошибку типа 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

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

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