检查色彩对比度 – 色彩对比度的可及性

如果您想以编程方式检查网站是否符合 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。

要达到 WCAG 2.0 的AA级别，普通文本的对比度必须至少为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// 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}

Example_CheckHtmlAccessibilityColorContrast.java hosted with ❤ by GitHub

本例演示了如何根据多个 WCAG 标准同时对 HTML 文档进行网络无障碍性检查，本例中的标准是 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}

Example_CheckColorContrastAgainstAccessibilityCriteria.java hosted with ❤ by GitHub

使用 WebAccessibility() 构造函数创建一个 WebAccessibility 实例，以访问 WCAG 中定义的原则和指南。
指定一项准则(准则 1.4)，以关注网络无障碍的特定方面。调用 AccessibilityRules 类的 getPrinciple() 方法和 Principle 类的 getGuideline() 方法，通过代码从《无障碍网页内容指引》中获取所需的原则。
使用准则类的 getCriterion() 方法，从先前选定的准则中获取代码为 “1.4.3 “的特定准则。现在，“criterion “变量中包含了 “1.4.3 “这一特定标准，您可以在创建验证器时使用它来根据这一特定标准检查网页内容。
调用 createValidator() 方法创建验证器对象，并将 criterion 和 ValidationBuilder.getAll() 作为参数传递给它。
- criterion – is the specific accessibility criterion that represents the specific rule or requirement you want to validate against.
- ValidationBuilder.getAll() – is the parameter that means you want to check for all aspects covered by the criterion.
使用 HTMLDocument() 构造函数之一加载 HTML 文档。
使用 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，较大文字(通常为 18 点或 14 点粗体)的对比度为 3:1。随着字体大小和笔画宽度的增加，即使对比度较低，可读性也会提高。因此，大号文字的对比度要求较低。
避免使用文字图片，尽可能使用实际文字。
为图像和图标提供描述性替代文字，以向屏幕阅读器用户传达其重要性，尤其是在使用颜色变化时。
选择适合不同色盲用户的颜色组合。
确保表单中的占位符也有可接受的颜色对比度。
使用在线工具检查对比度，评估并确认网站设计中的对比度。

参考资料

另见

有关检查网页内容是否与屏幕阅读器兼容的说明，请参阅文章 屏幕阅读器可访问性。您将学习如何检查alt文本和其他关键元素。
如果您想了解如何查看验证结果和识别网络可访问性问题，请参阅 验证结果一文。
在 网站可访问性检查 - 错误和警告 一文中，您将了解如何在检查网站的可访问性时以 Java 编程方式收集错误和警告信息。

使用免费的在线色彩对比度检查器来检查网页设计中的对比度。该工具可提供反馈信息，帮助您了解色彩选择是否符合无障碍标准。

验证结果屏幕阅读器无障碍