Centro de Conocimiento y Guía
Calculadora de Contraste de Color WCAG 2.1 y Accesibilidad Web
Calculadora de Contraste de Color WCAG 2.1 y Accesibilidad Web
Esta herramienta funciona 100% del lado del cliente en su navegador. Su código, tokens, claves API y datos confidenciales nunca se envían a servidores externos, garantizando privacidad absoluta.
Fórmula y Método de Cálculo
Relación de contraste = (L1 + 0.05) / (L2 + 0.05)
Donde L1 es la luminancia relativa del color más claro y L2 es la luminancia del color más oscuro. La relación resultante varía desde 1:1 (sin contraste, blanco sobre blanco) hasta 21:1 (contraste máximo, negro sobre blanco).
Mejores Prácticas y Consejos
- Aim for AA Compliance (4.5:1): The Web Content Accessibility Guidelines (WCAG) Level AA requires a minimum ratio of 4.5:1 for standard body text, and 3:1 for large text (usually 18pt or 14pt bold).
- Don't Rely Solely on Color for Meaning: Colorblind users cannot distinguish certain hues (like red error states versus green success states). Always pair color changes with iconography, underlines, or structural changes.
- Account for Dark Mode Reversals: A high contrast palette in Light Mode often fails catastrophically when mathematically inverted for Dark Mode. You must manually check the contrast ratios for both distinct themes.
Preguntas Frecuentes
¿Qué es el Nivel AAA de WCAG?
El nivel AAA es el estándar de accesibilidad más estricto y exige una relación de contraste de 7:1 para el texto normal. Por lo general, solo se exige para software gubernamental o médico altamente especializado.
¿El contraste se aplica a elementos de la interfaz que no son texto?
Sí. WCAG 2.1 introdujo un requisito de relación de contraste mínimo de 3:1 para 'Componentes de la interfaz de usuario y objetos gráficos', lo que significa que los bordes de los campos de entrada y los fondos de los botones también deben contrastar con la página.
¿Por qué mis colores grises puros no superan la prueba de contraste?
Los grises medios puros (como #808080) sobre un fondo blanco puro suelen situarse en torno a una proporción de 3.9:1, lo que incumple estrictamente el requisito de 4.5:1 para el texto del cuerpo. Debe oscurecerlos.