Convierte colores HEX, RGB y HSL y comprueba contraste WCAG con combinaciones reales de texto y fondo.
Entrada / Salida
La entrada, la salida y las acciones de copiar quedan en esta superficie principal. Los ejemplos y revisiones quedan abajo.
Sesion local
El estado de entrada se guarda solo en este navegador para restaurar el ultimo trabajo sin cuenta.
Abre ejemplos, comprobaciones y herramientas relacionadas solo cuando termine el flujo principal.
Revisar accesibilidad de color
Convierte colores de frente/fondo, copia un reporte WCAG y revisa tokens CSS y assets visuales antes de publicar.
Convierte pares HEX/RGB/HSL, revisa AA/AAA y copia el reporte de accesibilidad.
Revisa nombres de tokens CSS, selectores y colores duplicados antes de commitear.
Comprueba si iniciales de marca o iconos pequenos siguen legibles sobre el fondo elegido.
Crear QR de Wi-Fi
Genera una contrasena compatible, arma el payload Wi-Fi, copia un reporte de escaneo y revisa contraste.
Genera una contrasena que encaje con la politica del router.
Arma el payload Wi-Fi, descarga la imagen y copia el reporte de escaneo.
Revisa contraste de frente y fondo antes de imprimir.
Revisar un snippet CSS
Formatea el snippet CSS, copia el reporte CSS y luego revisa minificacion y contraste.
Formatea el snippet y copia el reporte con selector, token, cascade, specificity y checklist.
Si compartiras CSS compacto, revisa compresion, eliminacion de comentarios y reporte minificado.
Revisa tokens de color contra contraste WCAG si el snippet cambia colores visibles.
Antes de copiar
Fallos comunes
Herramientas relacionadas
Guias
Abre ejemplos, comprobaciones y herramientas relacionadas solo cuando termine el flujo principal.
#2563eb on #ffffffrgb(24,24,27) on #fafafahsl(220 90% 56%) on hsl(0 0% 100%)Ejemplos de color
Relacion de contraste
5.17
AA
Primer plano
#2563eb
Fondo
#ffffff
Objetivo WCAG
AA 4.5:1 / AAA 7:1
Usa 3:1 solo para texto grande o en negrita.
Revisa umbrales AA/AAA, limites de transparencia y luminancia antes de copiar tokens de diseno.
Texto normal AA
Pasa
4.5:1
Texto grande AA
Pasa
3:1
Texto normal AAA
Falla
7:1
Margen AA
+0.67
Valores positivos superan AA para texto normal.
Diferencia de luminancia
0.847
Diferencias mayores suelen leerse mejor.
Reporte de accesibilidad de color
Copia un reporte WCAG de contraste con valores, umbrales, alertas y chequeos de accesibilidad.
Estado de contraste
AA
Relacion de contraste
5.17
Texto normal AA
Pasa
4.5:1
Texto grande AA
Pasa
3:1
Texto normal AAA
Falla
7:1
Margen AA
+0.67
Diferencia de luminancia
0.847
Entrada alfa
No
Notas de revision
Checklist de accesibilidad
# Reporte de accesibilidad de color - Revisado en: Hora de copia del navegador - Primer plano Entrada: #2563eb - Primer plano HEX: #2563eb - Primer plano RGB: rgb(37, 99, 235) - Primer plano HSL: hsl(221, 83.2%, 53.3%) - Fondo Entrada: #ffffff - Fondo HEX: #ffffff - Fondo RGB: rgb(255, 255, 255) - Fondo HSL: hsl(0, 0.0%, 100.0%) - Relacion de contraste: 5.17 - Estado de contraste: AA - Texto normal AA: Pasa (4.5:1) - Texto grande AA: Pasa (3:1) - Texto normal AAA: Falla (7:1) - Margen AA: +0.67 - Diferencia de luminancia: 0.847 - Manejo de alfa: No se detecto alfa en primer plano/fondo. ## Notas de revision - AA pasa, pero AAA requiere 7:1. ## Checklist de accesibilidad - Prueba el par en el fondo renderizado final, no solo en la vista solida. - Revisa hover, focus, disabled, visited y selected antes de publicar. - Confirma tamano y peso reales antes de usar el umbral de texto grande. - Guarda tokens de frente y fondo juntos para reutilizar el par con intencion. - No comuniques errores, alertas o acciones requeridas solo con color.
Primer plano
#2563eb
Fondo
#ffffff
Salida lista para copiar
Primer plano HEX: #2563eb
Primer plano RGB: rgb(37, 99, 235)
Primer plano HSL: hsl(221, 83.2%, 53.3%)
Fondo HEX: #ffffff
Fondo RGB: rgb(255, 255, 255)
Fondo HSL: hsl(0, 0.0%, 100.0%)
Relacion de contraste: 5.17 (Texto normal AA)