¿Odias los anuncios? Ir Sin publicidad Hoy 

Buscador de Pares de Colores Accesibles

DesarrolladorMatemáticas

ANUNCIO · ¿ELIMINAR?

APORTE

Proceso automático

PROD.

Lado cliente

ANUNCIO · ¿ELIMINAR?

Guía

Encontrador de pares de colores accesibles

Buscador de Pares de Colores Accesibles

Encuentra colores de fondo que cumplan con los estándares de accesibilidad WCAG para cualquier color de fondo. Ingresa un color de fondo y la herramienta busca en el espacio de color HSL para generar una paleta de colores de texto que alcancen el cumplimiento de contraste AA o AAA. Revisa cada combinación con texto de ejemplo, verifica combinaciones específicas y exporta pares accesibles como propiedades personalizadas de CSS.

Cómo Usar

Elige o ingresa un color de fondo usando el selector de colores o la entrada hexadecimal. La herramienta escanea inmediatamente el espacio de color y muestra una cuadrícula de colores de fondo sugeridos que cumplen con el nivel WCAG seleccionado. Haz clic en cualquier muestra para verlo como texto sobre tu fondo. Para verificar una combinación específica, ingresa ambos colores de fondo y fondo y observa las etiquetas de paso/fracaso para los niveles AA Normal, AA Grande y AAA. Exporta tus pares elegidos como propiedades personalizadas de CSS para su uso directo en tus hojas de estilo.

Características

Cálculo de contraste WCAG – Cálculo preciso de luminancia relativa y relación de contraste según la especificación WCAG 2.1
Búsqueda en cuadrícula HSL – Busca sistemáticamente el tono, saturación y luminancia para encontrar todos los colores de fondo que cumplen
Vista en tiempo real de texto – Ve el texto normal y grande renderizado sobre tu fondo seleccionado con cada color sugerido
Cumplimiento AA y AAA – Alternar entre los umbrales de contraste AA Normal (4.5:1), AA Grande (3:1) y AAA (7:1)
Verificador de pares específicos – Ingresa cualquier par de colores para obtener resultados inmediatos de paso/fracaso para todos los niveles WCAG
Muestra de colores por tono – Sugerencias organizadas por familia de tono para una navegación fácil
Mostrar fórmula de luminancia – Muestra el cálculo de luminancia relativa WCAG y los valores para transparencia
Exportación de CSS – Copia pares accesibles como propiedades personalizadas de CSS listas para usar en tus hojas de estilo

ANUNCIO · ¿ELIMINAR?

 Preguntas frecuentes

¿Qué es la relación de contraste WCAG y por qué es importante?

WCAG (Guías de accesibilidad del contenido web) define relaciones mínimas de contraste entre colores de texto y fondo para garantizar la legibilidad para personas con discapacidades visuales. La relación de contraste va desde 1:1 (sin contraste) hasta 21:1 (máximo, negro sobre blanco). El nivel AA requiere 4.5:1 para texto normal y 3:1 para texto grande. El nivel AAA requiere 7:1 para texto normal. Cumplir con estos estándares asegura que tu sitio web sea accesible para aproximadamente 1 de cada 12 hombres y 1 de cada 200 mujeres con deficiencia de visión de color, así como para personas con baja visión.
¿Cuál es la diferencia entre el cumplimiento AA y AAA?

AA es el nivel mínimo recomendado de accesibilidad y requiere una relación de contraste de 4.5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita o más). AAA es el nivel más alto, requiriendo 7:1 para texto normal y 4.5:1 para texto grande. La mayoría de las organizaciones buscan cumplimiento AA ya que ofrece buena accesibilidad mientras permite una flexibilidad razonable en el diseño. AAA es ideal para contenidos críticos como el texto principal en sitios gubernamentales o de salud. El texto grande tiene requisitos más bajos porque los caracteres más grandes son inherentemente más fáciles de leer.
¿Cómo se calcula la luminancia relativa?

La luminancia relativa mide la intensidad percibida de un color en una escala de 0 (negro) a 1 (blanco). La fórmula WCAG convierte primero los valores sRGB (0-255) a RGB lineal dividiéndolos por 255 y aplicando una corrección gamma. Para valores de 0.04045 o menos, divídelos por 12.92. Para valores superiores, suma 0.055, divide por 1.055 y eleva al exponente 2.4. La luminancia final es 0.2126 veces el rojo más 0.7152 veces el verde más 0.0722 veces el azul. Estos pesos reflejan cómo perciben los ojos humanos la intensidad, con el verde contribuyendo más.
¿Puedo usar esta herramienta para seleccionar colores de marca?

Sí. Ingresa el color de fondo de tu marca y la herramienta muestra todos los colores de texto que cumplen con los estándares de accesibilidad. Esto es especialmente útil durante el desarrollo o rediseño de marca cuando necesitas asegurarte de que tu paleta de colores funcione para el diseño web accesible. También puedes verificar pares de colores existentes para asegurarte de que cumplan con los requisitos WCAG. La función de exportación de CSS te permite copiar pares accesibles directamente en tus hojas de estilo, ahorrando tiempo de desarrollo y asegurando el cumplimiento desde el inicio.