Farbkontrast prüfen – Zugänglichkeit des Farbkontrasts

Wenn Sie die Website programmatisch auf die Einhaltung der WCAG-Richtlinien prüfen wollen, bietet Aspose.HTML for Java das Paket com.aspose.html.accessibility, das für alle Manipulationen und Prüfungen im Zusammenhang mit der Barrierefreiheit im Web zuständig ist.

In diesem Artikel geht es um Farbe und den richtigen Kontrast gemäß WCAG, der weltweiten Autorität für Barrierefreiheit im Web. Sie lernen, wie Sie den Farbkontrast mit Aspose.HTML for Java API überprüfen und Ihre Webinhalte für alle Benutzer leicht lesbar machen können.

Zugänglicher Farbkontrast

Ein ausreichender Farbkontrast in Ihren Webinhalten ist für die Erstellung zugänglicher und benutzerfreundlicher Websites unerlässlich. Ein unzureichender Farbkontrast kann die Lesbarkeit von Inhalten erschweren, insbesondere für Nutzer mit Sehbehinderungen. Die Web Content Accessibility Guidelines (WCAG) legen Mindestkontrastverhältnisse fest, um sicherzustellen, dass der Text für alle Benutzer lesbar ist. Die Prüfkriterien für den Farbkontrast sind in der Leitlinie 1.4 – Unterscheidbar enthalten.

Für den Farbkontrast definiert die WCAG zwei Stufen von Erfolgskriterien: AA (minimaler Kontrast) und AAA (verstärkter Kontrast). Diese Kriterien prüfen das Kontrastverhältnis zwischen Text und Hintergrund, das von 1:1 bis 21:1 reicht.

– Um die Level AA der WCAG 2.0 zu erfüllen, muss der Text ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text aufweisen. – Für Level AAA sind die Anforderungen strenger: 7:1 für normalen Text und 4,5:1 für großen oder fetten Text.

Unten sehen Sie ein Beispiel für einen guten Kontrast zwischen Schrift und Hintergrund und ein Beispiel für einen schlechten Kontrast:

Text with good contrast

Text with bad contrast

Schreiben wir den HTML-Code für dieses Beispiel in die Datei “check-color.html” und prüfen den Farbkontrast mit Aspose.HTML for Java 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: #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>

Farbkontrast prüfen – Java Beispiele

Für sehbehinderte Nutzer ist es wichtig, dass sie den Inhalt der Seite normal wahrnehmen können. Der Kontrast zwischen Text und Hintergrund sollte für die Wahrnehmung ausreichend sein. Um die Kriterien für die Kontrastprüfung zu überprüfen, suchen Sie das Prinzip im Code und übergeben Sie es an den Accessibility Validator. Im folgenden Beispiel wird der Validator für zwei Kriterien erstellt: 1.4.3 und 1.4.6 aus dem Leitfaden 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

Dieses Beispiel zeigt, wie man ein HTML-Dokument auf seine Zugänglichkeit im Hinblick auf mehrere WCAG-Kriterien gleichzeitig überprüft – in diesem Fall 1.4.3 (Textkontrast) und 1.4.6 (verstärkter Kontrast). Zunächst wird eine Liste dieser Kriterien erstellt, dann wird die Validierung mit AccessibilityValidator durchgeführt und das Endergebnis als Volltextbericht ausgegeben. Dieser Ansatz ist praktisch, um die Übereinstimmung eines Dokuments mit mehreren Regeln schnell und ohne tiefgreifende Analyse zu beurteilen.

Prüfen Sie den Farbkontrast anhand eines bestimmten Zugänglichkeitskriteriums

Der folgende Java-Code führt eine detailliertere Prüfung für ein einzelnes Kriterium durch (1.4.3). Er validiert nicht einfach das Dokument, sondern extrahiert spezifische Fehler im Zusammenhang mit HTML-Elementen und gibt Informationen über die verletzten Regeln, den Fehlertext und die problematischen Bereiche des HTML-Codes aus. Diese Methode eignet sich für die Fehlersuche und das Aufspüren von Stellen, an denen die Zugänglichkeit verletzt wird.

 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

