Relación de Contraste

TL;DR: Para calcular la relación de contraste, divide la luminancia del color más claro (L1) entre la luminancia del color más oscuro (L2), usando la fórmula (L1 + 0.05) / (L2 + 0.05), y luego compara el número resultante (de 1:1 a 21:1) con los estándares WCAG para accesibilidad.

¿Qué es la Calculadora de Relación de Contraste?

Esta herramienta gratuita en línea calcula la relación de contraste entre dos valores de luminancia, que típicamente representan el color de primer plano (como texto) y el de fondo en una pantalla. La relación de contraste es una medida numérica que expresa la diferencia en brillo percibido entre dos colores. Es una métrica fundamental en diseño web, desarrollo de interfaces de usuario (UI) y accesibilidad digital, ya que determina directamente si el texto es legible para usuarios con baja visión, daltonismo o aquellos que ven pantallas en entornos brillantes.

La herramienta es esencial para desarrolladores web, diseñadores de UI/UX, especialistas en marketing digital y creadores de contenido que deben cumplir con las Pautas de Accesibilidad para el Contenido Web (WCAG). Estas pautas definen umbrales específicos de relación de contraste para texto normal, texto grande y elementos gráficos. Sin una calculadora, derivar manualmente una relación a partir de valores RGB o HEX es complejo y propenso a errores, porque la percepción humana de la luminancia no es lineal. Al enfocarse directamente en entradas de luminancia clara y luminancia oscura, esta calculadora simplifica el proceso en una división única y precisa.

El cálculo en sí se basa en el algoritmo publicado por el W3C para luminancia relativa y relación de contraste. Aplica una fórmula específica a los valores de luminancia (que deben estar entre 0 y 1, donde 0 es negro y 1 es blanco). El resultado final es una relación como 4.5:1 o 21:1. Este número no es solo una cifra teórica; es un punto de referencia legal y funcional. Cumplir con una relación de 4.5:1 para texto estándar es un requisito estricto para muchos sitios web gubernamentales y empresariales, lo que hace que esta calculadora sea una parte crucial del flujo de trabajo de desarrollo.

Cómo Usar la Calculadora

Usar esta calculadora es un proceso sencillo diseñado para ofrecer retroalimentación instantánea. La herramienta requiere dos entradas numéricas específicas que representan la luminancia relativa de los colores elegidos. Aquí está el proceso paso a paso, asumiendo que ya tienes los valores de luminancia de herramientas como un selector de color o una aplicación de diseño.

1. Localiza los Campos de Entrada: Encuentra los dos cuadros de entrada. Típicamente están etiquetados como 'Luminancia Clara' (o L1) y 'Luminancia Oscura' (o L2).
2. Ingresa el Valor Claro: En el primer campo, ingresa la luminancia del color más claro. Este valor debe ser un número decimal entre 0 y 1. Por ejemplo, el blanco puro es '1', mientras que un gris muy claro podría ser '0.8'.
3. Ingresa el Valor Oscuro: En el segundo campo, ingresa la luminancia del color más oscuro. Este valor también debe estar entre 0 y 1, pero debe ser numéricamente menor que el primer campo. El negro puro es '0', mientras que un gris oscuro podría ser '0.2'.
4. Haz Clic en Calcular: Pulsa el botón 'Calcular' o 'Enviar'. La herramienta procesará automáticamente las entradas.
5. Ve los Resultados: La calculadora mostrará instantáneamente la relación de contraste final (por ejemplo, 12.63:1) y probablemente la luminancia relativa de cada color. También puede indicar si esta relación cumple con los estándares WCAG AA o AAA.

Fórmula y Método de Cálculo

El método de cálculo detrás de esta herramienta está definido por el World Wide Web Consortium (W3C) en sus Pautas de Accesibilidad para el Contenido Web (WCAG) 2.1. La fórmula es engañosamente simple, pero depende de la precisión de las entradas de luminancia. La herramienta primero verifica el rango de entrada (debe ser 0 a 1) y luego aplica la siguiente ecuación matemática.

La fórmula para la Relación de Contraste (CR) es:

Relación de Contraste = (L1 + 0.05) / (L2 + 0.05)

En esta fórmula, L1 representa la luminancia relativa del color más claro, y L2 representa la luminancia relativa del color más oscuro. El valor 0.05 es una constante agregada a ambos valores para ajustar el hecho de que el negro absoluto tiene algo de reflectancia de luz ambiental en condiciones de visualización del mundo real. Esta constante evita que la relación se divida por cero cuando el color oscuro es negro puro (L2 = 0).

Veamos un ejemplo práctico concreto para demostrar el proceso. Supongamos que estás probando texto gris oscuro sobre fondo blanco. Ya has determinado que el fondo blanco tiene una luminancia relativa de 0.95 (L1) y el texto gris oscuro tiene una luminancia relativa de 0.35 (L2).

