Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Check Color Contrast in C#
Contents
[
Hide
Show
]If you want to check the website for compliance with WCAG guidelines programmatically in C#, the Aspose.HTML for .NET provides the Aspose.Html.Accessibility namespace, which is for all Web Accessibility related manipulations and checks. Find out if your website is WCAG compliant!
This article will discuss color and proper contrast according to WCAG, the world’s authority on web accessibility. You learn how to check color contrast using Aspose.HTML for .NET API and make your web content easy to read for all users.
Accessible Color Contrast
In color theory, contrasting colors are colors from opposite segments of the color wheel. Colors directly opposite each other on the basic color wheel provide maximum contrast. Accessible color contrast is essential to ensure web content is readable and usable by people with visual or color vision impairments. Accessibility principles focus on contrasting text and background colors to make content legible and distinguishable. Choosing the proper contrast and color is vital to creating an inclusive and user-friendly web experience for everyone.
The test criteria for color contrast are contained in the guideline 1.4 – Distinguishable, there are such test criteria:
- 1.4.1 Use of Color – Level А
- 1.4.3 Contrast (Minimum) – Level АА
- 1.4.6 Contrast (Enhanced) – Level ААA
Regarding color contrast, the WCAG determines two levels of contrast ratios depending on the level of success criteria: AA (minimum contrast) and AAA (enhanced contrast). Criteria checks the contrast ratio between text and its background. Contrast ratios can range from 1 to 21.
- Successfully complying with the condition for Level AA of WCAG 2.0 requires the visual presentation of text with a contrast ratio of at least 4.5:1 for normal text and at least 3:1 for large-scale text.
- For the improved success criterion level AAA, these coefficients are 7:1 for normal text and 4.5:1 for large text or bold text, respectively.
Below you can see an example of proper contrast between font and background and an example of poor contrast:
Good contrast
Bad contrast
Let’s write the HTML code for this example to check-color.html file and check color contrast using 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>Check Color Contrast – C# Examples
For visually impaired users, it is necessary to be able to perceive the content on the page normally. The contrast between text and background should be sufficient for its perception. To check all the criteria that relate to checking contrast – find the principle by code and pass it to the accessibility validator:
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}Check Color Contrast Against Specific Accessibility Criteria
The following C# code is designed to validate a web page against specific accessibility criteria, and you will receive a report of issues related to those rules. To check a specific criterion, specify it as a parameter for the accessibility validator:
- Create an instance of the WebAccessibility class.
- Specify a guideline (Guideline 1.4) to focus on a specific aspect of web accessibility. Call the GetPrinciple() method of the AccessibilityRules class and GetGuideline() method of the Principle class to get required principle by code from WCAG.
- Use the
GetCriterion() method of the Guideline class to obtain a specific criterion with the code “1.4.3” from a previously selected guideline. The
criterionvariable now holds the specific criterion “1.4.3,” and you can use it when creating a validator to check your web content against this particular criterion. - Call the
CreateValidator() method to create a validator object and pass the
criterionandValidationBuilder.Allto it as parameters.criterion– is the specific accessibility criterion that represents the specific rule or requirement you want to validate against.ValidationBuilder.All– is the parameter that means you want to check for all aspects covered by the criterion.
- Load an HTML document using one of the HTMLDocument() constructors.
- Use the
Validate(
document) method to check the HTML content against the selected criterion. The result is stored in thevalidationResultvariable. - Check whether the validation was successful. If the validation results indicate any errors, print output information about the error, including the error message and the rule itself.
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}The result of the file check will be a list of results containing one error with type IError. The program will output to the console:
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>What can you do to ensure color contrast accessibility?
- Make sure the text has enough contrast with the background to be readable. The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for standard text and 3:1 for large text (typically 18-point or 14-point bold). The larger the font and wider the stroke, the more legible it will be with less contrast. Consequently, the contrast requirements for larger fonts are lower.
- Avoid text images and use text wherever possible.
- Provide descriptive alternative text for images and icons to convey their meaning to screen reader users when color distinctions are used.
- Choose color combinations that suit users with different types of color blindness. Don’t rely solely on color to convey information; use text labels, patterns, or icons.
- Familiarize yourself with available design patterns and best practices, such as using high-contrast color schemes and ensuring important content is not hidden or obscured by color choices.
- Ensure that the form’s placeholders also have acceptable color contrast.
- Use online contrast-checking tools to evaluate and verify the contrast ratios in your web designs.
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
See Also
- In the chapter Web Accessibility Check, you will learn how to check website accessibility for all WCAG compliance or only meet specific criteria using classes and methods of the Aspose.Html.Accessibility and Aspose.Html.Accessibility.Results namespaces.
- The article How to Improve Website Accessibility explains how to make your website accessible to users and how to check your website for WCAG compliance using the Aspose.HTML API for .NET.
- Visit the article on Multimedia Accessibility, if you are interested in learning how to make multimedia content inclusive and accessible to a broader audience, including people with disabilities. This article contains C# examples to check multimedia accessibility best practices according to WCAG standards.
- In the article Accessibility Validator, you will learn about the AccessibilityValidator class that can be used to test web accessibility rules such as principles, guidelines, and criteria.
- The article Errors and Warning discusses the classes and interfaces that help collect information about errors and warnings during website accessibility testing. It focuses on the failure criteria and methods that report errors, and provides a C# example for retrieving web accessibility errors after testing an HTML document.
- Use the online Color Contrast Checker to check the contrast ratios in your web designs. This tool provides feedback on whether your color choices meet accessibility standards.
