Vérifier le contraste des couleurs en C#
Si vous souhaitez vérifier la conformité de votre site Web avec les directives WCAG de manière programmatique en C#, Aspose.HTML for .NET fournit l’espace de noms Aspose.Html.Accessibility, qui est destiné à toutes les manipulations et vérifications liées à l’accessibilité du Web. Découvrez si votre site web est conforme aux WCAG !
Cet article traite de la couleur et du contraste approprié selon les WCAG, l’autorité mondiale en matière d’accessibilité du web. Vous apprendrez à vérifier le contraste des couleurs à l’aide de Aspose.HTML for .NET API et à rendre votre contenu Web facile à lire pour tous les utilisateurs.
Accessible Contraste des couleurs
Dans la théorie des couleurs, les couleurs contrastées sont des couleurs provenant de segments opposés du cercle chromatique. Les couleurs directement opposées sur le cercle chromatique de base offrent un contraste maximal. L’accessibilité du contraste des couleurs est essentielle pour garantir que le contenu du web est lisible et utilisable par les personnes souffrant de déficiences visuelles ou de troubles de la vision des couleurs. Les principes d’accessibilité mettent l’accent sur le contraste entre le texte et les couleurs d’arrière-plan afin de rendre le contenu lisible et distinctif. Le choix du bon contraste et de la bonne couleur est essentiel pour créer une expérience web inclusive et conviviale pour tous.
Les critères d’essai pour le contraste des couleurs sont contenus dans la ligne directrice 1.4 – Distinguishable, il existe de tels critères d’essai :
- 1.4.1 Utilisation de la couleur – Niveau А
- 1.4.3 Contraste (minimum) – Niveau АА
- 1.4.6 Contraste (amélioré) – Niveau ААA
En ce qui concerne le contraste des couleurs, les WCAG déterminent deux niveaux de taux de contraste en fonction du niveau des critères de réussite : AA (contraste minimum) et AAA (contraste renforcé). Les critères vérifient le rapport de contraste entre le texte et son arrière-plan. Les rapports de contraste peuvent varier de 1 à 21.
- Le respect de la condition du niveau AA des WCAG 2.0 exige la présentation visuelle du texte avec un rapport de contraste d’au moins 4,5:1 pour un texte normal et d’au moins 3:1 pour un texte à grande échelle.
- Pour le critère de réussite amélioré niveau AAA, ces coefficients sont respectivement de 7:1 pour le texte normal et de 4,5:1 pour le texte en gros caractères ou le texte en gras.
Vous trouverez ci-dessous un exemple de contraste correct entre la police et l’arrière-plan et un exemple de contraste insuffisant :
Écrivons le code HTML de cet exemple dans le fichier check-color.html
et vérifions le contraste des couleurs à l’aide de l’API Aspose.HTML for .NET.
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>
Vérifier le contraste des couleurs – Exemples C#
Pour les utilisateurs malvoyants, il est nécessaire de pouvoir percevoir normalement le contenu de la page. Le contraste entre le texte et l’arrière-plan doit être suffisant pour permettre cette perception. Pour vérifier tous les critères relatifs à la vérification du contraste – trouvez le principe par le code et passez-le au validateur d’accessibilité :
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}
Vérifier le contraste des couleurs par rapport à des critères d’accessibilité spécifiques
Le code C# suivant est conçu pour valider une page web en fonction de critères d’accessibilité spécifiques, et vous recevrez un rapport sur les problèmes liés à ces règles. Pour vérifier un critère spécifique, spécifiez-le en tant que paramètre du validateur d’accessibilité :
- Créer une instance de la classe WebAccessibility.
- Spécifier une ligne directrice (ligne directrice 1.4) pour se concentrer sur un aspect spécifique de l’accessibilité du web. Appeler la méthode GetPrinciple() de la classe AccessibilityRules et la méthode GetGuideline() de la classe Principle pour obtenir le principe requis par le code des WCAG.
- Utilisez la méthode
GetCriterion() de la classe Guideline pour obtenir un critère spécifique avec le code “1.4.3” à partir d’une ligne directrice sélectionnée précédemment. La variable
criterion
contient maintenant le critère spécifique “1.4.3”, et vous pouvez l’utiliser lors de la création d’un validateur pour vérifier votre contenu web par rapport à ce critère particulier. - Appelez la méthode
CreateValidator() pour créer un objet validateur et passez-lui les paramètres
criterion
etValidationBuilder.All
. - Charger un document HTML en utilisant l’un des constructeurs HTMLDocument().
- Utilisez la méthode
Validate(
document
) pour vérifier le contenu HTML en fonction du critère sélectionné. Le résultat est stocké dans la variablevalidationResult
. - Vérifier si la validation a réussi. Si les résultats de la validation indiquent des erreurs, imprimer les informations relatives à l’erreur, y compris le message d’erreur et la règle elle-même.
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}
Le résultat de la vérification du fichier sera une liste de résultats contenant une erreur de type IError. Le programme affichera une sortie sur la 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>
Que pouvez-vous faire pour garantir l’accessibilité des contrastes de couleurs ?
- Veillez à ce que le texte soit suffisamment contrasté par rapport à l’arrière-plan pour être lisible. Les lignes directrices pour l’accessibilité des contenus web (WCAG) recommandent un rapport de contraste minimum de 4,5:1 pour un texte standard et de 3:1 pour un texte de grande taille (typiquement 18 points ou 14 points en gras). Plus la police est grande et le trait large, plus elle sera lisible avec un contraste réduit. Par conséquent, les exigences de contraste pour les polices plus grandes sont moins élevées.
- Évitez les images textuelles et utilisez du texte dans la mesure du possible.
- Fournir un texte alternatif descriptif pour les images et les icônes afin de transmettre leur signification aux utilisateurs de lecteurs d’écran lorsque des distinctions de couleur sont utilisées.
- Choisissez des combinaisons de couleurs qui conviennent aux utilisateurs souffrant de différents types de daltonisme. Ne vous fiez pas uniquement à la couleur pour transmettre l’information ; utilisez des étiquettes de texte, des motifs ou des icônes.
- Familiarisez-vous avec les modèles de conception et les meilleures pratiques disponibles, comme l’utilisation de schémas de couleurs contrastées et l’assurance que le contenu important n’est pas caché ou obscurci par les choix de couleurs.
- Veillez à ce que les espaces réservés du formulaire présentent également un contraste de couleurs acceptable.
- Utilisez des outils de contrôle des contrastes en ligne pour évaluer et vérifier les rapports de contraste dans vos créations web.
Références
- 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
Voir aussi
- Dans le chapitre Vérification de l’accessibilité du Web, vous apprendrez à vérifier l’accessibilité d’un site Web pour qu’il soit conforme aux WCAG ou qu’il réponde uniquement à des critères spécifiques en utilisant les classes et les méthodes des espaces de noms Aspose.Html.Accessibility et Aspose.Html.Accessibility.Results.
- L’article Comment améliorer l’accessibilité d’un site web explique comment rendre votre site web accessible aux utilisateurs et comment vérifier la conformité de votre site web aux WCAG à l’aide de l’API Aspose.HTML for .NET.
- Consultez l’article sur l’ Accessibilité multimédia, si vous souhaitez apprendre comment rendre le contenu multimédia inclusif et accessible à un public plus large, y compris aux personnes handicapées. Cet article contient des exemples en C# permettant de vérifier les meilleures pratiques en matière d’accessibilité multimédia conformément aux normes WCAG.
- Dans l’article Accessibility Validator, vous découvrirez la classe AccessibilityValidator qui peut être utilisée pour tester les règles d’accessibilité du web telles que les principes, les lignes directrices et les critères.
- L’article Erreurs et avertissements traite des classes et des interfaces qui permettent de collecter des informations sur les erreurs et les avertissements lors des tests d’accessibilité des sites web. Il se concentre sur les critères d’échec et les méthodes qui signalent les erreurs, et fournit un exemple en C# pour récupérer les erreurs d’accessibilité du web après avoir testé un document HTML.
- Utilisez le Vérificateur de contraste de couleur en ligne pour vérifier les rapports de contraste dans vos conceptions web. Cet outil permet de savoir si vos choix de couleurs sont conformes aux normes d’accessibilité.