Accesibilidad del contraste de color – comprobar el contraste de color en C#

Si desea verificar que el sitio web cumpla con las pautas WCAG mediante programación en C#, Aspose.HTML for .NET proporciona el espacio de nombres Aspose.Html.Accessibility, que es para todas las manipulaciones y comprobaciones relacionadas con la accesibilidad web. ¡Descubra si su sitio web cumple con las WCAG !

Este artículo analizará el color y el contraste adecuado según WCAG, la autoridad mundial en accesibilidad web. Aprenderá a comprobar el contraste de color utilizando Aspose.HTML for .NET API y a hacer que su contenido web sea fácil de leer para todos los usuarios.

Contraste de color accesible

En la teoría del color, los colores contrastantes son colores de segmentos opuestos de la rueda cromática. Los colores directamente opuestos entre sí en la rueda de colores básica proporcionan el máximo contraste. El contraste de color accesible es esencial para garantizar que el contenido web sea legible y utilizable por personas con discapacidad visual o de visión de los colores. Los principios de accesibilidad se centran en contrastar el texto y los colores de fondo para que el contenido sea legible y distinguible. Elegir el contraste y el color adecuados es vital para crear una experiencia web inclusiva y fácil de usar para todos.

Los criterios de prueba para el contraste de color están contenidos en la directriz 1.4 – Distinguishable, existen tales criterios de prueba:

1.4.1 Uso del color – Nivel А
1.4.3 Contraste (mínimo) – Nivel АА
1.4.6 Contraste (mejorado) – Nivel ААA

En cuanto al contraste de color, las WCAG determinan dos niveles de relaciones de contraste según el nivel de criterio de éxito: AA (contraste mínimo) y AAA (contraste mejorado). Criteria comprueba la relación de contraste entre el texto y su fondo. Las relaciones de contraste pueden variar de 1 a 21.

Cumplir con éxito con la condición de Nivel AA de WCAG 2.0 requiere la presentación visual del texto con una relación de contraste de al menos 4,5:1 para texto normal y al menos 3:1 para texto a gran escala.
Para el criterio de éxito mejorado nivel AAA, estos coeficientes son 7:1 para texto normal y 4,5:1 para texto grande o texto en negrita, respectivamente.

A continuación puedes ver un ejemplo de contraste adecuado entre fuente y fondo y un ejemplo de contraste deficiente:

Good contrast

Bad contrast

Escribamos el código HTML para este ejemplo en el archivo check-color.html y verifiquemos el contraste de color usando Aspose.HTML for .NET 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: #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>

Comprobar el contraste de color: ejemplos de C#

Para los usuarios con discapacidad visual, es necesario poder percibir el contenido de la página con normalidad. El contraste entre el texto y el fondo debería ser suficiente para su percepción. Para verificar todos los criterios relacionados con la verificación del contraste, busque el principio por código y páselo al validador de accesibilidad:

 1// Prepare a path to a source HTML file
 2string documentPath = Path.Combine(DataDir, "check-color.html");
 3
 4// Initialize a webAccessibility container
 5WebAccessibility webAccessibility = new WebAccessibility();
 6
 7// Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
 8var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
 9
10// Get criterion by code, for example 1.4.3
11var criterion143 = guideline.GetCriterion("1.4.3");
12
13// Get criterion by code, for example 1.4.6
14var criterion146 = guideline.GetCriterion("1.4.6");
15
16// Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
17var validator = webAccessibility.CreateValidator(new IRule[] { criterion143, criterion146 }, ValidationBuilder.All);
18
19using (var document = new HTMLDocument(documentPath))
20{
21    var validationResult = validator.Validate(document);
22    if (!validationResult.Success)
23    {
24
25        Console.WriteLine(validationResult.SaveToString());
26
27    }
28}

view raw Example-CheckColorContrast hosted with ❤ by GitHub

Verifique el contraste de color con criterios de accesibilidad específicos

El siguiente código C# está diseñado para validar una página web según criterios de accesibilidad específicos y recibirá un informe de los problemas relacionados con esas reglas. Para comprobar un criterio específico, especifíquelo como parámetro para el validador de accesibilidad:

