Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Проверка контрастности цвета – Веб-доступность
Contents
[
Hide
Show
]Если вы хотите проверить сайт на соответствие рекомендациям 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// Validate HTML accessibility for color contrast in Java using WCAG criteria
2
3// Prepare a path to a source HTML file
4String documentPath = "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.getRules()
11 .getPrinciple("1").getGuideline("1.4");
12
13// Get criterion by code, for example 1.4.3
14Criterion criterion143 = guideline.getCriterion("1.4.3");
15
16// Get criterion by code, for example 1.4.6
17Criterion criterion146 = guideline.getCriterion("1.4.6");
18
19// Create an accessibility validator, pass the found guideline
20// as parameters and specify the full validation settings
21List<IRule> rules = new List<>();
22rules.add(criterion143);
23rules.add(criterion146);
24
25AccessibilityValidator validator = webAccessibility.createValidator(
26 rules,
27 ValidationBuilder.getAll()
28);
29
30final HTMLDocument document = new HTMLDocument(documentPath);
31ValidationResult validationResult = validator.validate(document);
32if (!validationResult.getSuccess()) {
33 System.out.println(validationResult.saveToString());
34}Этот пример демонстрирует, как выполнить проверку веб-доступности HTML-документа сразу по нескольким критериям WCAG — в данном случае 1.4.3 (контраст текста) и 1.4.6 (повышенный контраст). Сначала создаётся список этих критериев, затем с помощью AccessibilityValidator запускается валидация, и итоговый результат выводится в виде полного текстового отчёта. Такой подход удобен для быстрой оценки соответствия документа нескольким правилам без углублённого анализа.
Проверка цветового контраста по определенному критерию доступности
Следующий Java-код выполняет более детальную проверку по одному критерию (1.4.3). Он не просто валидирует документ, а извлекает конкретные ошибки, связанные с HTML-элементами, и выводит информацию о нарушенных правилах, тексте ошибок и проблемных участках HTML-кода. Такой способ подходит для отладки и точного выявления мест, где доступность нарушена.
1// Check color contrast on an HTML document using Java
2
3// Prepare a path to a source HTML file
4String documentPath = "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.getRules()
11 .getPrinciple("1").getGuideline("1.4");
12
13// Get criterion by code, for example 1.4.3
14Criterion criterion = guideline.getCriterion("1.4.3");
15
16// Create an accessibility validator, pass the found guideline
17// as parameters and specify the full validation settings
18AccessibilityValidator validator = webAccessibility.createValidator(
19 criterion,
20 ValidationBuilder.getAll()
21);
22
23final HTMLDocument document = new HTMLDocument(documentPath);
24ValidationResult validationResult = validator.validate(document);
25if (!validationResult.getSuccess()) {
26 // Get all result details
27 for (RuleValidationResult ruleResult : validationResult.getDetails()) {
28 // If the result of the rule is unsuccessful
29 if (!ruleResult.getSuccess()) {
30 // Get errors list
31 for (ITechniqueResult result : ruleResult.getErrors()) {
32 // Check the type of the erroneous element, in this case
33 // we have an error in the html element rule
34 if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
35 // Element of file with error
36 HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
37
38 System.out.println(String.format("Error in rule %s : %s",
39 result.getRule().getCode(), result.getError().getErrorMessage()));
40
41 System.out.println(String.format("CSS Rule: %s",
42 rule.getOuterHTML()));
43 }
44 }
45 }
46 }
47}- Используйте конструктор 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-пунктового полужирного). При увеличении размера шрифта и ширины штриха читабельность улучшается даже при более низком контрасте. Поэтому требования к контрастности для крупного текста ниже.
- Избегайте текстовых изображений и используйте реальный текст везде, где это возможно.
- Предоставляйте описательный альтернативный текст для изображений, кнопок, иконок, и др. чтобы донести их важность до пользователей программ чтения с экрана, особенно при использовании цветовых вариаций.
- Выбирайте цветовые сочетания, которые подходят пользователям с различными типами дальтонизма.
- Убедитесь в том, что заполнители в формах также имеют приемлемый цветовой контраст.
- Используйте онлайн-инструменты для проверки контрастности, оцените и подтвердите соотношение контрастности в дизайне вашего сайта.
Полезные ссылки
- 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
Смотрите также
- Инструкции по проверке совместимости веб-контента с программами чтения с экрана вы найдете в статье Доступность программ чтения с экрана. Вы узнаете, как проверить альтернативный текст и другие ключевые элементы.
- Если вы хотите узнать, как просматривать результаты проверки и выявлять проблемы веб-доступности, обратитесь к статье Результаты проверки.
- В статье
Проверка доступности веб-сайта – Oшибки и предупреждения вы узнаете как программно собирать информацию об ошибках и предупреждениях при проверке доступности веб-сайта.
Используйте бесплатную онлайн Проверку цветового контраста для проверки коэффициентов контрастности в ваших веб-дизайнах. Этот инструмент позволяет определить, соответствуют ли выбранные вами цвета стандартам доступности.
