Generador de paletas de colores accesibles

Crea una paleta de colores y visualiza al instante qué combinaciones cumplen las relaciones de contraste WCAG 2.2 AA (4,5:1) y AAA (7:1). Cada par se comprueba automáticamente.

Tu paleta

Matriz de contraste

Haz clic en «Comprobar todos los pares» para generar la matriz de contraste.

Pares accesibles

Ejecuta la comprobación para ver los pares que pasan.

📚 Bases científicas y fuentes

Para quién está diseñada esta herramienta

Un contraste de color adecuado es esencial para las personas con visión baja, las personas con deficiencias en la visión del color (DVC) y las que presentan trastornos visuales relacionados con la edad. La OMS estima que al menos 2200 millones de personas en el mundo sufren una deficiencia visual de cerca o de lejos (OMS, 2019). Las investigaciones de Owsley (2011) muestran que la sensibilidad al contraste disminuye significativamente con la edad, lo que hace aún más importante un diseño de alto contraste para las personas mayores. La DVC afecta a unas 300 millones de personas en el mundo (Colour Blind Awareness). Diseñadores, desarrolladores y equipos de marca usan esta herramienta para garantizar que sus paletas de colores cumplan los requisitos mínimos de contraste WCAG y preserven la usabilidad para todas esas poblaciones.

Requisitos de contraste WCAG 2.2

  • CS 1.4.3 (contraste mínimo, nivel AA): el texto normal requiere una relación de contraste ≥ 4,5:1. El texto grande (18 pt+ o 14 pt+ en negrita) requiere ≥ 3:1.
  • CS 1.4.6 (contraste reforzado, nivel AAA): el texto normal requiere una relación de contraste ≥ 7:1. El texto grande requiere ≥ 4,5:1.
  • CS 1.4.11 (contraste no textual, nivel AA): los componentes de interfaz y los objetos gráficos requieren un contraste ≥ 3:1 con los colores adyacentes.

Referencias científicas

  • W3C (2023). «Web Content Accessibility Guidelines (WCAG) 2.2.» w3.org/TR/WCAG22 · Define los umbrales de relación de contraste (4,5:1, 7:1, 3:1) y el algoritmo de cálculo de luminancia relativa usado en esta herramienta.
  • Owsley, C. (2011). «Aging and vision.» Vision Research, 51(13), 1610–1622. · Documenta que la sensibilidad al contraste disminuye significativamente con la edad debido a cambios ópticos y neuronales, subrayando la importancia de un diseño de alto contraste para las poblaciones que envejecen.
  • Organización Mundial de la Salud (2019). Informe mundial sobre la visión. · Establece que al menos 2200 millones de personas en el mundo sufren una deficiencia visual, siendo la visión baja y la presbicia las formas más extendidas.
  • Legge, G.E. (2007). Psychophysics of Reading in Normal and Low Vision. Lawrence Erlbaum Associates. · Investigación fundacional sobre el impacto del contraste, el tamaño de fuente y el espaciado en el rendimiento de lectura de personas con visión baja.
  • Arditi, A. y Faye, E. (2004). «Monocular and binocular letter contrast sensitivity and letter acuity in a diverse ophthalmologic practice.» Optometry and Vision Science, 81(4), 287–292. · Demuestra la importancia clínica de la sensibilidad al contraste como indicador de la visión funcional.

Algoritmo

La luminancia relativa se calcula según la definición WCAG 2.2: los valores de canales sRGB se linealizan (eliminación de la corrección gamma) y luego se ponderan (0,2126 R + 0,7152 G + 0,0722 B) según la norma ITU-R BT.709. Relación de contraste = (Lmás claro + 0,05) / (Lmás oscuro + 0,05).

Aviso

Esta herramienta calcula las relaciones de contraste con el algoritmo especificado en WCAG 2.2. Alcanzar los umbrales matemáticos de contraste es una condición necesaria pero no suficiente para la legibilidad: factores como el grosor de la fuente, su tamaño, el suavizado y la calibración de la pantalla también afectan a la legibilidad. La conformidad con WCAG requiere una evaluación de todos los criterios de éxito, no solo del contraste. Esta herramienta no proporciona asesoramiento jurídico. Para auditorías de accesibilidad formales, consulta a un profesional cualificado.

Herramientas relacionadas

Comprobador de contraste Simulador de daltonismo Convertidor de colores Comprobador de títulos WCAG