Medir antes de pintar

Un botón verde claro sobre fondo blanco, etiquetado con texto blanco. Así se veía el botón de sugerencia en mi chatbot de Odoo después de seleccionar el esquema de colores «Forest Green». Se podía hacer clic, pero no leerse.

Ese día tenía otras intenciones. Claude Code ha incorporado recientemente un /design-skill, una vista previa temprana del editor Canvas de Claude Design, y quería saber si con ello se conseguía una ventana de chat más atractiva. Así que encargué ambas cosas: revisa los esquemas de colores y muéstrame variantes de diseño.

En lugar de dibujar inmediatamente, Claude midió. Para los diez esquemas de color entregados, se extrajeron mediante automatización del navegador los colores realmente renderizados, se calculó el fondo efectivo a través de la cadena de padres y, a partir de ello, se determinaron los valores de contraste según WCAG. Todos los números de este artículo provienen de esta medición. Resultado: 64 infracciones. El botón de sugerencia tenía una relación de 1,00:1, blanco sobre blanco, matemáticamente invisible.

La causa fue una única clase. Nuestro tema de backend coloreaba los botones en la barra de la bandeja del sistema de blanco, y mi ventana de chat estaba anclada exactamente en esa barra. Durante meses había una regla de protección. En CSS, cuando hay reglas en conflicto, decide la especificidad, en términos generales: quien menciona más clases en el selector gana. Nuestra regla de protección estaba escrita contra un oponente con tres componentes. En algún momento, a la regla del tema se le añadió un .o_web_client al principio y ahora tenía uno más. Por ello no perdió un solo elemento, sino el archivo de protección completo: enlaces de mensajes, clip, botón de copiar, todos los botones del historial de la conversación. Nada explotó. La ventana simplemente se volvió ilegible en silencio.

Cuatro bocetos en una superficie

A continuación llegó la parte de diseño. Me entregaron un lienzo con cuatro tableros de arte: a la izquierda el estado actual reparado como comparación, junto a él tres direcciones, cada una con una idea nombrable.

La variante A me convenció, y no por su estética. Elimina el color de la marca de la cabecera y lo deja solo en el botón de historial de conversaciones. Así resuelve un problema en el que habría quedado atascada: en una barra de color, el título debe contrastar con el color primario libremente seleccionable, y con marcas de brillo medio, eso no permite un color de texto legible. En el color#059669 el máximo es de 3,90:1, ya sea que se ponga blanco o negro encima. Sobre fondo claro, son 14,49:1.

Así, una decisión de diseño se convirtió en una solución técnica.

El borrador omitió la nota obligatoria

Y luego el punto que más me preocupó. En mi ventana de chat, encima de la conversación, aparece una frase: «Está chateando con un asistente de IA, no con una persona». Está allí debido al artículo 50, apartado 1, del Reglamento de la UE sobre IA.

En el diseño del mockup no era visible.

Se notó porque meses antes había escrito cuatro pruebas de regresión para ello. Estas comprueban que la nota existe, que no depende de una condición, que aparece encima del historial de conversaciones y del campo de entrada, y que su texto proviene de una constante fija en lugar de de una configuración del cliente. En el comentario de cabecera de este archivo se indica explícitamente como propósito: interceptar a alguien que omita la nota en un rediseño.

Exactamente eso ocurrió. Solo que esta vez la persona fue una IA, y la prueba se mantuvo igual.

Escribo esto tan claramente porque la versión más cómoda de la historia sería incorrecta. La IA no implementó por sí sola el requisito de la UE. Habría perdido la nota en el borrador. Lo que la salvó fue el trabajo que había realizado previamente.

566 pruebas y cero infracciones de contraste

Al final del día: 566 pruebas en verde, sin más incumplimientos de contraste en los diez esquemas, además de cuatro nuevas pruebas de guardián que, a partir de ahora, informarán si este margen de especificidad vuelve a colapsar. Por cierto, la revisión posterior detectó siete errores de contraste en los propios mockups. La misma negligencia que acababa de ser reparada.

Trabajo con Opus 5. Probé Fable 5 y no encontré ninguna ventaja para mis tareas que justificara el coste; los agentes obtienen de todos modos Sonnet o Haiku para pasos más sencillos. A mi juicio, más del 90 por ciento de mis flujos diarios funciona de forma automatizada. Yo redacto los textos y las imágenes y realizo las pruebas finales personalmente.

Lo que llevo del día es más incómodo que «la herramienta es buena». Solo ayuda hasta donde llega la protección que ya existía.

Creado por Martin Schmid, con el apoyo de Claude Opus 5 y aprobado tras revisión de contenido propia. Se aplican nuestros avisos y limitación de responsabilidad.