Verwenden Sie den WebAccessibility()-Konstruktor, um eine Instanz von WebAccessibility für den Zugriff auf die in den WCAG definierten Grundsätze und Richtlinien zu erstellen.
Geben Sie eine Leitlinie (Leitlinie 1.4) an, um einen bestimmten Aspekt der Barrierefreiheit im Web zu behandeln. Rufen Sie die Methode getPrinciple() der Klasse AccessibilityRules und die Methode getGuideline() der Klasse Principle auf, um das erforderliche Prinzip per Code aus den WCAG zu erhalten.
Verwenden Sie die Methode getCriterion() der Klasse Guideline, um ein bestimmtes Kriterium mit dem Code “1.4.3” aus einer zuvor ausgewählten Leitlinie zu erhalten. Die Variable criterion enthält nun das spezifische Kriterium “1.4.3”, und Sie können es bei der Erstellung eines Validators verwenden, um Ihren Webinhalt anhand dieses speziellen Kriteriums zu überprüfen.
Rufen Sie die Methode createValidator() auf, um ein Validator-Objekt zu erstellen, und übergeben Sie ihm die Parameter criterion und ValidationBuilder.getAll().
Laden Sie ein HTML-Dokument mit einem der HTMLDocument() Konstruktoren.
Verwenden Sie die Methode validate(document), um den HTML-Inhalt anhand des ausgewählten Kriteriums zu überprüfen. Das Ergebnis wird in der Variablen validationResult gespeichert.
Prüfen Sie, ob die Validierung erfolgreich war. Wenn die Überprüfungsergebnisse Fehler anzeigen, werden Informationen über den Fehler, einschließlich der Fehlermeldung und der Regel selbst, ausgegeben.

Wenn die Validierung fehlschlägt, könnte die Ausgabe wie folgt aussehen:

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>

Welche Maßnahmen können Sie ergreifen, um die Zugänglichkeit von Farbkontrasten zu gewährleisten?

Achten Sie darauf, dass sich der Text ausreichend vom Hintergrund abhebt, damit er leicht zu lesen ist. Die Web Content Accessibility Guidelines (WCAG) empfehlen ein Mindestkontrastverhältnis von 4,5:1 für normalen Text und 3:1 für größeren Text (in der Regel 18-Punkt- oder 14-Punkt-Fettdruck). Mit zunehmender Schriftgröße und Strichstärke verbessert sich die Lesbarkeit auch bei geringerem Kontrast. Daher sind die Kontrastanforderungen für größeren Text geringer.
Vermeiden Sie Textbilder und verwenden Sie nach Möglichkeit echten Text.
Geben Sie beschreibenden Alternativtext für Bilder und Symbole an, um deren Bedeutung für Benutzer von Bildschirmlesegeräten zu verdeutlichen, insbesondere wenn Farbvarianten verwendet werden.
Wählen Sie Farbkombinationen, die für Benutzer mit verschiedenen Arten von Farbenblindheit geeignet sind.
Achten Sie darauf, dass auch die Platzhalter in Formularen einen akzeptablen Farbkontrast aufweisen.
Nutzen Sie Online-Tools, um den Kontrast zu überprüfen und die Kontrastverhältnisse in Ihren Website-Designs zu bewerten und zu bestätigen.

Referenzen

Siehe auch

Anleitungen zur Überprüfung der Kompatibilität von Webinhalten mit Bildschirmlesegeräten finden Sie in dem Artikel Zugänglichkeit von Bildschirmlesegeräten. Dort erfahren Sie, wie Sie den Alt-Text und andere wichtige Elemente überprüfen können.
Wenn Sie wissen möchten, wie Sie Validierungsergebnisse anzeigen und Probleme mit der Barrierefreiheit erkennen können, lesen Sie den Artikel Validierungsergebnisse.
In dem Artikel Zugänglichkeitsprüfung von Websites – Fehler und Warnungen erfahren Sie, wie Sie in Java programmgesteuert Fehler- und Warninformationen bei der Prüfung der Zugänglichkeit einer Website sammeln können.

Verwenden Sie den kostenlosen Online- Farbkontraste Prüfer, um die Kontrastverhältnisse in Ihren Webdesigns zu überprüfen. Dieses Tool gibt Ihnen Rückmeldung darüber, ob Ihre Farbwahl den Zugänglichkeitsstandards entspricht.

Ergebnisse der Validierung Zugänglichkeit für Bildschirmleser