Calculadora de Relacion de Contraste de Color

Una calculadora de relacion de contraste de color mide cuan legible es un texto sobre su fondo comparando dos colores segun el estandar de accesibilidad WCAG. Devuelve la relacion de contraste, un numero de 1:1 a 21:1, e indica si esa relacion cumple el umbral de nivel AA de las Pautas de Accesibilidad para el Contenido Web para texto normal. Un contraste suficiente es esencial para que las personas con baja vision o deficiencias de color, y cualquiera bajo luz solar intensa, puedan leer el contenido comodamente.

Esta comprobacion importa a disenadores, desarrolladores y creadores de contenido que construyen interfaces accesibles y conformes. La legislacion de accesibilidad y las directrices de plataformas en muchas regiones hacen referencia a WCAG, asi que fallar el contraste puede ser tanto una exclusion de usuarios reales como un riesgo legal. Mas alla del cumplimiento, un buen contraste simplemente hace los productos mas faciles de usar para todos. Probar un par de texto y fondo antes de publicar detecta problemas faciles de corregir en el diseno pero costosos de reparar despues.

El calculo sigue la formula WCAG con precision. Cada color se convierte de su codigo hex a luminancia relativa linealizando los canales rojo, verde y azul mediante la curva gamma sRGB y ponderandolos segun la sensibilidad de la vision humana a cada uno. La relacion divide la luminancia mas clara mas un pequeno desplazamiento por reflejo entre la mas oscura mas el mismo desplazamiento. WCAG AA requiere al menos 4,5:1 para texto normal y 3:1 para texto grande. Disenadores y desarrolladores usan una calculadora de contraste para garantizar que sus elecciones de color sean legibles y accesibles.

Cómo funciona

Fórmula: ratio = (L_lighter + 0.05) ÷ (L_darker + 0.05)

La luminancia relativa de cada color se halla convirtiendo sus canales sRGB a una escala lineal (dividiendo entre 255 y aplicando la curva gamma sRGB) y ponderandolos con 0,2126 el rojo, 0,7152 el verde y 0,0722 el azul, segun como percibe el brillo el ojo. La relacion de contraste divide entonces la luminancia mas clara mas 0,05 entre la mas oscura mas 0,05. El desplazamiento de 0,05 modela el reflejo ambiental de la pantalla, y la relacion va de 1:1 para colores identicos a 21:1 para negro sobre blanco.

Cuándo usarla

Usa esta calculadora al elegir los colores de texto y fondo de una interfaz, idealmente antes de publicar, para asegurar que el contraste cumple las pautas de accesibilidad WCAG. Los diseñadores la emplean al definir una paleta, comprobando cada combinación de texto sobre fondo antes de llevarla al producto. Los desarrolladores la consultan durante una revisión de accesibilidad para detectar pares que no alcanzan el umbral y que serían costosos de corregir más tarde. Es relevante allí donde la ley o las directrices de plataforma hacen referencia a WCAG, ya que un contraste insuficiente es a la vez una exclusión de usuarios reales y un riesgo legal. También sirve a creadores de contenido que preparan presentaciones o documentos y quieren que el texto siga siendo legible para personas con baja visión, deficiencias de color o que leen bajo luz solar intensa.

Consejos y consideraciones

Recuerda que el nivel AA exige al menos 4,5:1 para texto normal y 3:1 para texto grande (18 puntos, o 14 en negrita); esta calculadora comprueba el umbral de texto normal, así que un par que falle aquí podría pasar para titulares. Prueba siempre al tamaño real en que aparecerá el texto. El verde pesa más en el cálculo (0,7152 frente a 0,2126 del rojo y 0,0722 del azul) porque el ojo lo percibe como más brillante, de modo que la relación coincide con la legibilidad percibida y no con los valores numéricos brutos. Introduce códigos hex válidos de tres o seis dígitos; los caracteres fuera del rango 0-9 y A-F devuelven un guion. El pequeño desplazamiento de 0,05 en la fórmula modela el reflejo de pantalla. Para máxima accesibilidad apunta al nivel AAA (7:1), y no te fíes solo del color para transmitir información.