Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Accesibilidad del contraste de color – Comprobar el contraste de color en C#
Contents
[
Hide
Show
]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// 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}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
criterionahora 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
criterionyValidationBuilder.Allcomo 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 variablevalidationResult. - 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// 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}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
- G17: Ensuring that a contrast ratio of at least 7:1 exists between text (and images of text) and background behind the text
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the texts
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
- G183: Using a contrast ratio of 3:1 with surrounding text and providing additional visual cues on hover for links or controls where color alone is used to identify them
Ver también
- En el capítulo Comprobación de Accesibilidad Web, aprenderá a comprobar la accesibilidad de un sitio web para garantizar el cumplimiento de todas las directrices WCAG o solo para cumplir criterios específicos mediante clases y métodos de los espacios de nombres Aspose.Html.Accessibility y Aspose.Html.Accessibility.Results.
- Visita el artículo sobre Accesibilidad multimedia si te interesa aprender a crear contenido multimedia inclusivo y accesible para un público más amplio, incluidas las personas con discapacidad. Este artículo contiene ejemplos de C# para consultar las mejores prácticas de accesibilidad multimedia según los estándares WCAG.
- En el artículo Validador de Accesibilidad, aprenderá sobre la clase AccessibilityValidator, que permite probar reglas de accesibilidad web, como principios, directrices y criterios.
- En el artículo Reglas de Accesibilidad Web, aprenderá a usar la clase AccessibilityRules, un repositorio de requisitos, criterios de éxito y técnicas WCAG 2 para las comprobaciones de accesibilidad web.
- El artículo Errores y Advertencias analiza las clases e interfaces que ayudan a recopilar información sobre errores y advertencias durante las pruebas de accesibilidad web. Se centra en los criterios de fallo y los métodos que informan sobre errores, y proporciona un ejemplo en C# para recuperar errores de accesibilidad web tras probar un documento HTML.
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.
