Verificador de Contraste de Color (WCAG)

Para texto normal, 4.5:1 para el nivel AA y 7:1 para AAA. Para texto grande (desde unos 24 px, o 19 px en negrita), 3:1 para AA y 4.5:1 para AAA. Los elementos de interfaz, como bordes de botones o iconos, necesitan al menos 3:1.

Con la fórmula de luminancia relativa del W3C: cada canal de color se linealiza y se pondera (21.26 % rojo, 71.52 % verde, 7.22 % azul), y el ratio es (luminancia del color claro + 0.05) ÷ (luminancia del oscuro + 0.05). Va de 1:1, sin contraste, a 21:1, negro sobre blanco.

Porque en un monitor nuevo y con buen brillo casi todo se ve legible, pero muchas personas leen con poca luz, con pantallas peores o con baja visión. El ratio mide algo objetivo, no lo que a ti te parece cómodo.

Códigos HEX de seis dígitos, como #1877F2, o el selector visual. No admite colores con transparencia ni formatos como rgb() o hsl(): conviértelos antes a HEX.

No. Es un requisito importante, pero la accesibilidad incluye también no depender solo del color para dar información, navegación con teclado, textos alternativos y mucho más. El contraste es un buen primer paso, no el único.

Prueba a oscurecerlo o aclararlo ligeramente para el texto, y deja el tono original para fondos, botones grandes o elementos decorativos. Con el generador de paleta accesible puedes ver con qué colores de texto combina tu color.