Que ley regula el contraste de color en sitios web espanoles?
En Espana, el Real Decreto 1112/2018 obliga a los organismos del sector publico a cumplir la norma UNE 301549:2022, que transpone el estandar europeo EN 301549 e incorpora los criterios WCAG 2.1 nivel AA. El Ministerio de Asuntos Economicos publica informes de seguimiento y el Observatorio de Accesibilidad Web (OAW) realiza auditorias periodicas.
El criterio de contraste exige 4,5:1 para texto normal y 3:1 para texto grande (18pt o 14pt en negrita). Desde junio de 2025, el European Accessibility Act (EAA) amplias estas obligaciones a empresas privadas que ofrezcan productos y servicios digitales en el mercado europeo.
Un dato relevante para Espana: el uso de movil supera el 70 % del trafico web. Las pantallas de movil en exteriores con luz solar reducen el contraste percibido, por lo que aplicar un margen sobre el minimo legal (por ejemplo, apuntar a 5,5:1 o mas) mejora la legibilidad real en condiciones de uso movil.
Que ratios de contraste necesito para la UNE 301549?
La norma distingue dos niveles:
- Nivel AA (minimo exigido para sector publico): 4,5:1 para texto normal, 3:1 para texto grande y componentes de interfaz
- Nivel AAA (objetivo recomendado): 7:1 para texto normal, 4,5:1 para texto grande
Un gris medio #767676 sobre blanco alcanza exactamente 4,5:1. Una sola tono mas claro y el criterio falla. Para sitios con uso intensivo en movil, usar un gris mas oscuro como #595959 (7:1) da margen suficiente incluso con pantallas bajo luz directa.
El verificador de contraste calcula el ratio entre dos colores, indica el nivel WCAG alcanzado y muestra una vista previa del texto sobre el fondo.
Como convierto colores entre HEX, RGB, HSL y OKLCH?
Cada formato tiene su lugar en un flujo de trabajo CSS moderno:
- HEX (
#1d70b8) es el estandar en archivos de diseno y devtools del navegador - RGB (
rgb(29, 112, 184)) es mas legible cuando se ajustan canales individuales con JavaScript - HSL (
hsl(210, 73%, 42%)) separa tono, saturacion y luminosidad, util para calcular escalas de tonos sin desviar el tono base - OKLCH es el espacio de color perceptual moderno de CSS Color Level 4; ya disponible de forma nativa en todos los navegadores
La conversion manual entre estos formatos requiere trigonometria. El convertidor de colores acepta los cuatro formatos y devuelve los otros de forma instantanea.
Como crear degradados CSS sin ensayo y error?
Un degradado lineal se escribe como background: linear-gradient(angulo, parada1, parada2, ...). Encontrar el angulo correcto y las posiciones de parada a mano requiere varios ciclos de edicion y recarga.
El generador de degradados CSS permite elegir colores, arrastrar paradas y ajustar el angulo visualmente. La salida es CSS listo para pegar, valido para degradados lineales y radiales, con prefijos de navegador donde todavia sean necesarios.
Para sitios con publica espanola o latinoamericana donde el movil domina el trafico, probar el degradado en pantalla de dispositivo movil antes de publicar. Los degradados de baja saturacion son mas seguros bajo luz solar que los muy saturados.
Como genero una paleta de colores para un sitio bilingue ES/CA o ES/EU?
Los sitios de la Generalitat de Catalunya o el Gobierno Vasco publican en castellano y en lengua cooficial. La paleta de colores debe funcionar para ambas versiones sin cambiar los tokens de diseno.
Pasos practicos:
- Definir una sola paleta de color neutral culturalmente (azul institucional, verde, etc.)
- Generar diez tonos con el generador de paletas a partir del color corporativo
- Verificar que el texto principal sobre el fondo mas claro supera 4,5:1 en ambas versiones de idioma
- No usar colores con connotaciones politicas regionales como color principal de la interfaz
Como extraigo colores de una imagen o logo existente?
Cuando el cliente entrega solo un PNG del logo sin archivos fuente, la extraccion de color es el punto de partida. El extractor de paleta carga la imagen y analiza los colores dominantes con la API Canvas del navegador, nada se sube a un servidor.
La salida incluye HEX, RGB y HSL para cada color detectado. A partir de ahi, verificar cada par texto/fondo con el verificador de contraste antes de incorporarlos al sistema de diseno.
Como selecciono un color exacto de una captura de pantalla?
Cuando solo se dispone de una captura de pantalla o maqueta en PNG, el selector de color de imagen es la herramienta adecuada. Carga la imagen y haz clic en cualquier pixel para obtener el valor en HEX, RGB y HSL.
Flujo recomendado: seleccionar color de texto, seleccionar color de fondo, verificar el par en el comprobador de contraste. Esto permite auditar implementaciones existentes sin necesidad de acceder al archivo de diseno original.