Comprobador de contraste de color
Comprueba cualquier combinación de colores según las normas WCAG 2.1. Descubre cómo perciben tus colores las personas con deficiencia en la visión del color, al instante, gratis y desde tu navegador.
Visión del color normal
Cómo se ve esta combinación con deficiencia en la visión del color
protanopia
Ratio: 17.93:1 ✓ AA
deuteranopia
Ratio: 17.93:1 ✓ AA
tritanopia
Ratio: 17.93:1 ✓ AA
Entender el contraste de color y la accesibilidad
Normas de contraste WCAG
Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones de contraste mínimas para garantizar que el texto resulte legible para personas con baja visión o daltonismo:
- 4.5:1 WCAG AA — Texto normal (menos de 18 pt)
- 3.0:1 WCAG AA — Texto grande (18 pt o más, o 14 pt en negrita)
- 7.0:1 WCAG AAA — Texto normal (reforzado)
- 4.5:1 WCAG AAA — Texto grande (reforzado)
Por qué importa simular la DVC
Alrededor del 8 % de los hombres y el 0,5 % de las mujeres presentan alguna forma de deficiencia en la visión del color. Aunque tu combinación cumpla las relaciones de contraste WCAG para visión normal, puede fallar para personas con protanopia o deuteranopia, que perciben los rojos y los verdes de forma muy distinta. Comprueba siempre tus diseños con simulación de DVC.
La luminancia es el canal que siempre sobrevive
El color tiene dos componentes en los que un diseñador puede apoyarse: el tono y la claridad. Solo uno de ellos es fiable para todo el público.
La discriminación de tono varía enormemente. Aproximadamente uno de cada doce hombres tiene una deficiencia rojo-verde, y para él una diferencia de tono que a usted le resulta obvia puede no transmitir ninguna información. La discriminación de claridad es mucho más uniforme. Una persona con una deficiencia de la visión del color, una persona con agudeza reducida, una persona con la pantalla del móvil deslavada a pleno sol y una persona con visión completamente típica perciben todas una gran diferencia de claridad como una gran diferencia.
Por eso la relación de contraste es la métrica de accesibilidad que soporta la carga. Mide la relación de claridad entre dos colores ignorando por completo el tono, que es exactamente lo que interesa, porque le dice qué queda cuando el canal del tono no es fiable.
La relación va de 1:1, donde dos colores tienen la misma luminancia relativa y el límite entre ellos es invisible para todo el mundo, hasta 21:1 para negro puro sobre blanco puro. El cálculo está definido con precisión en las WCAG: convertir cada canal sRGB a luz lineal, ponderar los canales según su contribución a la luminancia percibida y comparar el resultado más claro con el más oscuro.
Los umbrales y lo que hay detrás de ellos
4,5:1 — texto normal (WCAG AA). La base para el cuerpo de texto. La cifra procede de la pérdida de sensibilidad al contraste asociada a una agudeza de aproximadamente 20/40, frecuente en adultos mayores y corregible pero a menudo sin corregir.
3:1 — texto grande (WCAG AA). Se aplica desde 18 pt normal o 14 pt en negrita. Los caracteres mayores tienen trazos más gruesos y siguen siendo legibles con menos contraste.
3:1 — contraste no textual (WCAG AA). Cubre los componentes de interfaz y los gráficos significativos: bordes de campos, estados de conmutadores, indicadores de foco, iconos que transmiten información y las partes esenciales de un gráfico. Es el criterio que más se incumple, y suele ser donde una interfaz visualmente elegante y de bajo contraste falla una auditoría.
7:1 y 4,5:1 — texto normal y grande (WCAG AAA). Un nivel más exigente, orientado a una agudeza de aproximadamente 20/80. Vale la pena adoptarlo para la lectura larga aunque no sea obligatorio.
El contraste es necesario, no suficiente
El error más común al trabajar en paletas accesibles es tomar una relación de contraste correcta como el final del trabajo. Hay que responder a dos preguntas independientes:
- ¿Es legible cada color sobre su fondo? Eso es contraste, y este comprobador lo responde.
- ¿Son distinguibles entre sí los colores que significan cosas distintas? Eso es separación de tono, y la relación de contraste no dice nada al respecto.
Un gráfico con una serie roja y otra verde puede pasar el contraste con holgura —ambas son oscuras sobre fondo blanco— y resultar completamente ilegible para un deuteranope, porque las dos series son indistinguibles entre sí. Pase esas paletas también por el simulador de visión del color.
Y siempre que el color transmita significado, añada una segunda señal. El criterio de uso del color de las WCAG lo exige, y la técnica G111 describe el procedimiento habitual: combinar el color con un patrón, una forma, una posición o una etiqueta explícita. En la práctica esto significa etiquetar directamente las series de un gráfico en lugar de usar una leyenda de colores, poner un icono junto a un mensaje de error rojo, subrayar los enlaces en línea y diferenciar por la forma los estados de éxito y de fallo.
Cómo trabajar con el comprobador
Introduzca un color de primer plano y uno de fondo y la herramienta indicará la relación y qué umbrales cumple. Unos cuantos hábitos la hacen más útil:
- Compruebe el par real. Las capas semitransparentes, los degradados y las imágenes de fondo hacen que el fondo efectivo no sea el color de su hoja de estilos. Muestree lo que realmente se pinta.
- Compruebe ambos temas. La luminancia no se invierte de forma limpia; una paleta oscura necesita su propia revisión.
- En un degradado, compruebe el peor caso, no el promedio.
- Incluya los estados deshabilitado y de marcador de posición. Se siguen leyendo.
- Compruebe los indicadores de foco sobre todas las superficies en las que aparecen. Un anillo de foco que cumple 3:1 sobre blanco puede desaparecer sobre una tarjeta.
Para el panorama completo, diseñar para el daltonismo cubre la construcción de paletas, y cómo hacer gráficos accesibles trata específicamente la visualización de datos.
¿Tienes preguntas?
Preguntas frecuentes
Todo lo que necesitas saber sobre las pruebas de daltonismo, cómo funcionan y qué hacer con tus resultados.
¿Qué significan realmente 4,5:1 y 3:1?
Son relaciones de contraste de luminancia entre un primer plano y un fondo, en una escala que va de 1:1 (idénticos) a 21:1 (negro sobre blanco). Las WCAG 2.2 piden al menos 4,5:1 para el texto normal y admiten 3:1 para el texto grande —desde 18 pt, o 14 pt en negrita— porque los caracteres mayores tienen trazos más gruesos y resisten un contraste menor. Los elementos no textuales que transmiten significado, como iconos, bordes de campos e indicadores de foco, también necesitan 3:1.
¿Por qué importa el contraste en el daltonismo concretamente?
Porque el contraste de luminancia es el canal que sobrevive cuando la discriminación de tono no lo hace. Si dos elementos se diferencian solo en el tono y apenas en la claridad, quien comprime esa diferencia de tono se queda sin nada. Un contraste de luminancia suficiente hace que la distinción siga siendo visible con independencia de cómo se procese el color. Es la propiedad de accesibilidad más robusta que puede dar a un par de colores.
Mis colores pasan 4,5:1 pero el diseño sigue fallando para una persona daltónica. ¿Cómo?
Pasar el contraste frente al fondo es necesario pero no suficiente. Una línea roja y una verde en un gráfico pueden tener cada una un contraste excelente sobre blanco y seguir siendo indistinguibles entre sí. El contraste se mide de primer plano a fondo; la distinguibilidad es una cuestión de primer plano frente a primer plano. Compruebe ambas cosas y dé a cada distinción codificada por color una señal no cromática.
¿Cambia la relación en modo oscuro?
La fórmula no, pero sus resultados sí. El contraste se calcula a partir de la luminancia relativa, así que invertir una paleta produce relaciones distintas, no simétricas. Un par que pasa sobre blanco puede fallar sobre casi negro, en especial los azules y morados saturados, cuya luminancia ya es baja de partida. Pruebe ambos temas.
¿Merece la pena aspirar al nivel AAA?
Es un nivel más exigente —7:1 para texto normal y 4,5:1 para texto grande— y resulta realmente más legible, sobre todo en baja visión y con mala iluminación. La mayoría de las organizaciones fijan AA como base de cumplimiento y tratan AAA como objetivo para el cuerpo de texto y la lectura larga. AAA rara vez es una exigencia legal.
¿Qué elementos están exentos?
Las WCAG eximen el contenido puramente decorativo, el texto que forma parte de un control inactivo, el texto de un logotipo y el texto que forma parte de una imagen con otro contenido visual significativo. Las exenciones son más estrechas de lo que se supone: el texto de marcador de posición, los controles que parecen deshabilitados pero están activos y el texto de ayuda de bajo contraste se dan por exentos con frecuencia y de forma incorrecta.
¿Aún tienes preguntas? Contáctanos →