Resumen
Esta herramienta sirve para diseñadores, desarrolladores y revisores que necesitan valorar una pareja de colores sin hacer pruebas a ojo. Muestra la relacion de contraste entre dos colores y ayuda a interpretar ese resultado en textos reales, etiquetas, botones, tarjetas y paneles. Úsala al ajustar temas visuales, revisar colores de marca o comprobar un componente antes de publicarlo. Resulta especialmente útil cuando una combinación se ve bien en pantalla pero pierde claridad en texto pequeño, estados desactivados o superficies teñidas.
Casos de uso
- Texto de cuerpo sobre fondo claroComprueba si un párrafo sigue siendo legible sobre blanco, marfil o tarjetas muy pálidas.
- Etiqueta de botón sobre color de marcaPrueba si una etiqueta blanca, oscura o matizada se mantiene clara sobre un botón sólido.
- Texto secundario en paneles de datosVerifica si metadatos, fechas y avisos siguen destacando en pantallas con mucha información.
- Revisión de tema oscuroEvalúa texto sobre paneles antracita, tarjetas y capas superpuestas antes de lanzar una interfaz dark mode.
Como funciona
- 1
Elige el color del texto y el color del fondo.
- 2
La herramienta calcula la relación de contraste entre ambos colores.
- 3
Revisa el resultado para texto normal, texto grande y superficies de interfaz donde la legibilidad es importante.
Ejemplos
Texto editorial sobre blanco
Entrada: Texto #1F2937 / Fondo #FFFFFF
Salida: Contraste alto; válido para lectura normal.
Una combinación habitual para artículos, formularios y documentación.
Etiqueta blanca en botón azul
Entrada: Texto #FFFFFF / Fondo #2563EB
Salida: Legible para un botón de acción; conviene revisar el tamaño.
Útil para confirmar si un CTA principal puede usar texto blanco.
Subtítulo gris suave en una tarjeta
Entrada: Texto #6B7280 / Fondo #F3F4F6
Salida: Contraste bajo; puede servir solo para texto secundario y más grande.
Muestra por qué los grises suaves pueden quedarse cortos sobre fondos muy claros.
FAQ
¿Qué indica exactamente la relación de contraste?
Compara la diferencia de brillo percibido entre dos colores. Cuanto más alta es la relación, más se separa normalmente el texto del fondo.
¿Por qué una combinación puede verse bien y aun así dar un resultado flojo?
Porque un color muy saturado no siempre tiene suficiente diferencia de luminancia. La relación se basa en brillo, no en intensidad visual.
¿Importa el tamaño del texto al interpretar el resultado?
Sí. El texto pequeño necesita una separación más fuerte que un título grande. Una pareja válida para un encabezado puede no funcionar para cuerpo o etiquetas.
¿Cuál es el error más común con botones y badges?
Se prueba solo el estado principal y se olvidan hover, disabled o contornos. Esos estados pueden bajar el contraste y empeorar la lectura.