Contraste Colores Pro
Compara el contraste de colores de paletas, imágenes y código con informes y exportación.
Qué hace Contraste Colores Pro
Contraste Colores Pro compara varios colores en una matriz de contraste. En lugar de revisar un solo par de texto y fondo, permite trabajar con una paleta completa, colores extraídos de una imagen o colores detectados en código. Cada celda de la matriz cruza dos colores y muestra la relación correspondiente, de modo que puedes ver rápido qué combinaciones sirven para texto y cuáles deberían reservarse para elementos decorativos.
La interfaz está organizada en tres pestañas visibles: Paleta, Imagen y Código. La pestaña Paleta permite añadir colores manualmente y generar la matriz. La pestaña Imagen permite subir un archivo PNG, JPG o WEBP, elegir colores de la imagen y analizarlos. La pestaña Código permite pegar HTML, analizar los colores usados y detectar combinaciones problemáticas. Esta estructura convierte una revisión de contraste repetitiva en una comparación más amplia y ordenada.
Contraste Colores Pro resulta útil cuando un diseño tiene varios tokens, estados, fondos o colores de marca que deben convivir. Un par aislado puede ser correcto, pero una paleta completa puede contener combinaciones débiles si se usa cualquier color como texto sobre cualquier color de fondo. La matriz ayuda a localizar esos riesgos antes de documentar la paleta o aplicarla en componentes reales.
Cómo usar Contraste Colores Pro
- Abre la pestaña Paleta para revisar colores escritos manualmente. Añade cada valor con el botón visible de añadir y espera a que aparezca en la lista de colores.
- Consulta la Matriz de contraste. Cuando hay al menos dos colores, cada cruce muestra una relación numérica entre el color de la fila y el color de la columna.
- Usa la pestaña Imagen si quieres extraer colores desde un archivo. Elige o arrastra una imagen compatible y analiza los colores detectados.
- Usa la opción de selección sobre imagen cuando necesites confirmar un color concreto antes de incluirlo en la comparación.
- Usa la pestaña Código si ya tienes HTML o estilos visibles. Pega el código y pulsa Analizar para revisar los pares encontrados.
- Abre un par concreto cuando necesites ver el detalle de la relación. El diálogo muestra los valores HEX, la relación y el resultado por niveles de legibilidad.
- Usa Exportar cuando quieras revisar o copiar la paleta analizada en un formato reutilizable.
Matriz de legibilidad para paletas imágenes y código
La matriz es el centro de la revisión. Los colores aparecen en filas y columnas, y cada celda representa un par posible. Si el mismo color se cruza consigo mismo, no hay contraste útil. Cuando dos colores son distintos, el valor indica si el primero podría funcionar como texto sobre el segundo, o si conviene intercambiar, oscurecer, aclarar o descartar esa combinación para contenido importante.
| Fuente visible | Qué aporta | Cuándo usarla |
|---|---|---|
| Paleta | Colores añadidos manualmente para comparar muchos pares. | Revisión de marca, tokens de diseño, UI states y guías internas. |
| Imagen | Colores extraídos o seleccionados desde una imagen subida. | Diseños basados en fotografía, fondos visuales, banners o temas de campaña. |
| Código | Análisis de colores presentes en fragmentos HTML. | Auditoría rápida de un bloque existente, prototipo o componente heredado. |
| Detalle de par | Relación exacta, valores HEX y estado de legibilidad de una combinación. | Confirmar una decisión antes de pasarla a producción o documentación. |
Las relaciones visibles siguen límites habituales de contraste para texto normal, texto grande y combinaciones que necesitan más margen. Un valor alto no convierte automáticamente una paleta en accesible, pero sí ofrece una señal clara sobre qué pares tienen suficiente separación para contenido legible.
Cómo leer los resultados de la matriz
Lee la matriz por tareas, no solo por números. Si un color está pensado como fondo principal, revisa qué colores de texto lo acompañan mejor. Si un color se usará para etiquetas o botones, mira si funciona con texto claro y oscuro. Si varios colores fallan entre sí, quizá esos tonos pertenecen al mismo rango de luminosidad y necesitan una variante más clara o más oscura para crear jerarquía.
Una relación por debajo de 3:1 suele ser demasiado baja para texto y controles importantes. Entre 3:1 y 4.5:1 puede ser aceptable para texto grande o elementos de soporte, pero no para cuerpo pequeño. A partir de 4.5:1 el par se vuelve más razonable para texto normal; a partir de 7:1 ofrece una separación más exigente. La matriz permite detectar esos grupos sin abrir un comprobador individual para cada combinación.
Cuando necesites afinar un par concreto, abre la combinación en Contraste de Colores. Ese flujo es mejor para ajustar primer plano, fondo, luminosidad y opacidad con más detalle después de identificar el problema en la matriz.
La matriz también revela si una paleta tiene suficiente rango de luminosidad. Si casi todas las combinaciones tienen resultados parecidos, puede que los colores estén demasiado próximos entre sí. Añadir un neutro muy claro, un neutro muy oscuro o una variante más profunda de un color principal suele crear mejores opciones para texto, iconos y etiquetas.
Revisión de imágenes y código
La pestaña Imagen es útil cuando la paleta no viene de un documento de marca, sino de una fotografía, una ilustración o una captura. Subir una imagen ayuda a extraer tonos dominantes y probar si pueden funcionar como fondo o texto. Aun así, una imagen suele tener sombras, luces y zonas mezcladas; un color extraído no representa necesariamente toda la superficie. Por eso conviene comprobar los colores relevantes y no asumir que todo el fondo ofrece el mismo contraste.
La pestaña Código ayuda cuando ya existe un bloque HTML y necesitas detectar colores problemáticos sin revisar cada estilo manualmente. El informe de análisis puede señalar combinaciones de texto y fondo con relación baja. Úsalo como una revisión rápida: después conviene comprobar el componente real, los estados interactivos y los colores que dependen de clases, temas o estilos externos.
Si el trabajo empieza desde una imagen y solo necesitas tomar un color exacto, Cuentagotas Online puede ser el paso previo. Después, Contraste Colores Pro permite comparar ese color con otros tonos de la paleta.
Cuando el análisis venga de código, trata el resultado como una alerta inicial. Algunos colores pueden llegar desde variables CSS, hojas externas, estados interactivos o temas que no aparecen completos en el fragmento pegado. El informe ayuda a localizar riesgos, pero la aprobación final debe comprobarse en el componente renderizado y en los tamaños reales de texto.
Exportación revisión y comparación de pares
El botón Exportar abre un resumen de la paleta. Esta salida resulta práctica para compartir los colores revisados, pegarlos en documentación o conservar una versión del análisis mientras ajustas otros tonos. La exportación no debe sustituir una decisión de accesibilidad completa, pero ayuda a mantener orden cuando se trabaja con muchas muestras.
El detalle de par permite comprobar una combinación específica dentro de la matriz. Allí se ven los dos valores HEX, la relación de contraste y los resultados por nivel. Ese punto es importante porque una matriz amplia localiza problemas, pero una decisión final suele hacerse par por par: texto principal sobre fondo, texto secundario, botón primario, badge de estado, etiqueta de formulario o encabezado sobre bloque de color.
Errores comunes al trabajar con varias fuentes
- Añadir demasiados colores similares y terminar con una matriz grande pero poco útil.
- Tratar un color extraído de una imagen como si representara todo el fondo visible.
- Usar pares que pasan para texto grande en texto pequeño, menús o etiquetas de formulario.
- Ignorar estados de interacción como hover, focus, selected, disabled y active.
- Revisar solo los colores de marca y olvidar neutros, grises, sombras, overlays y fondos reales.
- Exportar la paleta antes de corregir los pares que fallan en las combinaciones más importantes.
Cuándo pasar a una revisión de un par concreto
La matriz es ideal para detectar patrones. Si muchos pares fallan, el problema quizá no es una combinación aislada, sino la falta de tonos extremos en la paleta. Si solo fallan dos o tres pares, puede bastar con cambiar el uso de esos colores o ajustar una variante. Cuando un par esté cerca del umbral, revisa el caso real con el tamaño de texto, el peso tipográfico y el fondo definitivo.
Antes de aprobar una paleta, revisa los pares más críticos: texto principal sobre fondo principal, texto claro sobre color de marca, texto oscuro sobre tarjetas claras, enlaces, mensajes de error, botones, chips y etiquetas de estado. Después documenta qué colores pueden usarse como fondo y qué colores funcionan como texto. Esta separación evita que un tono decorativo acabe usado como color de lectura sin suficiente contraste.
Una buena práctica es guardar dos listas separadas: pares aprobados para lectura y pares válidos solo para decoración. Así, un color que queda bien como acento no acaba usado para texto pequeño. También puedes documentar qué combinaciones son aptas para AA, cuáles llegan a AAA y cuáles deben evitarse en contenido esencial.