Contraste del color

El contraste del color entre el fondo y el contenido del primer plano (que suele ser texto) debe ser lo suficientemente alto como para garantizar la legibilidad.

Al dise帽ar interfaces legibles para diferentes capacidades de visi贸n, las directrices de la WCAG recomiendan las siguientes relaciones de contraste:

Tipo de contenido Relaci贸n m铆nima (nivel AA) Relaci贸n mejorada (nivel AAA)
Cuerpo de texto 4.5 : 1 7 : 1
Texto a gran escala (120-150% mayor que el cuerpo de texto) 3 : 1 4.5 : 1
Componentes activos de la interfaz de usuario y objetos gr谩ficos como iconos y gr谩ficos 3 : 1 No definido

Estas proporciones no se aplican al texto "incidental", como controles inactivos, logotipos o texto puramente decorativo.

Consulta la secci贸n Soluci贸n a continuaci贸n para obtener m谩s informaci贸n.

Tener un buen contraste de color en tu sitio web beneficia a todos tus usuarios, pero es particularmente beneficioso para los que tienen cierto tipo de ceguera al color y otras afecciones similares, como los que experimentan una baja sensibilidad al contraste y tienen dificultades para diferenciar colores parecidos. Esto se debe a que no distinguen las 谩reas brillantes y oscuras con tanta facilidad como las personas que no tienen esa discapacidad, y por lo tanto tienen problemas para ver los bordes y otros detalles.  

Es bueno tener un dise帽o atractivo en tu sitio web, pero el dise帽o es in煤til si tus usuarios no pueden leer el contenido.

Ejemplos

Veamos algunos ejemplos simples con c贸digo HTML y CSS:

<div class="good">Buen contraste</div>
<div class="bad">Mal contraste</div>
div {
  /* General div styles here */
}

.good {
  background-color: #fae6fa;
}

.bad {
  background-color: #400064;
}

Ambos fragmentos de texto tienen color negro por defecto. El <div> "good" tiene un color de fondo p煤rpura claro, lo que hace que el texto sea f谩cil de leer:

El <div> "bad", por otro lado, tiene un color de fondo p煤rpura muy oscuro, lo que hace que el texto sea mucho m谩s dif铆cil de leer:

Soluci贸n

Al elegir un esquema de color para tu sitio web, selecciona colores de primer plano y de fondo que tengan un buen contraste. Haz que el contraste de color sea lo mejor posible dentro de las limitaciones de tu dise帽o 鈥 preferiblemente elige el nivel AAA (ver 1.4.6 m谩s abajo), pero al menos cumple con el nivel AA (ver 1.4.3 m谩s abajo).

Si incluyes contenido no textual, como v铆deo o animaci贸n, debes seguir 1.4.11 (nuevamente, ver m谩s abajo).

Para verificar el contraste a medida que seleccionas los colores puedes utlizar una herramienta como Color Contrast Checker de WebAIM.

Tambi茅n puedes comprobar el contraste de color sobre la marcha utilizando las herramientas para desarrolladores de Firefox鈥 ver nuestra gu铆a Accessibility inspector, y en particular la secci贸n Check for accessibility issues. Prueba a usarlo en los ejemplos en vivo en la secci贸n de descripci贸n.

Criterios de conformidad relacionados con WCAG

1.4.3 Contraste m铆nimo (AA)
El contraste de color entre el fondo y el contenido del primer plano debe tener un nivel m铆nimo para garantizar la legibilidad:
  • El texto y el fondo deben tener una relaci贸n de contraste de al menos 4.5:1.
  • Los encabezados (o simplemente el texto m谩s grande) deben tener una relaci贸n de contraste de al menos 3:1. El texto m谩s grande se define como de al menos 18pt, o 14pt en negrita.
1.4.6 Contraste mejorado (AAA)
Esto sigue y se basa en el criterio 1.4.3.
  • El texto y el fondo deben tener una relaci贸n de contraste de al menos 7:1.
  • Los encabezados (o simplemente el texto m谩s grande) deben tener una relaci贸n de contraste de al menos 4.5:1.
1.4.11 Contraste no textual (AA) (a帽adido en 2.1)
Debe haber una relaci贸n m铆nima de contraste de color de 3 a 1 para los componentes de la interfaz de usuario y los objetos gr谩ficos.

Ver tambi茅n