Support Centre

Uso del contraste de color para la accesibilidad

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

El contraste y el color juegan un papel importante en si su diseño cumplirá con los estándares de accesibilidad.

Claro, desea elegir colores para su diseño que  se vean bien juntos  y  creen interés visual  , pero también desea asegurarse de que los lectores con impedimentos o discapacidades visuales puedan  ver y comprender su diseño  .

¿Cómo elijo los colores correctos?

Al elegir los colores para su diseño, debe asegurarse de que

  • se complementan

  • Cuente una  historia visual  que  conecte con sus datos

  • Use colores que  contrasten  lo suficiente para garantizar la accesibilidad

Hay  muchos recursos  para ayudarlo a comenzar a elegir colores para su diseño, incluidas  ruedas de colores  básicas como la que se muestra a continuación, así como otras que muestran colores monocromáticos, análogos, complementarios y contrastantes:

Un conjunto de tres ruedas de color.  El primero, etiquetado como 'Principal', muestra los colores rojo, azul y amarillo en sus respectivas posiciones en la rueda.  La segunda rueda, denominada 'Secundario', muestra los colores morado, naranja y verde.  La tercera rueda, 'Terciario', muestra los colores magenta, bermellón, ámbar, chartreuse, verde azulado y violeta.
 

¿Cómo creo diseños con contraste accesible?

El contraste está determinado por el brillo o la vitalidad de un color o elemento en comparación con otro elemento.

El texto negro sobre un fondo blanco es  de alto contraste  . Ese mismo texto sobre un fondo blanco es mucho más difícil de ver si es de un color más claro, como el amarillo, lo que hace que tenga  poco contraste  .

Dos muestras de texto sobre un fondo blanco;  cada uno dice 'Texto de ejemplo' en la misma fuente serif, tamaño y peso.  A la izquierda, el texto es negro y fácil de leer.  A la derecha, el texto es de color amarillo claro y difícil de ver contra el fondo blanco.

Los elementos de bajo contraste pueden ser difíciles de ver y el texto de bajo contraste puede ser difícil de leer. Una alta relación de contraste asegura que el texto sea legible y que los elementos que no son de texto sean perceptibles.

A los lectores con problemas de visibilidad les resultará especialmente difícil leer o ver elementos de bajo contraste, pero también afecta la legibilidad para los demás.

Consejos para crear contraste

  • Usa colores oscuros sobre un fondo claro o colores claros sobre un fondo oscuro

  • Use patrones sólidos en el fondo para hacer más visibles los elementos superpuestos.

  • Ejecuta  el Comprobador de accesibilidad de Venngage  para verificar las proporciones de contraste y ver sugerencias

¿Qué herramientas del Editor de Venngage pueden ayudarme a ajustar el contraste?

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

El Comprobador de accesibilidad  de Venngage es la forma más rápida de verificar las relaciones de contraste en tu diseño y ver cómo ajustarlas para que sean más claras.

Seleccione "Archivo" en el menú de navegación superior  (arriba de la barra de herramientas superior), luego seleccione "Comprobar accesibilidad" para abrir el panel de Accesibilidad.

Los elementos de su diseño que no cumplen con  los requisitos de contraste de las Pautas de accesibilidad al contenido web (WCAG)  se enumeran bajo el encabezado "Contraste de color".

La vista del panel derecho del Comprobador de accesibilidad de Venngage, con la sección "Contraste de color" abierta.  El texto en el diseño (no en la imagen) se resalta por tener un contraste de color insuficiente y un botón de actualización para volver a escanear el documento cuando el usuario ha editado los colores para ajustar el contraste.

Seleccione un elemento individual  en su diseño, como un ícono o cuadro de texto, para ver si cumple con los requisitos de contraste.

 

VENNGAGE LOGO

¿Tienes curiosidad por suscribirte? Revisa nuestros planes.

 

¡Empieza a diseñar!

¿Fue útil este artículo?

Usuarios a los que les pareció útil: 5 de 9

¿Tiene más preguntas? Enviar una solicitud