Comprobar el contraste de color – Accesibilidad del contraste de color

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.

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// Prepare a path to a source HTML file
 2String documentPath = "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"
 8Guideline guideline = webAccessibility.getRules()
 9        .getPrinciple("1").getGuideline("1.4");
10
11// Get criterion by code, for example 1.4.3
12Criterion criterion143 = guideline.getCriterion("1.4.3");
13
14// Get criterion by code, for example 1.4.6
15Criterion criterion146 = guideline.getCriterion("1.4.6");
16
17// Create an accessibility validator, pass the found guideline
18// as parameters and specify the full validation settings
19List<IRule> rules = new List<>();
20rules.add(criterion143);
21rules.add(criterion146);
22
23AccessibilityValidator validator = webAccessibility.createValidator(
24        rules,
25        ValidationBuilder.getAll()
26);
27
28final HTMLDocument document = new HTMLDocument(documentPath);
29ValidationResult validationResult = validator.validate(document);
30if (!validationResult.getSuccess()) {
31    System.out.println(validationResult.saveToString());
32}

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// Prepare a path to a source HTML file
 2String documentPath = "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"
 8Guideline guideline = webAccessibility.getRules()
 9        .getPrinciple("1").getGuideline("1.4");
10
11// Get criterion by code, for example 1.4.3
12Criterion criterion = guideline.getCriterion("1.4.3");
13
14// Create an accessibility validator, pass the found guideline
15// as parameters and specify the full validation settings
16AccessibilityValidator validator = webAccessibility.createValidator(
17        criterion,
18        ValidationBuilder.getAll()
19);
20
21final HTMLDocument document = new HTMLDocument(documentPath);
22ValidationResult validationResult = validator.validate(document);
23if (!validationResult.getSuccess()) {
24    // Get all result details
25    for (RuleValidationResult ruleResult : validationResult.getDetails()) {
26        // If the result of the rule is unsuccessful
27        if (!ruleResult.getSuccess()) {
28            // Get errors list
29            for (ITechniqueResult result : ruleResult.getErrors()) {
30                // Check the type of the erroneous element, in this case
31                // we have an error in the html element rule
32                if (result.getError().getTarget().getTargetType() == TargetTypes.HTMLElement) {
33                    // Element of file with error
34                    HTMLElement rule = (HTMLElement) result.getError().getTarget().getItem();
35
36                    System.out.println(String.format("Error in rule %s : %s",
37                            result.getRule().getCode(), result.getError().getErrorMessage()));
38
39                    System.out.println(String.format("CSS Rule: %s",
40                            rule.getOuterHTML()));
41                }
42}}}}
  1. Utilice el constructor WebAccessibility() para crear una instancia de WebAccessibility para acceder a los principios y directrices definidos en WCAG.
  2. Especifique una directriz (Directriz 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.
  3. 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 contiene 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.
  4. Llama al método createValidator() para crear un objeto validador y pásale el criterion y ValidationBuilder.getAll() como parámetros.
    • Criterio" – 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.
  5. Cargue un documento HTML utilizando uno de los constructores HTMLDocument().
  6. Utilice el método validate(document) para comprobar el contenido HTML según el criterio seleccionado. El resultado se almacena en la variable validationResult.
  7. 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?

  1. 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.
  2. Evite las imágenes de texto y utilice texto real siempre que sea posible.
  3. 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.
  4. Elija combinaciones de colores que se adapten a los usuarios con distintos tipos de daltonismo.
  5. Asegúrese de que los marcadores de posición de los formularios también tengan un contraste de color aceptable.
  6. Utiliza herramientas online para comprobar el contraste y evaluar y confirmar los ratios de contraste en los diseños de tu web.

Referencias

Ver también

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.

Texto “Banner para la aplicación gratuita en línea – Comprobador de contraste de color”

Subscribe to Aspose Product Updates

Get monthly newsletters & offers directly delivered to your mailbox.