# Verificador de contraste

> Verificador de contraste WCAG gratuito: introduce los colores del texto y del fondo para obtener el ratio de contraste y el aprobado o suspenso AA/AAA para texto normal y grande.

Introduce un color de texto y un color de fondo para obtener el ratio de contraste WCAG y el aprobado o suspenso AA/AAA al instante para texto normal y grande, con vista previa en vivo.

*Interactive tool: enter your values at https://toollantern.win/es/verificador-de-contraste/ and results update instantly in your browser.*

## Qué hace esta herramienta

El verificador calcula el ratio de contraste WCAG entre un color de texto y un color de fondo, y luego califica la pareja según los cuatro umbrales de WCAG 2.x: niveles AA y AAA, cada uno para texto normal y grande. Una vista previa en vivo muestra tus colores como texto real en ambos tamaños.

## La fórmula de luminancia

Primero se calcula la **luminancia relativa** de cada color: cada canal RGB se linealiza (los valores de 0,03928 o menos se dividen entre 12,92; los mayores usan ((v + 0,055) / 1,055) ^ 2,4) y luego se combinan como L = 0,2126 x R + 0,7152 x G + 0,0722 x B. Los coeficientes reflejan que el ojo humano es más sensible a la luz verde.

El **ratio de contraste** es (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia del color más claro. Va de 1:1 (colores idénticos) a 21:1 (negro sobre blanco).

## Ejemplo práctico

Un texto blanco **#FFFFFF** sobre fondo azul **#3B82F6** da un ratio de unos **3,7:1**. Eso aprueba AA para texto grande (pide 3:1) pero suspende AA para texto normal (pide 4,5:1): bien para un titular, no para el cuerpo del texto.

## Los cuatro umbrales

- **AA texto normal:** 4,5:1, la referencia legal que exigen muchas normativas.

- **AA texto grande:** 3:1. Grande significa al menos 18pt, o 14pt en negrita.

- **AAA texto normal:** 7:1, el nivel más estricto.

- **AAA texto grande:** 4,5:1.

## Limitaciones

El ratio solo mide el contraste de luminancia. No tiene en cuenta el renderizado de fuentes, los trazos finos, la transparencia sobre imágenes ni las diferencias de visión del color más allá de la luminancia.

## Preguntas frecuentes
### ¿Qué es un buen ratio de contraste?

Apunta al menos a 4,5:1 para texto normal (WCAG AA), la referencia de la mayoría de las leyes de accesibilidad. 7:1 alcanza el nivel AAA, más estricto. Para titulares grandes, 3:1 basta para AA.

### ¿Qué cuenta como texto grande en WCAG?

Texto de al menos 18pt (24px), o de al menos 14pt (unos 19px) en negrita. Todo lo menor usa los umbrales de texto normal.

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

AA es el nivel de conformidad estándar que exigen la mayoría de las normativas. AAA es más estricto y se recomienda cuando es posible, sobre todo para el cuerpo de texto que todos deben leer.

### ¿El verificador sirve para el modo oscuro?

Sí. Introduce el color de texto claro como color de texto y la superficie oscura como fondo. El cálculo no depende del orden: intercambiar los dos colores da el mismo ratio.

### ¿Por qué mi color de marca suspende sobre blanco?

Muchos colores de marca son demasiado claros para llegar a 4,5:1 sobre blanco. Usa el color para titulares grandes o acentos gráficos (ahí basta 3:1) y elige una variante más oscura para el cuerpo del texto.

---
Interactive version: https://toollantern.win/es/verificador-de-contraste/