Support Centre

Comprobar la relación de contraste de color

Renée Meloche
Renée Meloche
  • Actualización

Disponible en los siguientes planes de suscripción de Venngage: Gratis, Premium, Negocios y Empresas.

La relación de contraste de color le indica si los usuarios con discapacidades visuales u otras discapacidades podrán ver e interpretar fácilmente los elementos de su diseño.

Haga clic en el menú de color en la barra de herramientas superior con el elemento seleccionado.

Una vista parcial de un lienzo en el Editor de Venngage (esquina superior izquierda).  Un usuario hace clic en el ícono verde oscuro de un libro, sobre una barra de encabezado azul marino en un lienzo de diseño.  Cuando se selecciona el icono, su menú de colores aparece en la barra de herramientas superior;  el usuario hace clic en el menú de colores y abre el panel de selección de colores.  En la parte inferior del panel, aparece el encabezado de la sección 'Relación de contraste', así como la etiqueta del elemento ('Gráficos') y un valor de relación de contraste de 1,8:1, que se identifica como que no cumple con los requisitos de accesibilidad 'AA' mediante una marca roja. icono 'x'.

En la parte inferior del panel del menú de color, una sección titulada "  Relación de contraste  " muestra la relación de contraste del elemento en comparación con su fondo.

Aparece una "x" roja junto a la etiqueta del elemento (p. ej., "Gráficos", "Texto normal", "Encabezado", etc.)  si la relación no cumple con los requisitos de accesibilidad  y una marca de verificación verde si los cumple.

Un usuario hace clic en el ícono de información (una 'i' en un círculo) junto al encabezado 'Relación de contraste' en la parte inferior del selector de color.  Aparece un cuadro de información negro.  El cuadro dice 'Para lograr los estándares de accesibilidad WCAG 2.1 AA, asegúrese de que sus diseños cumplan con los siguientes umbrales de contraste de color: Texto normal: 4:5:1;  Texto grande (al menos 19 px y negrita, o al menos 24 px y normal): 3:1;  Gráficos significativos: 3:1.'  Un enlace en la parte inferior dice "Más información sobre el contraste de color".

Haga clic en el icono de "información"  junto al encabezado Relación de contraste para obtener más detalles sobre qué relación de contraste cumple con los requisitos de WCAG.

Una vista parcial de un lienzo en el Editor de Venngage (esquina superior izquierda).  Se selecciona un elemento en el lienzo de diseño y se abre el menú del selector de color, que se superpone a la vista parcial del diseño.  Un usuario hace clic en el selector de color, que está configurado en verde oscuro (HEX 245561) y cambia el color a azul claro (HEX 3AB3D2).  En la parte inferior del panel, bajo el encabezado de la sección 'Relación de contraste', aparece la etiqueta del elemento 'Gráficos' y un valor de relación de contraste.  El valor de la relación de contraste del color verde oscuro se establece en '1,8:1', que se identifica como que no cumple con los requisitos de accesibilidad 'AA' mediante un ícono rojo 'x'.  Cuando el usuario cambia el color a azul claro, el valor de la relación de contraste cambia a 6,08:1 y la puntuación de accesibilidad 'AA' cambia para cumplir con los requisitos de accesibilidad.

Cambie el color del elemento  con el selector o ingresando el  valor del código HEX  . La relación de contraste en el panel de color se actualizará automáticamente, junto con el verificador de requisitos.

¿Qué significa el contraste de color ("AA", "AAA")?

El Verificador de Accesibilidad de Venngage califica el contraste de color de acuerdo con  los requisitos de WCAG  :

  • El nivel A  es el nivel mínimo.

  • El nivel AA  incluye todos los requisitos del nivel A y AA.

    • Este es el requisito que aplica Venngage para evaluar todos los elementos en un diseño accesible creado en el Editor actualizado.
    • Muchas organizaciones se esfuerzan por alcanzar el Nivel AA; esto se utiliza como base para el requisito legalmente definido de cumplir con los estándares de accesibilidad.

  • El nivel AAA  incluye todos los requisitos de nivel A, AA y AAA, y cumple con el nivel más alto de requisitos estándar.

 

VENNGAGE LOGO

¿Tienes curiosidad por suscribirte? Revisa nuestros planes.

 

¿Fue útil este artículo?

Usuarios a los que les pareció útil: 3 de 4

¿Tiene más preguntas? Enviar una solicitud