Tutoriales
Claude Opus 5.5: mejorar el contraste sin cambiar la marca
Pide a Claude Opus 5.5 que corrija parejas concretas de texto y fondo; después verifica los colores mediante un cálculo determinista.
Pide a Claude Opus 5.5 que corrija parejas concretas de texto y fondo; después verifica los colores mediante un cálculo determinista. La identidad puede seguir siendo reconocible mientras botones, notas y enlaces resultan más legibles. Asignar funciones a los colores suele ser más útil que sustituir todos los naranjas por marrones.
Esta es una propuesta de revisión con un cálculo reproducible, no una prueba de rendimiento de Opus. La guía oficial de instrucciones ayuda a definir el entregable: conservar el logotipo aprobado y cambiar únicamente las variables indicadas.
Entrega parejas de colores, no solo referencias visuales
Recoge los valores CSS del texto y del fondo inmediato, además de opacidad, gradientes, tamaño, peso y estado. La captura sirve para localizar el problema; sus píxeles pueden estar afectados por compresión o suavizado. Calcula con los valores originales.
La explicación del W3C establece 4.5:1 para texto normal y 3:1 para texto que cumpla la definición de tamaño grande: al menos 18 pt normal o 14 pt en negrita, considerando tamaños equivalentes en otras escrituras. No redondees un resultado insuficiente para hacerlo pasar. La excepción del logotipo no cubre toda la interfaz.
| Función | Conservar | Posible cambio |
|---|---|---|
| Logotipo aprobado | Archivo original | Ubicación o espacio alrededor |
| Etiqueta pequeña de botón | Texto y tamaño legible | Color de letra o relleno |
| Enlace dentro del texto | Significado y destino | Color y subrayado explícito |
| Acento decorativo | Tono reconocible | Ninguno si no tapa contenido |
Comprueba por separado los estados de puntero, foco y pulsación. Superar una medición de texto no equivale a una auditoría completa: teclado e indicadores no textuales requieren otras comprobaciones.
Un botón naranja con números concretos
Imagina un botón de 16 px con texto blanco sobre `#FF4E00`. Linealiza los canales sRGB, calcula la luminancia relativa y aplica `(más claro + 0.05) / (más oscuro + 0.05)`. El resultado es aproximadamente 3.31:1, insuficiente para texto normal. Negro sobre el mismo fondo da aproximadamente 6.34:1. Para aprobarlo utiliza el resultado sin redondear.
Puedes conservar el naranja con letra oscura, o mantener letra clara y crear un relleno de acción más oscuro. El naranja vivo puede seguir en elementos decorativos. No pidas a Claude que certifique un color a simple vista: solicita candidatos y deja una columna para los cálculos verificados.
Una conversación sobre colores de marca poco accesibles plantea este conflicto práctico. Es evidencia de una necesidad, no de una mejora en conversiones.
Instrucción lista para copiar
Revisa el contraste del texto en el CSS y la captura adjuntos.
El logotipo aprobado está bloqueado: no lo redibujes ni sustituyas toda la paleta.
Botón: fondo #FF4E00, texto #FFFFFF, 16 px normal.
Propón dos opciones: conservar el naranja y oscurecer la letra, o conservar la letra clara y oscurecer el relleno de acción.
Devuelve colores exactos, nombres de variables afectadas, estados normal/puntero/foco y el cambio CSS mínimo.
Si puedes ejecutar código, calcula con la fórmula de luminancia sRGB de WCAG. Si no, marca los cocientes como no verificados y proporciona entradas para una calculadora; no inventes resultados aprobados.
Conserva texto, destinos, espaciado y comportamiento. Subraya los enlaces para que no dependan solo del color.
Separa las comprobaciones pendientes. No declares accesible toda la página por aprobar una pareja.Verifica en el diseño entregado
Aplica una opción en una copia del componente, mírala al tamaño real y recalcula las parejas modificadas. Usa el fondo real, no una mesa blanca. El texto semitransparente exige el color compuesto; sobre un gradiente hay que considerar el rango de fondos correspondiente.
Comprueba ancho reducido y texto ampliado. Confirma que el foco sigue visible y que el estado pulsado no recupera la pareja problemática. Entrega las variables aprobadas junto con la exportación para mantener consistencia después.
Cómo encaja Panelly
Con los colores verificados, explora en Panelly Studio anuncios completos con producto, fondo, titular y CTA. Si el texto cruza una imagen compleja, pide un área de fondo uniforme y revisa la exportación al tamaño final. Esto no presenta Panelly como integración de Opus ni herramienta de certificación.
Consulta desviaciones del estilo de marca para consistencia y revisiones de landing pages para estructura.
Preguntas frecuentes
¿Basta con usar negrita?
La negrita pequeña no se convierte automáticamente en texto grande. Aplica la definición correspondiente y mide la pareja real.
¿Todos los colores deben aprobar sobre blanco?
No. Evalúa las combinaciones que comunican información. Un acento decorativo y un color de acción pueden desempeñar funciones diferentes.
