Comprobador de contraste de color
Un preajuste de Selector y conversor de color
Comprueba si un color de texto es legible sobre su fondo contra los umbrales WCAG 2.1. El contraste es el fallo de accesibilidad más común en la web, y también es el más fácil de arreglar — normalmente oscureciendo un poco un color.
- Los archivos nunca salen de tu dispositivo
- Gratis, sin registro
- Sin marcas de agua
- Funciona sin conexión una vez cargado
Cómo selector y conversor de color
- 1
Elige un color
Usa la muestra, o escribe un valor HEX o RGB directamente.
- 2
Copia cualquier formato
HEX, RGB, HSL, HSV y CMYK se muestran todos a la vez.
- 3
Comprueba el contraste
Establece un fondo para ver si el texto pasa WCAG AA y AAA.
Por qué el contraste es el fallo de accesibilidad más común en la web
Las auditorías automatizadas de accesibilidad encuentran consistentemente el contraste de color insuficiente como la violación individual más frecuente en los sitios web escaneados, por delante de todas las demás categorías de problemas de accesibilidad combinadas — y a diferencia de muchos problemas de accesibilidad, que requieren cambios estructurales o de marcado semántico para arreglarse, un fallo de contraste normalmente se resuelve oscureciendo o aclarando ligeramente un color, sin necesidad de ningún cambio en la estructura, marcado o diseño de la página en absoluto. Esa combinación — extremadamente común, pero comparativamente barata de arreglar una vez identificada — es precisamente por lo que vale la pena usar un comprobador de contraste dedicado directamente en un emparejamiento de color específico antes de publicarlo, en lugar de confiar en una auditoría de accesibilidad completa para detectarlo después.
Los umbrales AA y AAA, y cuál aplica realmente
WCAG define dos niveles de conformidad con distintos umbrales numéricos, y cuál aplica depende tanto del nivel al que se ha comprometido un proyecto como del tamaño del texto específico que se está comprobando. El nivel AA — el nivel al que hacen referencia la mayoría de los requisitos legales de accesibilidad y las políticas organizacionales — requiere una relación de 4.5:1 para texto de tamaño normal pero se relaja a 3:1 para texto grande, definido como 18pt o 14pt en negrita y superior, ya que los glifos más grandes permanecen legibles con menor contraste que los pequeños. El nivel AAA, un estándar más estricto, eleva esos mismos umbrales a 7:1 y 4.5:1 respectivamente. La mayoría de los proyectos apuntan a AA como la línea base práctica; AAA se reserva para contenido específicamente dirigido a usuarios con discapacidad visual más significativa, donde el umbral más estricto vale la restricción de diseño adicional que impone.
Preguntas frecuentes
¿Cuál es la diferencia entre HEX, RGB y HSL?
HEX y RGB describen lo mismo en distinta notación — cuánto rojo, verde y azul mezclar. HSL lo reformula como matiz, saturación y luminosidad, que es mucho más fácil de razonar: para aclarar un color cambias un número en lugar de adivinar tres.
¿Qué significa la relación de contraste?
Compara la luminancia relativa de dos colores en una escala de 1 (idéntico) a 21 (negro sobre blanco). WCAG requiere al menos 4.5:1 para texto normal y 3:1 para texto grande en el nivel AA, subiendo a 7:1 y 4.5:1 en AAA.
¿Por qué mi color falla el contraste cuando a mí me parece bien?
Porque la relación se calcula a partir de la luminancia relativa, no de cuán diferentes parecen dos colores. Dos colores vívidos de brillo similar — naranja sobre rojo, digamos — se ven distintos pero llevan casi ningún contraste de luminancia, y se vuelven ilegibles para cualquiera con baja visión o en una pantalla bajo el sol.
¿La conversión a CMYK es precisa para impresión?
Es la conversión aritmética estándar, que es un punto de partida en lugar de un resultado con gestión de color. El trabajo de impresión real necesita un perfil ICC para la imprenta y el papel específicos, porque CMYK no puede reproducir en absoluto muchos colores RGB brillantes.
También podrías necesitar
Generador de códigos QR
Crea códigos QR para enlaces, texto, WiFi y más
Extractor de paleta de color
Extrae los colores dominantes de una imagen
Formateador de CSS
Embellece o minifica hojas de estilo
Generador de códigos de barras
Códigos de barras Code 128 como SVG escalable
Generador de facturas
Crea y descarga una factura profesional en PDF
Generador de contraseñas
Crea contraseñas y frases de contraseña aleatorias fuertes
Generador de currículums
Crea un currículum limpio y compatible con sistemas ATS, y descárgalo en PDF
Generador de UUID
Genera UUID v4 y v7 en masa