Crear una paleta usable con contraste medido.
Asigne colores a funciones y pruebe pares reales de texto y fondo. Una colección bonita no garantiza lectura ni estados interactivos accesibles.
Adapta el flujo de trabajo a tu tarea.
Elija colores por función, aporte valores exactos y pruebe pares de primer plano y fondo. Incluya estados interactivos y otras superficies. Separe gusto del contraste medido y revise componentes reales.
- Qué aportas
- Atributos de marca y límites de accesibilidad.
- Qué obtienes
- Paletas candidatas con contraste comprobado.
Mira la entrada y el resultado.
Entrada y salida ilustrativas · ejemplo didáctico, no una ejecución de WebAct en directo
Ejemplo campo
Create a small UI palette using navy and warm cream, plus an orange-brown accent. Need body text, links and a filled action button. Calculate contrast for solid, opaque pairs.
Ejemplo completo
Background: #fff7ed Body text: #172554 — contrast on background ≈ 13.84:1 Underlined links/accent text: #9a3412 — contrast on background ≈ 6.88:1 Action button: #9a3412 background, #ffffff label — contrast ≈ 7.31:1 These pairs exceed the 4.5:1 normal-text threshold. This checks the stated solid-color pairs only; focus, hover, disabled states and the rest of the interface still need review.
Carga esta entrada en el prompt y cópialo en WebAct para probar la tarea. Tu resultado puede diferir del ejemplo.
Decisiones y solución de problemas.
¿Un par de texto con alto contraste garantiza toda la interfaz accesible?
No. Otros estados, controles y señales no cromáticas requieren revisión. La prueba de pares es una parte.
¿Por qué un color acento sirve para decorar pero no para texto pequeño?
El contraste con fondo puede ser insuficiente. Cambie su función o ajuste el par.
Referencia para este flujo de trabajo.
Pruébalo con tu propia fuente.
Sustituye el ejemplo por tu material en el prompt. Conserva los requisitos que necesites y copia la tarea en WebAct.
Personalizar y copiar la tarea ↑