Farbkontrast prüfen in C#

Wenn Sie die Website programmatisch in C# auf die Einhaltung der WCAG-Richtlinien überprüfen wollen, bietet Aspose.HTML for .NET den Aspose.Html.Accessibility Namensraum, der für alle Manipulationen und Überprüfungen im Zusammenhang mit der Barrierefreiheit im Web vorgesehen ist. Finden Sie heraus, ob Ihre Website WCAG-konform 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 .NET API überprüfen und Ihre Webinhalte für alle Benutzer leicht lesbar machen können.

Zugänglicher Farbkontrast

In der Farbtheorie sind kontrastierende Farben Farben aus gegenüberliegenden Segmenten des Farbkreises. Farben, die sich auf dem Grundfarbenkreis direkt gegenüberliegen, bieten den größten Kontrast. Ein zugänglicher Farbkontrast ist wichtig, um sicherzustellen, dass Webinhalte für Menschen mit Seh- oder Farbsehschwächen lesbar und nutzbar sind. Die Grundsätze der Zugänglichkeit konzentrieren sich auf den Kontrast von Text- und Hintergrundfarben, um Inhalte lesbar und unterscheidbar zu machen. Die Wahl des richtigen Kontrasts und der richtigen Farbe ist entscheidend, um ein integratives und benutzerfreundliches Web-Erlebnis für alle zu schaffen.

Die Prüfkriterien für den Farbkontrast sind in der Leitlinie 1.4 – Distinguishable enthalten, dort gibt es solche Prüfkriterien:

1.4.1 Use of Color – Level А
1.4.3 Contrast (Minimum) – Level АА
1.4.6 Contrast (Enhanced) – Level ААA

Was den Farbkontrast betrifft, so legen die WCAG zwei Stufen von Kontrastverhältnissen fest, die von der Höhe der Erfolgskriterien abhängen: AA (Mindestkontrast) und AAA (erhöhter Kontrast). Das Kriterium prüft das Kontrastverhältnis zwischen Text und seinem Hintergrund. Das Kontrastverhältnis kann von 1 bis 21 reichen.

Die erfolgreiche Erfüllung der Bedingung für Level AA der WCAG 2.0 erfordert die visuelle Darstellung von Text mit einem Kontrastverhältnis von mindestens 4,5:1 für normalen Text und mindestens 3:1 für großformatigen Text.
Für das verbesserte Erfolgskriterium Level AAA betragen diese Koeffizienten 7:1 für normalen Text und 4,5:1 für großen Text bzw. fetten Text.

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

Good contrast

Bad contrast

Lassen Sie uns den HTML-Code für dieses Beispiel in die Datei “check-color.html” schreiben und den Farbkontrast mit Hilfe der Aspose.HTML for .NET API überprüfen.

 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>

Farbkontrast prüfen - C# 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 alle Kriterien zu überprüfen, die sich auf die Überprüfung des Kontrasts beziehen, müssen Sie den Grundsatz des Codes finden und ihn an den Accessibility Validator weitergeben:

 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

Prüfen Sie den Farbkontrast anhand spezifischer Kriterien für die Barrierefreiheit

Mit dem folgenden C#-Code wird eine Webseite anhand bestimmter Kriterien für die Barrierefreiheit überprüft, und Sie erhalten einen Bericht über Probleme im Zusammenhang mit diesen Regeln. Um ein bestimmtes Kriterium zu prüfen, geben Sie es als Parameter für den Accessibility Validator an:

Erstellen Sie eine Instanz der Klasse WebAccessibility.
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.All.
- 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.
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 prü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.

 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

Das Ergebnis der Dateiprüfung ist eine Liste von Ergebnissen, die einen Fehler vom Typ IError enthält. Das Programm gibt eine Ausgabe auf der Konsole aus:

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>

Was können Sie tun, um die Zugänglichkeit von Farbkontrasten zu gewährleisten?

Stellen Sie sicher, dass der Text einen ausreichenden Kontrast zum Hintergrund hat, um lesbar zu sein. Die Web Content Accessibility Guidelines (WCAG) empfehlen ein Mindestkontrastverhältnis von 4,5:1 für Standardtext und 3:1 für großen Text (typischerweise 18-Punkt oder 14-Punkt Fettdruck). Je größer die Schrift und je breiter der Schriftzug, desto besser ist die Lesbarkeit bei geringerem Kontrast. Folglich sind die Kontrastanforderungen für größere Schriftarten geringer.
Vermeiden Sie Textbilder und verwenden Sie, wo immer möglich, Text.
Stellen Sie beschreibenden Alternativtext für Bilder und Symbole bereit, um deren Bedeutung für Benutzer von Bildschirmlesegeräten zu vermitteln, wenn Farbunterscheidungen verwendet werden.
Wählen Sie Farbkombinationen, die für Benutzer mit verschiedenen Arten von Farbenblindheit geeignet sind. Verlassen Sie sich nicht ausschließlich auf Farbe, um Informationen zu vermitteln, sondern verwenden Sie Textbeschriftungen, Muster oder Symbole.
Machen Sie sich mit den verfügbaren Designmustern und bewährten Verfahren vertraut, wie z. B. der Verwendung kontrastreicher Farbschemata und der Sicherstellung, dass wichtige Inhalte nicht durch die Farbwahl verdeckt oder überlagert werden.
Achten Sie darauf, dass auch die Platzhalter des Formulars einen akzeptablen Farbkontrast aufweisen.
Nutzen Sie Online-Tools zur Kontrastprüfung, um die Kontrastverhältnisse in Ihren Web-Designs zu bewerten und zu überprüfen.

Referenzen

Siehe auch

Im Kapitel Zugänglichkeitsprüfung erfahren Sie, wie Sie die Zugänglichkeit einer Website auf die Einhaltung der WCAG überprüfen oder nur bestimmte Kriterien erfüllen können, indem Sie Klassen und Methoden der Namespaces Aspose.Html.Accessibility und Aspose.Html.Accessibility.Results verwenden.
In dem Artikel Verbesserung der Zugänglichkeit von Websites wird erläutert, wie Sie Ihre Website für Benutzer zugänglich machen und wie Sie Ihre Website mit Hilfe der Aspose.HTML API für .NET auf WCAG-Konformität prüfen können.
Besuchen Sie den Artikel über Multimedia-Zugänglichkeit, wenn Sie erfahren möchten, wie Sie Multimedia-Inhalte inklusiv und für ein breiteres Publikum, einschließlich Menschen mit Behinderungen, zugänglich machen können. Dieser Artikel enthält C#-Beispiele zur Überprüfung der besten Praktiken für die Zugänglichkeit von Multimedia-Inhalten gemäß den WCAG-Standards.
In dem Artikel Accessibility Validator lernen Sie die Klasse AccessibilityValidator kennen, die zum Testen von Zugänglichkeitsregeln wie Prinzipien, Richtlinien und Kriterien verwendet werden kann.
Der Artikel Fehler und Warnungen beschreibt die Klassen und Schnittstellen, mit deren Hilfe Informationen über Fehler und Warnungen während des Testens der Barrierefreiheit von Websites gesammelt werden können. Er konzentriert sich auf die Fehlerkriterien und Methoden, die Fehler melden, und bietet ein C#-Beispiel zum Abrufen von Fehlern bei der Barrierefreiheit nach dem Testen eines HTML-Dokuments.
Verwenden Sie den 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.

Screenreader-Barrierefreiheit Multimedia-Zugänglichkeit