Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Доступность цветового контраста – Проверка на C#
Contents
[
Hide
Show
]Если вы хотите проверить веб-сайт на соответствие рекомендациям 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// Perform web accessibility validation on HTML document, focusing on the use of colors and color contrast
2
3// Prepare a path to a source HTML file
4string documentPath = Path.Combine(DataDir, "check-color.html");
5
6// Initialize a webAccessibility container
7WebAccessibility webAccessibility = new WebAccessibility();
8
9// Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
10Guideline guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
11
12// Get criterion by code, for example 1.4.3
13Criterion criterion143 = guideline.GetCriterion("1.4.3");
14
15// Get criterion by code, for example 1.4.6
16Criterion criterion146 = guideline.GetCriterion("1.4.6");
17
18// Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
19AccessibilityValidator validator = webAccessibility.CreateValidator(new IRule[] { criterion143, criterion146 }, ValidationBuilder.All);
20
21using (HTMLDocument document = new HTMLDocument(documentPath))
22{
23 ValidationResult validationResult = validator.Validate(document);
24 if (!validationResult.Success)
25 {
26 Console.WriteLine(validationResult.SaveToString());
27 }
28}Проверка цветового контраста по определенным критериям доступности
Следующий код 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// Check color contrast on an HTML document using C#
2
3// Prepare a path to a source HTML file
4string documentPath = Path.Combine(DataDir, "check-color.html");
5
6// Initialize a webAccessibility container
7WebAccessibility webAccessibility = new WebAccessibility();
8
9// Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
10Guideline guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
11
12// Get criterion by code, for example 1.4.3
13Criterion criterion = guideline.GetCriterion("1.4.3");
14
15// Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
16AccessibilityValidator validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);
17
18using (HTMLDocument document = new HTMLDocument(documentPath))
19{
20 ValidationResult validationResult = validator.Validate(document);
21 if (!validationResult.Success)
22 {
23 // Get all result details
24 foreach (RuleValidationResult ruleResult in validationResult.Details)
25 {
26 // If the result of the rule is unsuccessful
27 if (!ruleResult.Success)
28 {
29 // Get errors list
30 foreach (ITechniqueResult result in ruleResult.Errors)
31 {
32 // Check the type of the erroneous element, in this case we have an error in the html element rule
33 if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
34 {
35 // Element of file with error
36 HTMLElement rule = (HTMLElement)result.Error.Target.Item;
37
38 Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
39 Console.WriteLine("CSS Rule: {0}", rule.OuterHTML);
40 }
41 }
42 }
43 }
44 }
45}Результатом проверки файла будет список результатов, содержащий одну ошибку типа 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,
2and less than 14 points if it is in bold.
3CSS Rule: <div class="bad">Bad contrast</div>Что можно сделать, чтобы обеспечить доступность цветового контраста?
- Убедитесь, что текст достаточно контрастен с фоном, чтобы его можно было прочитать. Рекомендации по обеспечению доступности веб-контента (WCAG) рекомендуют минимальный коэффициент контрастности 4,5:1 для стандартного текста и 3:1 для крупного текста (обычно жирным шрифтом 18 или 14 пунктов). Чем крупнее шрифт и шире обводка, тем более разборчивым он будет при меньшем контрасте. Следовательно, требования к контрастности для более крупных шрифтов ниже.
- Избегайте текстовых изображений и используйте текст везде, где это возможно.
- Предоставьте описательный альтернативный текст для изображений и значков, чтобы передать их значение пользователям программ чтения с экрана, когда используются цветовые различия.
- Выбирайте цветовые сочетания, подходящие пользователям с разными типами дальтонизма. Не полагайтесь исключительно на цвет для передачи информации; используйте текстовые метки, узоры или значки.
- Ознакомьтесь с доступными шаблонами дизайна и передовыми практиками, такими как использование высококонтрастных цветовых схем и обеспечение того, чтобы важный контент не был скрыт или затенен выбором цвета.
- Убедитесь, что заполнители формы также имеют приемлемый цветовой контраст.
- Используйте онлайн-инструменты проверки контрастности, чтобы оценить и проверить коэффициент контрастности в вашем веб-дизайне.
References
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the texts
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them
Смотрите также
- В главе Проверка доступности веб-сайта вы узнаете, как проверить доступность веб-сайта на соответствие всем WCAG или только определенным критериям, используя классы и методы пространств имен Aspose.Html.Accessibility и Aspose.Html.Accessibility.Results.
- В статье Как улучшить доступность веб-сайта объясняется, как сделать ваш веб-сайт доступным для пользователей и как проверить ваш веб-сайт на соответствие WCAG, используя API Aspose.HTML for .NET.
- Статья Альтернативный Текст – Веб-доступность объясняет, как разработать веб-сайт для доступности экранного ридера в соответствии с рекомендациями WCAG с использованием API Aspose.HTML for .NET.
- В статье Валидатор доступности вы узнаете о классе AccessibilityValidator, который можно использовать для проверки правил доступности веб-сайтов, таких как принципы, руководства и критерии.
- В статье
Правила веб-доступности вы узнаете, как использовать класс AccessibilityRules, который является репозиторием требований WCAG 2, критериев успеха и методов для проверок веб-доступности.
Используйте онлайн приложение Проверка цветового контраста, чтобы проверить коэффициент контрастности в вашем веб-дизайне. Этот инструмент предоставляет информацию о том, соответствует ли выбранный вами цвет стандартам доступности. Средство проверки цветового контраста работает на любой платформе, на любом устройстве с браузером. Вы можете запустить его на компьютерах, планшетах и мобильных устройствах. С легкостью используйте этот инструмент, чтобы проверить цветовой контраст и сделать свой дизайн доступным для всех!
