appstoryoAppStoryolapnito.cz s.r.o.blog/check-text-contrast-picked-color-ui/esCómo verificar el contraste de texto de un color seleccionado antes de usarlo en la interfazLubor Šimůnek29082026© 2026 lapnito.cz s.r.o.2026lapnito.cz s.r.o.CC BY 4.0Aprende a comprobar la relación de contraste WCAG y ajustar colores en HSL para que tu interfaz sea siempre accesible y legible.
DiseñoarticleAppStoryoPor qué el contraste importaAlrededor de 300 millones de personas en el mundo tienen algún tipo de deficiencia visual del color. Diseñar con buen contraste no es solo un detalle estético: en muchas regiones es un requisito legal. El estándar de referencia es WCAG 2.1, que establece dos niveles principales:
Nivel AA: relación de contraste de 4,5:1 para texto normal y 3:1 para texto grande (18 px o 14 px en negrita).
Nivel AAA: 7:1 para texto normal. Apunta aquí cuando tu audiencia incluya usuarios con visión reducida.
Errores comunesLos más frecuentes son más sutiles de lo que parece: gris claro sobre blanco (puede estar en 1,5:1), botones de marca con texto blanco que visualmente parecen bien pero no superan el AA, o colores que pasan en modo claro pero fallan en modo oscuro.
Flujo de trabajo prácticoCaptura el color de fondo. Abre Color Picker Camera: HEX RGB, apunta la cámara a la superficie y toca para obtener el valor HEX al instante. La app también muestra HSL, que usarás en el siguiente paso.
Captura el color del texto del mismo modo.
Comprueba el par en un verificador de contraste como WebAIM Contrast Checker, el panel de Accesibilidad en DevTools o el plugin Contrast de Figma.
Ajusta la luminosidad en HSL hasta superar el umbral. Mantén el tono (H) y la saturación (S) y baja el valor L para oscurecer el color sin cambiar su identidad visual.
Por qué HSL es la mejor opción para ajustar contrasteRGB y HEX no te dan un control intuitivo sobre el brillo. HSL separa el color en tono, saturación y luminosidad. Color Picker Camera: HEX RGB muestra HEX, RGB, HSL y CMYK al mismo tiempo, por lo que no necesitas conversiones manuales.
Ejemplo realUn botón azul medio (#4A90E2) con texto blanco tiene una relación de contraste de aproximadamente 3,1:1, lo que no supera el AA. Cambia a azul marino oscuro (#1A3A6B) y obtienes 9,4:1, superando incluso el AAA. El botón sigue siendo claramente azul, pero ahora también es legible.
Nota sobre WCAG 3.0 y APCALa próxima versión de las guías introduce APCA, un modelo de contraste perceptual más matizado. WCAG 2.1 AA sigue siendo el estándar aplicable hoy, pero vale la pena conocer APCA si estás construyendo algo pensado para durar.
Descarga Color Picker Camera: HEX RGB gratis para iOS o Android: sin anuncios, sin rastreo y funciona completamente sin conexión.