# Comprobador de contraste de colores

https://rankproof.eu/es/tools/compliance-color-contrast

## Respuesta breve

Comprueba las proporciones de contraste de color texto-fondo frente a los estándares WCAG AA/AAA.

## Qué hace

Calcula la relación de contraste WCAG entre cualquier color de primer plano y de fondo que introduzcas, usando la misma fórmula de luminancia relativa de la especificación WCAG, y la compara con los umbrales AA y AAA para texto normal y texto grande (4,5:1 / 3:1 para AA, 7:1 / 4,5:1 para AAA). Muestra una vista previa de texto en directo con tus colores junto a una insignia de superado o fallido para cada umbral.

## Cómo funciona

1. Introduce o elige un color de primer plano (texto) y un color de fondo
2. Calculamos la relación de contraste de luminancia relativa WCAG entre ambos colores
3. Comparamos la relación con los umbrales AA y AAA para texto normal y texto grande
4. Ves una vista previa en directo de tu texto sobre tu fondo junto a una insignia de superado o fallido para cada umbral

## Ejemplo de entrada y salida

ENTRADA

```text
foreground: #767676
background: #ffffff
```

SALIDA

```text
contrast ratio: 4.54:1

texto normal AA (4.5:1)     PASS
texto grande AA (3:1)       PASS
texto normal AAA (7:1)      FAIL
texto grande AAA (4.5:1)    PASS
```

## Por qué importa

El texto con poco contraste es el fallo de accesibilidad detectado automáticamente más común en las páginas de inicio según el informe anual Million de WebAIM, y es uno de los más fáciles de corregir con un cambio de color. El criterio de éxito 1.4.3 de WCAG 2.1 fija las relaciones mínimas, y la norma EN 301 549 — la norma en la que se basa la Ley Europea de Accesibilidad — las aplica al contenido web.

## Quién lo usa

- **Diseñador**: Valida la paleta de colores de marca frente a WCAG antes de fijarla. Muchos pasteles "modernos" fallan el 4,5:1 sobre blanco — mejor descubrirlo antes de aplicarlo a toda la marca.
- **Auditor de accesibilidad**: Comprueba cada combinación de color de texto y fondo frente a los umbrales AA y AAA antes de aprobar la declaración del Anexo V de la EAA de un cliente.
- **Desarrollador frontend**: Detecta regresiones de contraste introducidas por cambios de tema en variables CSS antes de que lleguen a producción.

## Preguntas frecuentes

### ¿Qué relación WCAG necesito?

4,5:1 para texto normal, 3:1 para texto grande (≥18pt o ≥14pt en negrita) y componentes de interfaz. WCAG 2.1 AAA exige 7:1 — un listón más alto que la mayoría de las marcas no se marca como objetivo.

### ¿Esto comprueba imágenes e iconos?

Solo contraste de texto, y solo para los dos colores que introduces aquí. El contraste en imágenes (por ejemplo, texto sobre imagen en banners principales) necesita revisión manual — no hay un escaneo automático de la página.

### ¿Qué contraste exige la EAA?

Para el contenido web, la norma EN 301 549 v3.2.1 aplica el nivel AA de WCAG 2.1, incluido el 1.4.3 — así que el texto necesita al menos 4,5:1 frente a su fondo (3:1 para texto grande). Comprueba cada combinación que use tu sitio.

## Herramientas relacionadas en Cumplimiento EAA

- [Comprobador de accesibilidad](https://rankproof.eu/es/tools/compliance-wcag-scanner)
- [Generador de declaración de accesibilidad](https://rankproof.eu/es/tools/compliance-accessibility-statement-generator)