Comprobador de Contraste de Colores

¿Qué es un comprobador de contraste de colores?

Un comprobador de contraste de colores es una herramienta de accesibilidad web que calcula el ratio de contraste entre el color del texto y el color de fondo, verificando si cumple con las pautas WCAG (Web Content Accessibility Guidelines) establecidas por el W3C. La accesibilidad del color es un aspecto crítico del diseño inclusivo: aproximadamente el 8% de los hombres y el 0.5% de las mujeres padecen alguna forma de daltonismo o deficiencia visual, y millones de personas más tienen dificultades de visión relacionadas con la edad, fatiga visual o condiciones ambientales (pantallas con brillo solar, por ejemplo). Las pautas WCAG definen cuatro niveles de conformidad: AA para texto normal (ratio mínimo 4.5:1), AA para texto grande (3:1), AAA para texto normal (7:1) y AAA para texto grande (4.5:1). Nuestra herramienta gratuita calcula el ratio utilizando la fórmula de luminancia relativa del WCAG 2.1, mostrando de forma clara si la combinación pasa o no cada criterio. Garantizar un contraste adecuado no solo es una cuestión legal, sino que mejora la experiencia de lectura para todos los usuarios y amplía tu audiencia potencial.

¿Cómo usar el comprobador de contraste?

Verificar la accesibilidad de tus colores es muy sencillo:

1. Selecciona el color del texto (foreground) usando el selector de color o introduciendo un código HEX. Este es el color que tendrá el texto del elemento que quieres verificar.

2. Selecciona el color de fondo (background) de la misma manera. Es el color sobre el que se mostrará el texto.

3. Consulta el ratio de contraste calculado automáticamente y los resultados de cada criterio WCAG. Un indicador verde "PASA" o rojo "NO PASA" te indica inmediatamente si tu combinación es accesible.

4. Revisa la vista previa del texto sobre el fondo elegido para verificar visualmente la legibilidad. Si el contraste es insuficiente, ajusta uno de los colores hasta alcanzar el nivel de conformidad deseado.

Por ejemplo, un desarrollador web puede verificar que los colores de los botones de su aplicación cumplen con WCAG AA antes de desplegar a producción. Un profesor puede comprobar que las diapositivas de su presentación son legibles para todos los alumnos, incluyendo aquellos con deficiencias visuales.

¿Para quién es útil esta herramienta?

Desarrolladores web: Verifica que todas las combinaciones de color de tu interfaz cumplen con los estándares WCAG antes de lanzar a producción, evitando problemas de accesibilidad en auditorías.

Diseñadores gráficos: Valida que las paletas de marca que propones a tus clientes son accesibles, demostrando profesionalidad y compromiso con el diseño inclusivo.

Pymes: Asegura que tu sitio web corporativo es legible para todos los visitantes, incluyendo personas mayores y personas con deficiencias visuales que podrían ser clientes potenciales.

Estudiantes y profesores: Aprende sobre accesibilidad web y las pautas WCAG de forma práctica, verificando la legibilidad de materiales educativos digitales y presentaciones.

Ecommerce: Garantiza que los textos de precios, botones de compra y descripciones de producto sean legibles por todos los compradores, maximizando las conversiones.

Autónomos y freelancers: Entrega proyectos web que cumplan con los estándares de accesibilidad, añadiendo valor diferencial a tus servicios frente a la competencia.

Abogados: Verifica que los documentos digitales y el sitio web de tu despacho cumplen con la normativa de accesibilidad web vigente en tu jurisdicción.

Médicos y profesionales de la salud: Asegura que la información médica en portales de salud y apps de pacientes sea legible para personas con cualquier condición visual.

Ingenieros: Valida que los paneles de control, dashboards de monitorización y señalización digital cumplan con los requisitos de legibilidad en diferentes condiciones de iluminación.

Investigadores: Comprueba que las gráficas, tablas y figuras de tus publicaciones científicas digitales son accesibles para todos los lectores.

Preguntas frecuentes

¿Qué ratio de contraste necesito para cumplir con WCAG?
Para nivel AA (el mínimo recomendado), necesitas un ratio de 4.5:1 para texto de tamaño normal (menos de 18px o menos de 14px en negrita) y 3:1 para texto grande (18px o más, o 14px en negrita). Para nivel AAA (el más estricto), los ratios suben a 7:1 para texto normal y 4.5:1 para texto grande. La mayoría de los sitios web profesionales apuntan al nivel AA como mínimo.

¿Es obligatorio cumplir con WCAG?
Depende de la jurisdicción. En la Unión Europea, la Directiva de Accesibilidad Web (European Accessibility Act) exige cumplimiento WCAG 2.1 nivel AA para sitios del sector público y, progresivamente, para el sector privado. En España, el Real Decreto 1112/2018 establece requisitos de accesibilidad. En Estados Unidos, la ADA se ha interpretado como aplicable a sitios web. En varios países de Latinoamérica existen normativas similares en desarrollo. Incluso sin obligación legal, cumplir con WCAG es una buena práctica que amplía tu audiencia.

¿Cómo se calcula el ratio de contraste?
El ratio se calcula usando la fórmula de luminancia relativa del WCAG: (L1 + 0.05) / (L2 + 0.05), donde L1 es la luminancia del color más claro y L2 la del más oscuro. La luminancia relativa se obtiene convirtiendo los valores RGB a un espacio lineal y aplicando los coeficientes de percepción del ojo humano (0.2126 para rojo, 0.7152 para verde, 0.0722 para azul). El ratio va de 1:1 (sin contraste) a 21:1 (máximo contraste, negro sobre blanco).

¿Qué hago si mis colores de marca no cumplen con WCAG?
Tienes varias opciones: oscurecer o aclarar ligeramente el color para mejorar el contraste, usar el color de marca solo para elementos decorativos y no para texto informativo, añadir un fondo más oscuro o claro detrás del texto, o aumentar el tamaño del texto (el texto grande requiere un ratio menor). Nuestra herramienta te permite experimentar hasta encontrar la combinación que cumpla los criterios sin sacrificar tu identidad visual.

¿WCAG solo aplica a texto o también a iconos y gráficos?
WCAG 2.1 nivel AA requiere un ratio de contraste de 3:1 para componentes de interfaz (bordes de campos de formulario, iconos informativos, estados de foco) y elementos gráficos que transmitan información. Esto se define en el criterio de éxito 1.4.11 "Non-text Contrast". Puedes usar nuestra herramienta para verificar estos contrastes también.

¿Qué es el texto grande en el contexto de WCAG?
WCAG define como "texto grande" aquel que tiene al menos 18 puntos (24px) de tamaño, o al menos 14 puntos (18.5px) si está en negrita. El texto grande requiere ratios de contraste menores que el texto normal porque su mayor tamaño facilita la lectura. Esto es relevante para encabezados, títulos y elementos de navegación prominentes.

¿Los datos que introduzco se envían a algún servidor?
No. Todo el cálculo de contraste se realiza localmente en tu navegador. Ningún código de color se transmite ni se almacena en servidores externos. Tu privacidad está completamente garantizada.