AbraCalc

Verificador de Contraste de Color

Verifica la relación de contraste WCAG entre dos colores hex y comprueba si el par cumple con los estándares de accesibilidad AA y AAA.

Insertar esta herramienta en tu sitio
Citar esta herramienta

APA

AbraCalc. (2026). Verificador de Contraste de Color [Online calculator]. Retrieved from https://abracalc.com/es/verificador-de-contraste-de-color/

BibTeX

@misc{abracalc-verificador-de-contraste-de-color, author = {AbraCalc}, title = {Verificador de Contraste de Color}, year = {2026}, howpublished = {\url{https://abracalc.com/es/verificador-de-contraste-de-color/}} }

¿Esta herramienta respondió tu pregunta?

Cómo usar esta herramienta

  1. Ingresa el color de primer plano (texto) y el color de fondo como códigos hex.
  2. La herramienta calcula la luminancia relativa WCAG de cada color.
  3. Lee la relación de contraste y los resultados de aprobado/reprobado para los umbrales AA y AAA.

Verifica si dos colores cumplen los requisitos de contraste WCAG 2.1. La relación mínima es 4.5:1 para texto normal (AA) y 7:1 para el estándar más alto AAA.

Fórmula

For each hex color, compute relative luminance L using the WCAG formula:
L = 0.2126 × lin(R) + 0.7152 × lin(G) + 0.0722 × lin(B)
where lin(c) = c/12.92 if c ≤ 0.03928, else lin(c) = ((c + 0.055)/1.055)2.4.

Contrast ratio: ratio = (Llighter + 0.05) / (Ldarker + 0.05)

WCAG thresholds: AA normal text ≥ 4.5:1; AA large text ≥ 3.0:1; AAA normal text ≥ 7.0:1; AAA large text ≥ 4.5:1.

Preguntas frecuentes

¿Qué es la relación de contraste WCAG?
WCAG (Pautas de Accesibilidad para el Contenido Web) define una fórmula de relación de contraste. Va de 1:1 (sin contraste) a 21:1 (negro sobre blanco). El texto normal del cuerpo requiere al menos 4.5:1 para cumplir con AA.
¿Qué se considera texto grande?
El texto grande es de 18pt (24px) o más, o 14pt en negrita (aproximadamente 19px en negrita). El texto grande solo necesita una relación de 3:1 para AA.

Referencias y fuentes