Stax

Verificador de Contraste de Color

Verifica las relaciones de contraste de color WCAG AA y AAA.

Contrast Ratio
21.00:1
LevelContextRequiredResult
WCAG AANormal text (< 18px, < 14px bold)4.5:1Pass ✓
WCAG AALarge text (≥ 18px or ≥ 14px bold)3:1Pass ✓
WCAG AAANormal text7:1Pass ✓
WCAG AAALarge text4.5:1Pass ✓

The quick brown fox jumps over the lazy dog.

Normal text (18px)

The quick brown fox jumps over the lazy dog.

Large text (24px)

The quick brown fox jumps over the lazy dog.

Bold large (18.67px bold)

PRESETS

¿Qué es el verificador de contraste de color?

Esta herramienta verifica la relación de contraste WCAG entre colores de texto y fondo. Verifica las relaciones requeridas para cumplimiento AA y AAA. Esencial para asegurar la accesibilidad web.

Cómo usar el verificador

  1. Selecciona color del texto.
  2. Selecciona color del fondo.
  3. Ve al instante la relación de contraste (1:1 a 21:1).
  4. Ve estado de aprobación AA / AAA.

Estándares de contraste WCAG

  • AA Texto Normal: 4.5:1 (estándar)
  • AA Texto Grande: 3:1
  • AAA Texto Normal: 7:1 (mejor práctica)
  • AAA Texto Grande: 4.5:1

Preguntas frecuentes

¿Qué es el contraste WCAG?
WCAG (Pautas de Accesibilidad del Contenido Web) define la relación mínima de contraste entre texto y fondo — para que usuarios con discapacidad visual también puedan leer. AA: 4.5:1 (texto normal), 3:1 (texto grande). AAA: 7:1 (normal), 4.5:1 (grande).
¿Cómo se calcula la relación de contraste?
Se calcula la luminancia relativa de ambos colores (0 = negro, 1 = blanco). Ratio = (L1 + 0.05) / (L2 + 0.05), donde L1 es el más claro y L2 el más oscuro. Rango de 1:1 (sin contraste) a 21:1 (negro + blanco).
¿Qué se considera texto grande?
En WCAG, texto grande = 18pt (~24px) o más con peso regular, o 14pt (~18.5px) o más en negrita. El texto grande necesita contraste 3:1 (normal 4.5:1). Titulares y botones son grandes, por eso menor contraste sigue siendo legible.
¿Por qué pasar el contraste es importante?
8% de hombres y 0.5% de mujeres son daltónicos. 285 millones de personas con discapacidad visual. Texto de bajo contraste no lo ven. Además, todos los usuarios tienen problemas con bajo contraste bajo el sol o pantallas pequeñas. SEO/Lighthouse también verifica contraste.

Herramientas relacionadas