Cree una instancia de la clase WebAccessibility.
Especificar una pauta (Guideline 1.4 ) para centrarse en un aspecto específico de la accesibilidad web. Llame al método GetPrinciple() de la clase AccessibilityRules y al método GetGuideline() de la clase Principio para obtener el principio requerido por código de WCAG.
Utilice el método GetCriterion() de la clase Guideline para obtener un criterio específico con el código “1.4.3” de una directriz previamente seleccionada. La variable criterion ahora contiene el criterio específico “1.4.3” y puede usarla al crear un validador para comparar su contenido web con este criterio en particular.
Llame al método CreateValidator() para crear un objeto validador y pásele el criterion y ValidationBuilder.All como parámetros.
- criterion: es el criterio de accesibilidad específico que representa la regla o requisito específico con el que desea validar.
- ValidationBuilder.All: es el parámetro que significa que desea verificar todos los aspectos cubiertos por el criterio.
Cargue un documento HTML usando uno de los constructores HTMLDocument().
Utilice el método Validate(document) para comparar el contenido HTML con el criterio seleccionado. El resultado se almacena en la variable validationResult.
Verifique si la validación fue exitosa. Si los resultados de la validación indican algún error, imprima la información de salida sobre el error, incluido el mensaje de error y la regla misma.

 1// Prepare a path to a source HTML file
 2string documentPath = Path.Combine(DataDir, "check-color.html");
 3
 4// Initialize a webAccessibility container
 5WebAccessibility webAccessibility = new WebAccessibility();
 6
 7// Get Principle "1.Perceivable" by code "1" and get guideline "1.4"
 8var guideline = webAccessibility.Rules.GetPrinciple("1").GetGuideline("1.4");
 9
10// Get criterion by code, for example 1.4.3
11var criterion = guideline.GetCriterion("1.4.3");
12
13// Create an accessibility validator, pass the found guideline as parameters and specify the full validation settings
14var validator = webAccessibility.CreateValidator(criterion, ValidationBuilder.All);
15
16using (var document = new HTMLDocument(documentPath))
17{
18    var validationResult = validator.Validate(document);
19    if (!validationResult.Success)
20    {
21        // Get all result details
22        foreach (var ruleResult in validationResult.Details)
23        {
24            // If the result of the rule is unsuccessful
25            if (!ruleResult.Success)
26            {
27                // Get errors list
28                foreach (var result in ruleResult.Errors)
29                {
30                    // Check the type of the erroneous element, in this case we have an error in the html element rule
31                    if (result.Error.Target.TargetType == TargetTypes.HTMLElement)
32                    {
33                        // Element of file with error
34                        var rule = (HTMLElement)result.Error.Target.Item;
35
36                        Console.WriteLine("Error in rule {0} : {1}", result.Rule.Code, result.Error.ErrorMessage);
37                        Console.WriteLine("CSS Rule: {0}", rule.OuterHTML);
38                    }
39                }
40            }
41        }
42    }
43}

view raw Example-CheckColorContrastAgainstAccessibilityCriteria hosted with ❤ by GitHub

El resultado de la verificación del archivo será una lista de resultados que contienen un error de tipo IError. El programa saldrá a la consola:

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>

¿Qué se puede hacer para garantizar la accesibilidad al contraste de color?

Asegúrese de que el texto tenga suficiente contraste con el fondo para que sea legible. Las Pautas de accesibilidad al contenido web (WCAG) recomiendan una relación de contraste mínima de 4,5:1 para texto estándar y 3:1 para texto grande (normalmente 18 puntos o 14 puntos en negrita). Cuanto más grande sea la fuente y más ancho el trazo, más legible será y con menos contraste. En consecuencia, los requisitos de contraste para fuentes más grandes son menores.
Evite imágenes de texto y utilice texto siempre que sea posible.
Proporcionar texto alternativo descriptivo para imágenes e íconos para transmitir su significado a los usuarios de lectores de pantalla cuando se utilizan distinciones de color.
Elija combinaciones de colores que se adapten a los usuarios con diferentes tipos de daltonismo. No confíe únicamente en el color para transmitir información; Utilice etiquetas de texto, patrones o iconos.
Familiarícese con los patrones de diseño disponibles y las mejores prácticas, como el uso de esquemas de color de alto contraste y garantizar que el contenido importante no quede oculto u oscurecido por las opciones de color.
Asegúrese de que los marcadores de posición del formulario también tengan un contraste de color aceptable.
Utilice herramientas de verificación de contraste en línea para evaluar y verificar las relaciones de contraste en sus diseños web.

Referencias

Utilice el Comprobador de contraste de color en línea para comprobar las relaciones de contraste en sus diseños web. Esta herramienta proporciona comentarios sobre si sus opciones de color cumplen con los estándares de accesibilidad.

Accesibilidad del lector de pantalla Accesibilidad multimedia