Calculadora de Relación de Contraste de Color

• Cálculo instantáneo de la relación de contraste: calcula la relación de contraste WCAG entre dos colores al instante mientras escribes. Nuestra calculadora se actualiza en tiempo real, sin pulsar ningún botón, para que puedas iterar tu paleta sin interrupciones.
• Calculadora de contraste de color online y segura: todos los cálculos de relación de contraste se realizan localmente en tu navegador. Tus valores de color nunca salen de tu dispositivo, garantizando un 100% de privacidad al usar nuestra calculadora online.
• Calculadora de relación de contraste de color, sin instalación: usa nuestra calculadora directamente en cualquier navegador, sin descargas, plugins ni software de diseño. Comprueba el cumplimiento WCAG desde cualquier dispositivo —escritorio, tablet o móvil— al instante.
• Comprobación completa de cumplimiento WCAG 2.1 AA y AAA: obtén resultados instantáneos de apto/no apto para los niveles WCAG 2.1 AA y AAA en texto normal, texto grande y componentes de interfaz. Incluye vista previa de texto en vivo para ver exactamente cómo queda tu combinación de colores.

• Cumplimiento de accesibilidad web: diseñadores y desarrolladores usan la calculadora de relación de contraste para asegurar que sus sitios cumplen los requisitos WCAG 2.1 AA antes del lanzamiento. Detectar los fallos de contraste a tiempo evita auditorías de accesibilidad costosas y problemas legales.
• Selección de colores de interfaz y marca: al crear un sistema de diseño o una paleta de marca, comprueba cada combinación primer plano/fondo para el cumplimiento WCAG. Usa la calculadora para encontrar el tono mínimo de un color de marca que supere el contraste AA sobre fondo blanco u oscuro.
• Diseño de botones y CTA: los botones de llamada a la acción deben cumplir la relación de contraste de 3:1 para componentes de interfaz de WCAG 2.1. Prueba el color del texto del botón frente al fondo del botón para confirmar el cumplimiento antes de publicarlo.
• Paletas de modo oscuro: el modo oscuro introduce nuevos retos de contraste: colores que pasan sobre fondos claros a menudo fallan sobre oscuros. Usa la calculadora para verificar cada par texto/fondo en temas claros y oscuros.
• Accesibilidad de formularios y campos: el texto de marcador, las etiquetas, el texto de ayuda y los mensajes de error necesitan contraste suficiente. Comprueba cada elemento de texto frente a su fondo para asegurar que los usuarios con baja visión puedan leer tus formularios sin dificultad.
• Visualización de datos y gráficos: las etiquetas de gráficos, el texto de leyenda y las anotaciones de puntos de datos deben ser legibles sobre los fondos del gráfico. Usa la calculadora para verificar que los colores de tu visualización de datos cumplen los estándares de accesibilidad.

La relación de contraste de color es una medida numérica de la diferencia de luminancia percibida entre dos colores, normalmente un color de primer plano (texto) y un color de fondo. Está definida por las Pautas de Accesibilidad para el Contenido Web (WCAG) y va de 1:1 (sin contraste, colores idénticos) a 21:1 (contraste máximo, negro puro sobre blanco puro). La relación de contraste se calcula con la luminancia relativa de cada color, que tiene en cuenta la forma no lineal en que el ojo humano percibe el brillo. Nuestra calculadora implementa la fórmula exacta de WCAG 2.1, así que obtienes el mismo resultado que con cualquier herramienta oficial de auditoría de accesibilidad.

1. 1. Introduce tus colores: escribe cualquier color en formato HEX (#rrggbb), RGB (rgb(r,g,b)) o HSL (hsl(h,s%,l%)) en los campos de primer plano y fondo, o haz clic en la muestra de color para abrir el selector nativo. La calculadora acepta HEX abreviado (#rgb) y variantes con alfa. Todo el procesamiento ocurre localmente en tu navegador: tus colores nunca salen de tu dispositivo.
2. 2. Cálculo instantáneo en tiempo real: la relación de contraste se actualiza al instante mientras escribes, sin pulsar ningún botón. La calculadora convierte cada color a su luminancia relativa con la fórmula de linealización sRGB de WCAG y calcula la relación como (L1 + 0,05) / (L2 + 0,05), donde L1 es la luminancia más clara y L2 la más oscura.
3. 3. Revisa el cumplimiento WCAG: el panel de resultados muestra el estado apto/no apto para WCAG 2.1 AA y AAA en tres contextos: texto normal, texto grande y componentes de interfaz. Una vista previa de texto en vivo te permite ver exactamente cómo queda la combinación en distintos tamaños de texto.

• AA - Texto normal (4,5:1): la relación de contraste mínima para el texto de cuerpo, etiquetas y cualquier texto menor de 18pt (o 14pt en negrita). Es el requisito estándar para el cumplimiento WCAG 2.1 Nivel AA, la base legal en la mayoría de jurisdicciones.
• AA - Texto grande (3:1): se considera texto grande el de 18pt (24px) o más, o 14pt (unos 18,67px) en negrita o más. El texto grande requiere una relación de contraste mínima inferior porque es más fácil de leer con menos contraste.
• AA - Componentes de interfaz (3:1): los objetos gráficos y componentes de interfaz como campos de formulario, botones, indicadores de foco e iconos deben tener una relación de contraste de 3:1 respecto a colores adyacentes según el Criterio de Éxito 1.4.11 de WCAG 2.1.
• AAA - Mejorado (7:1): el Nivel AAA de WCAG requiere una relación de 7:1 para texto normal y 4,5:1 para texto grande. Se recomienda el cumplimiento AAA para contenido crítico como documentos legales, información médica y servicios gubernamentales, pero no es obligatorio para el cumplimiento web general.

La fórmula de relación de contraste WCAG se aplica solo a colores opacos: los colores semitransparentes deben evaluarse frente a su fondo realmente renderizado. La fórmula tampoco tiene en cuenta el renderizado de fuentes, el suavizado de bordes ni la calibración de pantallas, que pueden afectar al contraste percibido en la práctica. Además, los requisitos de contraste WCAG no se aplican al texto decorativo, al texto que forma parte de un logotipo ni al texto de componentes de interfaz inactivos. Prueba siempre tus diseños con usuarios reales y tecnologías de asistencia además de la comprobación automatizada de contraste.