在 C# 中检查颜色对比度

如果您想用 C# 编程检查网站是否符合 WCAG 准则，Aspose.HTML for .NET 提供了 Aspose.Html.Accessibility 命名空间，用于所有与 Web 可访问性相关的操作和检查。了解您的网站是否符合 WCAG 标准！

本文将根据世界权威的网络无障碍标准 WCAG 讨论色彩和适当的对比度。您将学会如何使用 Aspose.HTML for .NET API检查颜色对比度，并让所有用户都能轻松阅读您的网页内容。

无障碍色彩对比

在色彩理论中，对比色是指来自色轮中相对色段的颜色。在基本色轮上直接相对的颜色能提供最大的对比度。无障碍色彩对比对于确保有视觉或色觉障碍的人能够阅读和使用网页内容至关重要。可访问性原则注重文字和背景颜色的对比，使内容清晰易读、易于区分。选择适当的对比度和颜色，对于为每个人创造包容和用户友好的网络体验至关重要。

准则 1.4–可区分性中包含了色彩对比度的测试标准：

1.4.1 颜色的使用 – А 级
1.4.3 对比度(最低)–АА级
1.4.6 对比度(增强)–ААA 级

关于色彩对比度，WCAG 根据成功标准的级别确定了两个级别的对比度：AA(最小对比度)和 AAA(增强对比度)。标准检查文本与其背景之间的对比度。对比度范围从 1 到 21。

要成功符合 WCAG 2.0 中 AA 级的条件，就必须在视觉上呈现文字，正常文字的对比度至少为 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# 示例

对于视障用户来说，必须能够正常感知页面上的内容。文字与背景之间的对比度应足以让其感知。要检查所有与检查对比度有关的标准–通过代码找到原则并将其传递给无障碍验证器：

 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}

Example-CheckColorContrast.cs hosted with ❤ by GitHub

根据特定的无障碍标准检查色彩对比度

以下 C# 代码旨在根据特定的可访问性标准验证网页，您将收到与这些规则相关的问题报告。要检查特定标准，请将其指定为可访问性验证器的参数：

创建 WebAccessibility 类的实例。
指定一个准则(准则 1.4)，以关注网络无障碍的一个特定方面。调用 AccessibilityRules 类的 GetPrinciple() 方法和 Principle 类的 GetGuideline() 方法，通过代码从《无障碍网页内容指引》中获取所需的原则。
使用准则类的 GetCriterion() 方法，从先前选定的准则中获取代码为 “1.4. 3 “的特定准则。现在，“criterion “变量中包含了 “1.4.3 “这一特定标准，您可以在创建验证器时使用它来根据这一特定标准检查网页内容。
调用 CreateValidator() 方法创建验证器对象，并将 criterion 和 ValidationBuilder.All 作为参数传递给它。
- criterion – 是具体的可访问性标准，代表您想要验证的特定规则或要求。
- ValidationBuilder.All – 是参数，表示您想要检查该标准涵盖的所有方面。
使用 HTMLDocument() 构造函数之一加载 HTML 文档。
使用 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}

Example-CheckColorContrastAgainstAccessibilityCriteria.cs 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，大文本(通常为 18 点或 14 点粗体)为 3:1。字体越大，笔画越宽，对比度越低，就越清晰易读。因此，大字体的对比度要求较低。
避免使用文字图片，尽可能使用文字。
在使用颜色区分时，为图像和图标提供描述性替代文本，以便向屏幕阅读器用户传达其含义。
选择适合不同色盲用户的颜色组合。不要仅仅依靠颜色来传达信息，还可以使用文字标签、图案或图标。
熟悉现有的设计模式和最佳实践，如使用高对比度的配色方案，确保重要内容不会被颜色隐藏或遮挡。
确保表单占位符也有可接受的颜色对比度。
使用在线对比度检查工具来评估和验证网页设计中的对比度。

参考资料

另见

在 Web 可访问性检查 章中，您将了解如何使用 Aspose.Html.Accessibility 和 Aspose.Html.Accessibility.Results 命名空间的类和方法检查网站的可访问性是否符合所有 WCAG 标准或仅符合特定标准。
文章 如何提高网站的可访问性 介绍了如何让用户访问您的网站，以及如何使用 .NET 的 Aspose.HTML API 检查网站是否符合 WCAG 标准。
如果您有兴趣了解如何让更多受众(包括残障人士)能够包容和访问多媒体内容，请访问 多媒体无障碍一文。本文包含根据 WCAG 标准检查多媒体无障碍最佳实践的 C# 示例。
在 可访问性验证器 一文中，您将了解 AccessibilityValidator 类，该类可用于测试网络可访问性规则，如原则、指南和标准。
文章 错误和警告 讨论了在网站无障碍测试过程中帮助收集错误和警告信息的类和接口。文章重点介绍了故障标准和报告错误的方法，并提供了一个 C# 示例，用于在测试 HTML 文档后检索网站无障碍访问错误。
使用在线 色彩对比度检查器 来检查网页设计中的对比度。该工具可提供反馈信息，说明您选择的颜色是否符合无障碍标准。

屏幕阅读器无障碍性多媒体无障碍