Vérifier le contraste des couleurs – Accessibilité du contraste des couleurs

Si vous souhaitez vérifier la conformité du site web avec les directives WCAG par programmation, Aspose.HTML for Java fournit le paquet com.aspose.html.accessibility, qui contient toutes les manipulations et vérifications liées à l’accessibilité du web.

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 Java API et à rendre votre contenu Web facile à lire pour tous les utilisateurs.

Contraste des couleurs accessible

Pour créer des sites web accessibles et conviviaux, il est essentiel de veiller à ce que le contraste des couleurs soit suffisant dans le contenu de votre site web. Un mauvais contraste des couleurs peut rendre le contenu difficile à lire, en particulier pour les utilisateurs souffrant de déficiences visuelles. Les lignes directrices pour l’accessibilité des contenus web (WCAG) définissent des taux de contraste minimums pour garantir que le texte soit lisible par tous les utilisateurs. Les critères de test pour le contraste des couleurs figurent dans la ligne directrice 1.4 – Distinguables.

Pour le contraste des couleurs, les WCAG définissent deux niveaux de critères de réussite : AA (contraste minimal) et AAA (contraste renforcé). Ces critères vérifient le rapport de contraste entre le texte et son arrière-plan, qui varie de 1:1 à 21:1.

Pour satisfaire au niveau AA des WCAG 2.0, le texte doit avoir un rapport de contraste d’au moins 4,5:1 pour un texte normal et 3:1 pour un texte en gros caractères.
Pour le niveau AAA, les exigences sont plus strictes : 7:1 pour le texte normal et 4,5:1 pour le texte en gros caractères ou en gras.

Vous trouverez ci-dessous un exemple de contraste adéquat entre la police et l’arrière-plan et un exemple de contraste médiocre :

Text with good contrast

Text with 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 Java.

 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>

Vérifier le contraste des couleurs – Exemples Java

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 les critères liés à la vérification du contraste, il faut trouver le principe dans le code et le passer au validateur d’accessibilité. Dans l’exemple suivant, le validateur est créé pour deux critères : 1.4.3 et 1.4.6 de la ligne directrice 1.4 :

 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

Cet exemple montre comment vérifier l’accessibilité d’un document HTML par rapport à plusieurs critères WCAG à la fois – dans ce cas, 1.4.3 (contraste du texte) et 1.4.6 (contraste amélioré). Tout d’abord, une liste de ces critères est créée, puis la validation est exécutée à l’aide d’AccessibilityValidator, et le résultat final est publié sous la forme d’un rapport en texte intégral. Cette approche est pratique pour évaluer rapidement la conformité d’un document à plusieurs règles sans analyse approfondie.

Vérifier le contraste des couleurs par rapport à un critère d’accessibilité spécifique

Le code Java suivant effectue un contrôle plus détaillé pour un seul critère (1.4.3). Il ne se contente pas de valider le document, mais extrait les erreurs spécifiques liées aux éléments HTML et fournit des informations sur les règles enfreintes, le texte d’erreur et les zones problématiques du code HTML. Cette méthode convient au débogage et à la localisation des endroits où l’accessibilité n’est pas respectée.

 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

Utilisez le constructeur WebAccessibility() pour créer une instance de WebAccessibility afin d’accéder aux principes et lignes directrices définis dans les WCAG.
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.getAll().
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.

Lorsque la validation échoue, la sortie peut ressembler à ceci :

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>

Quelles mesures pouvez-vous prendre pour garantir l’accessibilité du contraste des couleurs ?

Veillez à ce que le texte se détache suffisamment de l’arrière-plan pour être facile à lire. Les lignes directrices pour l’accessibilité des contenus web (WCAG) suggèrent un rapport de contraste minimal de 4,5:1 pour un texte normal et de 3:1 pour un texte plus grand (généralement 18 points ou 14 points en gras). À mesure que la taille de la police et l’épaisseur du trait augmentent, la lisibilité s’améliore même avec un contraste plus faible. Par conséquent, les exigences en matière de contraste pour les textes plus grands sont moins élevées.
Évitez les images de texte et utilisez le texte réel dans la mesure du possible.
Fournir un texte alternatif descriptif pour les images et les icônes afin de communiquer leur importance aux utilisateurs de lecteurs d’écran, en particulier lorsque des variations de couleur sont utilisées.
Choisissez des combinaisons de couleurs qui conviennent aux utilisateurs souffrant de différents types de daltonisme.
Veillez à ce que les espaces réservés dans les formulaires présentent également un contraste de couleurs acceptable.
Utilisez des outils en ligne pour vérifier le contraste et évaluer et confirmer les rapports de contraste dans les conceptions de votre site web.

Références

Voir aussi

L’article Accessibilité des lecteurs d’écran contient des instructions sur la manière de vérifier que le contenu web est compatible avec les lecteurs d’écran. Vous y apprendrez comment vérifier le texte alt et d’autres éléments clés.
Si vous souhaitez savoir comment afficher les résultats de la validation et identifier les problèmes d’accessibilité du web, consultez l’article Résultats de la validation.
Dans l’article Vérification de l’accessibilité du web – Erreurs et avertissements, vous apprendrez comment collecter par programmation en Java des informations sur les erreurs et les avertissements lors de la vérification de l’accessibilité d’un site web.

Utilisez l’outil gratuit en ligne Vérificateur de contraste de couleur 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 Programmation avancée