§ CALCULADORA · ACCESIBILIDAD

Calculadora de contraste WCAG 2.2

Pega dos colores y obtén el ratio de contraste, el nivel WCAG que alcanza y una recomendación rápida. Todo el cálculo ocurre en tu navegador, no se envía nada.

Texto grande de muestra

Texto pequeño de muestra para evaluar legibilidad cómoda.

Ratio 21.0:1
  • AA texto grande (3:1)
  • AA texto normal (4.5:1)
  • AAA texto grande (4.5:1)
  • AAA texto normal (7:1)

Cómo funciona

Cada color se convierte de hex a RGB lineal aplicando la corrección gamma sRGB definida por el W3C. Luego se calcula la luminancia relativa con la fórmula L = 0.2126·R + 0.7152·G + 0.0722·B. El ratio final es (L_claro + 0.05) / (L_oscuro + 0.05). Un ratio de 1:1 significa colores idénticos; el máximo posible es 21:1 (blanco puro sobre negro puro).

Esta calculadora no estima el efecto del daltonismo ni de filtros visuales. Es una verificación matemática del criterio 1.4.3 de WCAG 2.2.

Preguntas frecuentes

¿Qué es WCAG y por qué importa el contraste?

WCAG 2.2 son las pautas de accesibilidad para contenido web publicadas por el W3C. El criterio 1.4.3 exige que el texto tenga un ratio de contraste mínimo de 4.5:1 contra su fondo (3:1 si es texto grande) para que personas con baja visión puedan leerlo sin esfuerzo.

¿AA o AAA, qué nivel apunto?

AA (4.5:1) es el estándar legal de facto en la mayoría de jurisdicciones, incluyendo el sector público chileno. AAA (7:1) es deseable para textos largos y contenido educativo. Si tu cliente no exige AAA, apunta a AA con holgura, no al límite exacto.

¿Qué tamaño cuenta como texto grande?

WCAG define texto grande como 18pt regular (24px) o 14pt bold (18.66px) en adelante. Bajo ese umbral aplica el ratio estricto de 4.5:1 para AA.

¿El ratio cubre el daltonismo?

Parcialmente. El ratio mide luminancia, así que un buen contraste suele leerse bien también en escala de grises. Pero confiar solo en color para transmitir información (rojo error, verde éxito) sigue fallando para personas con daltonismo, aunque pasen el ratio. Acompaña siempre el color con texto o icono.

¿Quieres construir paletas accesibles desde cero? Abrir aGo Palette

¿Necesitas un audit de accesibilidad serio para tu producto digital? aGo lab construye interfaces que cumplen WCAG 2.2 AA por defecto. Conversemos.

§ aGo lab estudio

¿Tu equipo necesita una calculadora similar integrada?

Si el cálculo que hace esta calculadora es parte de tu operación diaria, aGo lab puede integrarlo a tu sistema interno.

§ COMMAND

↑↓ navega · Enter abre · Esc cierra