Calculadora de relación de contraste

El contraste de color describe la diferencia de luminancia relativa entre el primer plano y el fondo. Un contraste adecuado ayuda a leer y utilizar interfaces digitales a personas con baja visión, diferencias en la visión del color, envejecimiento visual, reflejos o pantallas de baja calidad. Esta calculadora convierte dos colores HEX o RGB a los valores de luminancia relativa definidos por las Pautas de Accesibilidad para el Contenido Web y muestra una relación desde 1:1 para luminancias iguales hasta 21:1 para negro sobre blanco. El cálculo no compara simplemente los valores originales de los canales rojo, verde y azul. Cada canal sRGB se normaliza y linealiza para tener en cuenta la gamma de la pantalla. Los valores lineales rojo, verde y azul reciben pesos de luminancia de 0.2126, 0.7152 y 0.0722, porque la visión humana es más sensible a la luz verde. La relación final divide la luminancia más clara más 0.05 entre la más oscura más 0.05. Este método estándar produce el mismo resultado sin importar el orden de entrada de los colores. El criterio de conformidad 1.4.3 de WCAG 2.x exige al menos 4.5:1 para texto normal en nivel AA y 3:1 para texto grande. El nivel AAA eleva esos umbrales a 7:1 y 4.5:1. El texto grande suele ser de al menos 18 puntos en peso normal o 14 puntos en negrita, aproximadamente 24 píxeles CSS o 18.66 píxeles CSS bajo las condiciones habituales del navegador. Los componentes de interfaz y los objetos gráficos significativos tienen requisitos independientes, habitualmente 3:1 frente a colores adyacentes. Cumplir una relación es importante, pero no garantiza un diseño accesible. Fuentes finas, tipografías inusuales, degradados, imágenes, estados al pasar el puntero, transparencias, suavizado y fondos cambiantes pueden alterar la legibilidad efectiva. El texto de marcador de posición y los controles deshabilitados también merecen una revisión deliberada, aunque algún criterio los trate de otro modo. No comuniques estados solo mediante color: añade etiquetas, iconos, patrones u otras señales. Comprueba los indicadores de foco y todos los estados interactivos, no solo la captura predeterminada. Introduce HEX de seis o tres dígitos, o la notación RGB estándar separada por comas. La calculadora valida los canales entre cero y 255 y evalúa los colores exactos introducidos. Si el resultado queda justo por debajo del umbral, oscurece el primer plano o aclara el fondo y vuelve a calcular. Tras la comprobación automática, realiza pruebas de teclado, ampliación y redistribución del contenido, revisión con lector de pantalla y recoge opiniones de personas con discapacidad. Usa esta herramienta durante el diseño y la implementación para detectar fallos básicos de color pronto y verifica la interfaz final en condiciones reales.