Verificador de contraste – Relación de contraste WCAG

Comprobar el contraste de color para la accesibilidad

El contraste de color es fundamental para la legibilidad. Cuando el texto en primer plano no tiene suficiente contraste con el fondo, se vuelve difícil de leer — especialmente para personas con baja visión o deficiencias en la visión del color.

Este verificador de contraste calcula la relación de contraste entre dos colores cualesquiera y la evalúa según los criterios de conformidad de WCAG 2.1. Introduce colores en formato HEX, RGB o HSL y obtén resultados al instante.

Entender los niveles de contraste WCAG

Las Pautas de Accesibilidad para el Contenido Web (WCAG) definen relaciones de contraste mínimas para la legibilidad del texto. Existen dos niveles de conformidad:

• WCAG AA Texto normal — requiere una relación de contraste de al menos 4,5:1
• WCAG AA Texto grande — requiere una relación de contraste de al menos 3:1 (texto grande es 18pt+ o 14pt+ en negrita)
• WCAG AAA Texto normal — requiere una relación de contraste de al menos 7:1
• WCAG AAA Texto grande — requiere una relación de contraste de al menos 4,5:1

AA es el nivel estándar que la mayoría de sitios web y aplicaciones persiguen. AAA es el nivel mejorado, recomendado cuando la máxima legibilidad es importante.

Cómo usar el verificador de contraste

1. Introduce un color de primer plano (texto) — HEX, RGB o HSL
2. Introduce un color de fondo en cualquier formato compatible
3. Consulta la relación de contraste y una vista previa en vivo del texto sobre el fondo
4. Comprueba los resultados de aprobado/no aprobado para los niveles WCAG AA y AAA
5. Usa el botón de intercambio para invertir rápidamente los colores de primer plano y fondo

Cuándo comprobar el contraste de color

• Al elegir los colores de texto y fondo para un sitio web o aplicación
• Al verificar que un sistema de diseño cumple los requisitos de accesibilidad
• Al probar los colores de botones, enlaces o iconos contra sus fondos
• Al comprobar combinaciones de colores en modo oscuro
• Para cumplir con los estándares legales de accesibilidad (ADA, EAA, Section 508)

Preciso, instantáneo y gratuito

Esta herramienta calcula la relación de contraste WCAG 2.1 usando la fórmula estándar de luminancia relativa. Los resultados se calculan instantáneamente en tu navegador — no se envían datos a ningún servidor.

¿Necesitas encontrar o convertir un color primero? Usa el Selector de colores para extraer colores de una imagen, o el Convertidor de colores para cambiar entre HEX, RGB y HSL.

Preguntas frecuentes

¿Cuál es una buena relación de contraste para el texto?

Para texto de tamaño normal, se requiere una relación de contraste de al menos 4,5:1 para cumplir WCAG AA. Para texto grande (18pt o 14pt en negrita y superior), el mínimo es 3:1. Para el nivel más alto de accesibilidad (WCAG AAA), el texto normal necesita al menos 7:1.

¿Cuál es la diferencia entre WCAG AA y AAA?

AA es el nivel de conformidad estándar que la mayoría de sitios web y aplicaciones deberían cumplir. AAA es el nivel mejorado con requisitos de contraste más estrictos, recomendado para contenido donde la máxima legibilidad es crítica, como sitios gubernamentales o de salud.

¿Qué se considera texto grande en WCAG?

El texto grande se define como texto de 18 puntos (24px) o más en peso normal, o de 14 puntos (aproximadamente 18,66px) o más en negrita. El texto grande tiene requisitos de contraste más bajos porque su tamaño lo hace inherentemente más fácil de leer.

¿Qué formatos de color admite este verificador?

Puedes introducir colores en HEX (por ej. #1E293B), RGB (por ej. rgb(30, 41, 59)) o HSL (por ej. hsl(222, 33%, 17%)). La herramienta detecta automáticamente el formato.

¿Cómo se calcula la relación de contraste?

La relación de contraste se calcula usando la fórmula WCAG 2.1: (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia relativa del color más claro y L2 la del color más oscuro. El resultado va de 1:1 (sin contraste) a 21:1 (contraste máximo, negro sobre blanco).

¿Esta herramienta funciona en móvil?

Sí. El verificador de contraste funciona en cualquier dispositivo con un navegador moderno — ordenador, tablet o teléfono.

¿Es gratuita esta herramienta?

Sí. ColourPicker.app es completamente gratuito, sin necesidad de registro.

¿Puedo comprobar el contraste de componentes de interfaz, no solo de texto?

WCAG 2.1 también requiere una relación de contraste mínima de 3:1 para componentes de interfaz significativos y objetos gráficos (Criterio de conformidad 1.4.11). Puedes usar este verificador para comprobar esas combinaciones también — el cálculo de la relación es el mismo.