Analyzing your prompt, please hold on...
An error occurred while retrieving the results. Please refresh the page and try again.
Comprobar el contraste de color – Accesibilidad del contraste de color
Contents
[
Hide
Show
]Si desea comprobar mediante programación si el sitio web cumple las directrices WCAG, Aspose.HTML for Java proporciona el paquete com.aspose.html.accessibility, que sirve para todas las manipulaciones y comprobaciones relacionadas con la accesibilidad web.
Este artículo tratará sobre el color y el contraste adecuado según WCAG, la autoridad mundial en accesibilidad web. Aprenderá a comprobar el contraste de colores utilizando Aspose.HTML for Java API y a hacer que su contenido web sea fácil de leer para todos los usuarios.
Contraste de color accesible
Garantizar un contraste de color suficiente en el contenido de su web es esencial para crear sitios web accesibles y fáciles de usar. Un contraste de color deficiente puede dificultar la lectura de los contenidos, especialmente para los usuarios con deficiencias visuales. Las Pautas de Accesibilidad al Contenido en la Web (WCAG) definen unas relaciones de contraste mínimas para garantizar que el texto sea legible para todos los usuarios. Los criterios de comprobación del contraste de colores figuran en la directriz 1.4 – Distinguishable.
Para el contraste de color, las WCAG definen dos niveles de criterios de éxito: AA (contraste mínimo) y AAA (contraste mejorado). Estos criterios comprueban la relación de contraste entre el texto y su fondo, que oscila entre 1:1 y 21:1.
- Para cumplir el Nivel AA de las WCAG 2.0, el texto debe tener una relación de contraste de al menos 4,5:1 para el texto normal y de 3:1 para el texto grande.
- Para el Nivel AAA, los requisitos son más estrictos: 7:1 para texto normal y 4,5:1 para texto grande o en negrita.
A continuación puede ver un ejemplo de contraste adecuado entre la fuente y el fondo y un ejemplo de contraste deficiente:
Text with good contrast
Text with bad contrast
Escribamos el código HTML de este ejemplo en el archivo check-color.html y comprobemos el contraste de color utilizando la API de 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>Comprobar el contraste de color – Ejemplos Java
Para los usuarios con discapacidad visual, es necesario poder percibir normalmente el contenido de la página. El contraste entre el texto y el fondo debe ser suficiente para su percepción. Para comprobar los criterios relacionados con la comprobación del contraste, encuentre el principio en el código y páselo al validador de accesibilidad. En el siguiente ejemplo, el validador se crea para dos criterios: 1.4.3 y 1.4.6 de la directriz 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}Este ejemplo muestra cómo realizar una comprobación de accesibilidad web de un documento HTML según varios criterios WCAG a la vez: en este caso, 1.4.3 (contraste de texto) y 1.4.6 (contraste mejorado). En primer lugar, se crea una lista de estos criterios, luego se ejecuta la validación con AccessibilityValidator y el resultado final se muestra como un informe de texto completo. Este método resulta práctico para evaluar rápidamente el cumplimiento de varias normas por parte de un documento sin necesidad de un análisis en profundidad.
Comprobación del contraste de color según un criterio de accesibilidad específico
El siguiente código Java realiza una comprobación más detallada de un único criterio (1.4.3). No se limita a validar el documento, sino que extrae errores específicos relacionados con elementos HTML y proporciona información sobre las reglas infringidas, el texto de error y las áreas problemáticas del código HTML. Este método es adecuado para depurar y localizar los lugares en los que se vulnera la accesibilidad.
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}- Utilice el constructor WebAccessibility() para crear una instancia de WebAccessibility para acceder a los principios y directrices definidos en WCAG.
- Especifique una directriz (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 Principle 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
criterioncontiene ahora el criterio específico “1.4.3”, y puedes utilizarlo cuando crees un validador para comprobar el contenido de tu web según este criterio concreto. - Llama al método
createValidator() para crear un objeto validador y pásale el
criterionyValidationBuilder.getAll()como parámetros.criterion– es el criterio de accesibilidad específico que representa la regla o requisito concreto que se desea validar.ValidationBuilder.getAll()– es el parámetro que significa que quieres comprobar todos los aspectos cubiertos por el criterio.
- Cargue un documento HTML utilizando uno de los constructores HTMLDocument().
- Utilice el método
validate(
document) para comprobar el contenido HTML según el criterio seleccionado. El resultado se almacena en la variablevalidationResult. - Compruebe si la validación se ha realizado correctamente. Si los resultados de la validación indican algún error, imprime la información de salida sobre el error, incluyendo el mensaje de error y la propia regla.
Cuando la validación falla, la salida puede tener este aspecto:
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>¿Qué medidas puede tomar para garantizar la accesibilidad del contraste de colores?
- Asegúrate de que el texto sobresale lo suficiente del fondo para que sea fácil de leer. Las Pautas de Accesibilidad al Contenido en la Web (WCAG) sugieren una relación de contraste mínima de 4,5:1 para el texto normal y de 3:1 para el texto de mayor tamaño (normalmente, negrita de 18 o 14 puntos). A medida que aumentan el tamaño de la fuente y la anchura del trazo, mejora la legibilidad incluso con un contraste menor. Por lo tanto, los requisitos de contraste para textos más grandes son menores.
- Evite las imágenes de texto y utilice texto real siempre que sea posible.
- Proporcione un texto alternativo descriptivo para las imágenes y los iconos con el fin de transmitir su importancia a los usuarios de lectores de pantalla, especialmente cuando se empleen variaciones de color.
- Elija combinaciones de colores que se adapten a los usuarios con distintos tipos de daltonismo.
- Asegúrese de que los marcadores de posición de los formularios también tengan un contraste de color aceptable.
- Utiliza herramientas online para comprobar el contraste y evaluar y confirmar los ratios de contraste en los diseños de tu 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
- Para obtener instrucciones sobre cómo comprobar la compatibilidad del contenido web con lectores de pantalla, consulte el artículo Accesibilidad de lectores de pantalla. Aprenderá a comprobar el texto alternativo y otros elementos clave.
- Si desea aprender a ver los resultados de la validación e identificar problemas de accesibilidad web, consulte el artículo Resultados de la validación.
- En el artículo
Comprobación de accesibilidad web – Errores y advertencias, aprenderá cómo recopilar programáticamente en Java información de errores y advertencias mientras se verifica la accesibilidad de un sitio web.
Utilice la herramienta gratuita en línea Comprobador de contraste de color para comprobar la relación de contraste de sus diseños web. Esta herramienta proporciona información sobre si los colores elegidos cumplen las normas de accesibilidad.
