Paleta de Colores y Contraste WCAG

Muestrea colores dominantes desde tus fotografías y valida el ratio de contraste accesible para diseño web y digital según la norma WCAG 2.2.

Extracción de Paleta desde Imagen

Haz clic para seleccionar una imagen

O arrastra y suelta un archivo JPG, PNG o WebP aquí

Muestras rápidas:

Matriz de Accesibilidad de la Paleta

Color Sobre Blanco (#ffffff) Sobre Tinta (#1c1c1c)

Comprobador de Contraste WCAG 2.2

12.65:1
Excelente contraste para cualquier tamaño de texto
Encabezado en Bricolage Grotesque (24px)
Este bloque de texto demuestra la legibilidad en condiciones reales de navegación para evaluar la fatiga visual y cumplimiento de la norma WCAG 2.2.
  • WCAG AA Texto Normal
    Mínimo 4.5:1 para fuentes menores de 18pt
    Pasa
  • WCAG AA Texto Grande
    Mínimo 3.0:1 para fuentes mayores de 18pt o negrita 14pt
    Pasa
  • WCAG AAA Texto Normal
    Mínimo 7.0:1 para máxima legibilidad estricta
    Pasa
  • WCAG AAA Texto Grande
    Mínimo 4.5:1 para títulos y encabezados
    Pasa
  • Elementos de Interfaz y Gráficos
    Mínimo 3.0:1 para bordes de campos y controles activos
    Pasa

Cómo extraer paletas de color y validar contraste accesible según WCAG 2.2

El diseño accesible garantiza que cualquier persona, independientemente de sus capacidades visuales o las condiciones de iluminación de su entorno, pueda leer contenidos digitales con nitidez y sin esfuerzo. Neapp combina un extractor cromático local con la calculadora oficial de luminancia de la W3C.

Luminancia relativa y cálculo matemático del contraste

La percepción humana del brillo no es lineal ni uniforme en todos los colores del espectro lumínico: el ojo humano es notablemente más sensible al verde que al azul o al rojo. Por ello, la especificación WCAG 2.2 aplica coeficientes ponderados a cada canal RGB corregido mediante expansión gamma para determinar la luminancia relativa estandarizada.

Preguntas Frecuentes sobre la Paleta de Color y Contraste WCAG

¿Cómo extraer una paleta de colores a partir de una foto?

Sube o arrastra cualquier imagen (JPG, PNG, WebP) al analizador. Neapp procesa los píxeles en un Canvas local mediante un algoritmo de agrupamiento cromático, extrayendo los 6 tonos dominantes con sus códigos Hexadecimales, valores RGB y porcentajes de presencia para copiar en un clic.

¿Cómo se evalúa el ratio de contraste accesible WCAG 2.2?

En el comprobador de contraste introduces el color de texto (primer plano) y el color de fondo. El algoritmo calcula la luminancia relativa estandarizada (L) de ambos colores y aplica la fórmula oficial de la W3C: (L1 + 0.05) / (L2 + 0.05), determinando si la combinación cumple los niveles AA y AAA para texto normal y grande.

¿Cuáles son los ratios de contraste mínimos exigidos por la norma WCAG?

Para el nivel AA estándar se exige un ratio mínimo de 4.5:1 en texto normal (menor de 18pt) y de 3.0:1 para texto grande o elementos de interfaz gráfica. Para el nivel AAA estricto, el ratio debe ser de al menos 7.0:1 en texto normal y 4.5:1 en texto grande.

¿Puedo exportar los colores extraídos a variables CSS?

Sí. La herramienta dispone de un generador de tokens CSS que formatea la paleta completa como variables :root { --color-1: ... } listas para pegar en tu hoja de estilos o sistema de diseño.

¿Se suben mis fotografías a internet durante el análisis de color?

No. El análisis de mapa de bits ocurre íntegramente en el motor Canvas del navegador. Tu imagen nunca se envía a ningún servidor web ni servicio de almacenamiento externo.