Paso 1: Agrega la constante 0.05 a L1. (0.95 + 0.05 = 1.00).
Paso 2: Agrega la constante 0.05 a L2. (0.35 + 0.05 = 0.40).
Paso 3: Divide los resultados. (1.00 / 0.40 = 2.50).
Resultado: La relación de contraste es 2.5:1. Esta es una relación baja y probablemente fallaría el requisito WCAG AA de 4.5:1 para texto estándar, lo que significa que el texto sería difícil de leer para muchos usuarios.

La herramienta realiza este cálculo en orden inverso si ingresas los valores correctamente: identifica el número mayor como L1 y el menor como L2 antes de aplicar la fórmula. Esto asegura que la relación final siempre esté entre 1:1 (colores idénticos) y 21:1 (negro vs. blanco).

Ejemplos Prácticos

Para entender cómo funciona la relación de contraste en el diseño del mundo real, veamos tres escenarios usando diferentes entradas de luminancia. Estos ejemplos ilustran cómo la misma fórmula produce resultados muy diferentes según el brillo de los colores involucrados.

En el primer ejemplo, una relación de 5:1 es suficiente para la mayoría del texto estándar. En el segundo ejemplo, la relación de 2.57:1 es demasiado baja para cualquier texto más pequeño que 18pt (negrita) o 24pt regular. La herramienta te ayuda a ver estas diferencias instantáneamente, permitiéndote ajustar tus valores de luminancia sobre la marcha para alcanzar el umbral requerido para tu caso de uso específico.

Consejos para Resultados Precisos

Obtener la relación de contraste correcta es crítico, pero es fácil cometer errores si no prestas atención a los datos de entrada. Los siguientes consejos te ayudarán a evitar los errores más comunes al usar esta calculadora específica.

• Verifica las Unidades y la Escala: El error más común es ingresar valores RGB (0-255) en lugar de valores de luminancia relativa (0.0 a 1.0). Esta calculadora espera luminancia, no códigos de color. Si tu herramienta de diseño muestra la luminancia como un porcentaje (por ejemplo, 50%), debes convertirla a decimal (0.5) antes de ingresarla.
• Verifica el Rango de Validez: Los valores de luminancia están físicamente limitados entre 0 (negro) y 1 (blanco). Si ingresas un valor mayor que 1, la calculadora producirá una relación matemáticamente incorrecta. Siempre asegúrate de que tus entradas estén dentro del rango válido [0, 1].
• Evita Redondear Resultados Intermedios: Al calcular manualmente, no redondees L1 o L2 a un decimal antes de aplicar la fórmula. Redondear 0.179 a 0.2 puede cambiar la relación final significativamente (por ejemplo, de 4.5:1 a 4.0:1). Ingresa el valor de luminancia de precisión completa en la calculadora para obtener el resultado más preciso.
• Asegura el Orden Correcto: Siempre coloca la luminancia más clara (número mayor) en el campo 'Claro'. Mientras la fórmula divide L1 por L2, si los intercambias, obtendrás una fracción (por ejemplo, 0.5 en lugar de 2:1), que es una relación de contraste inválida. La herramienta asume que los ingresarás correctamente, pero es una buena práctica verificar tus valores.

Preguntas Frecuentes

¿Cuál es la diferencia entre relación de contraste y luminancia?

La luminancia es una medida absoluta de la luz emitida desde una pantalla, que va de 0 (negro) a 1 (blanco). Representa cuán brillante es realmente un color específico. La relación de contraste es una medida relativa; describe la diferencia en luminancia entre dos colores. Calculas el contraste dividiendo la luminancia más brillante por la más oscura (con la corrección +0.05). En resumen, la luminancia es la entrada (los datos brutos), y la relación de contraste es la salida (la relación entre dos valores de luminancia). Un color puede tener una luminancia fija, pero su relación de contraste solo existe en relación con otro color.

¿Por qué la fórmula agrega 0.05 a ambos números?

La constante 0.05 es un ajuste perceptual definido por el W3C. Tiene en cuenta el hecho de que en condiciones normales de visualización, el negro verdadero (luminancia 0) es casi imposible de lograr debido a la luz ambiental que se refleja en la pantalla. Incluso si una pantalla está apagada, algo de luz se refleja. Agregar 0.05 a ambos valores, claro y oscuro, asegura que la relación de contraste nunca pueda ser infinita (lo que sucedería si dividieras por cero cuando el color oscuro es negro). También estandariza la relación máxima en 21:1 (blanco puro vs. negro puro), que representa el rango dinámico absoluto de una pantalla típica.

¿Es suficiente una relación de contraste de 3:1 para todo el texto?

No. Según WCAG 2.1, una relación de contraste de 3:1 solo es suficiente para texto grande (18pt o 14pt en negrita y superior) y para elementos gráficos (como iconos y gráficos). Para texto de cuerpo estándar, el requisito mínimo es 4.5:1 para cumplir con la conformidad WCAG AA. Si apuntas a WCAG AAA, el listón es aún más alto, requiriendo 7:1 para texto estándar y 4.5:1 para texto grande. Esta calculadora te ayuda a determinar si tu tamaño y peso de texto específicos cumplen con el umbral requerido, asegurando que tu contenido sea accesible para la audiencia más amplia posible.