Comprobador de contraste de color
Introduce dos colores y consulta al instante la relación de contraste WCAG con guía AA y AAA.
Introduce colores de primer plano y fondo en hex o RGB para calcular al instante la relación de contraste WCAG, ver resultados AA/AAA, previsualizar texto y obtener sugerencias de ajuste opcionales.
Cómo usar este comprobador de contraste de color
Escribe o pega un color de primer plano y otro de fondo. La herramienta normaliza la entrada válida a hex en mayúsculas, calcula al instante la relación de contraste WCAG y muestra aprobado o no para los umbrales AA y AAA. Usa Sugerir corrección para acercar un color al cumplimiento, comparte resultados con la URL o restablece para empezar de nuevo.
Umbrales de relación de contraste WCAG
WCAG 2.x exige al menos 4,5:1 para texto normal (AA), 3:1 para texto grande (AA), 7:1 para texto normal (AAA) y 4,5:1 para texto grande (AAA). Esta herramienta muestra siempre los cuatro resultados para comparar niveles de un vistazo.
Formatos de color admitidos
Introduce #RGB, #RRGGBB, rgb(r,g,b) o valores r,g,b separados por comas. Los canales deben ser enteros de 0 a 255. La transparencia alfa, el hex de 8 dígitos, HSL/HSLA y los colores con nombre de CSS no están admitidos en v1.
Qué significan aprobado y no cumple
Aprobado significa que la relación calculada cumple o supera el umbral indicado para ese nivel. No cumple significa que no lo alcanza. Las etiquetas y los iconos acompañan al color para que los resultados se entiendan sin depender solo del color.
Preguntas Frecuentes
¿Por qué no se admiten alfa y degradados?
La versión 1 evalúa solo colores sRGB totalmente opacos. La mezcla con alfa y los degradados requieren reglas de composición que esta herramienta aún no modela, por lo que rgba(), hex de 8 dígitos y el análisis de degradados quedan fuera del MVP.
¿Cómo se calcula la relación de contraste?
El comprobador usa la fórmula de luminancia relativa WCAG para colores sRGB opacos: linealiza cada canal, calcula la luminancia y aplica (más claro + 0,05) / (más oscuro + 0,05). Las relaciones mostradas se redondean a dos decimales; las comprobaciones de umbral usan el valor completo.
¿Qué hace Sugerir corrección?
Mueve de forma determinista el color de primer plano o fondo seleccionado a lo largo de una ruta de luminosidad hacia negro o blanco hasta cumplir el nivel WCAG elegido, devolviendo el hex conforme más cercano y la relación resultante cuando existe.
¿Puedo compartir un par de colores concreto?
Sí. Los valores válidos de primer plano, fondo y tamaño de texto se sincronizan en los parámetros de la URL (por ejemplo ?fg=000000&bg=FFFFFF&size=normal) para enlazar directamente a un resultado.
¿La página guarda mis colores?
Los cálculos se ejecutan por completo en tu navegador. El último par de colores válido puede guardarse en localStorage en tu dispositivo por comodidad; usa Restablecer para borrar entradas, parámetros de URL y el estado almacenado.