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 :

Good contrast

Bad contrast

É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}

Example-CheckColorContrast.cs hosted with ❤ by GitHub

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 et ValidationBuilder.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 variable validationResult.
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}

Example-CheckColorContrastAgainstAccessibilityCriteria.cs hosted with ❤ by GitHub

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

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é.

Accessibilité des lecteurs d'écran Accessibilité multimédia