Crear una paleta de colores legible para el modo claro

Definir una jerarquía contenida de superficies

Empieza con un lienzo y una o dos superficies de panel. El blanco puro puede ser panel y un neutro algo más oscuro separar el fondo, pero cada casi blanco adicional crea una distinción que el usuario aprende y el equipo mantiene. Asigna funciones como canvas, panel, raised panel o selected region. No construyas la jerarquía solo con mínimas diferencias RGB que desaparecen en otra pantalla o bajo reflejos. Espaciado, agrupación, encabezados, bordes y elevación deben reforzar la estructura. Documenta qué tokens de primer plano están permitidos sobre cada superficie antes de que los componentes improvisen combinaciones.

Las superficies neutras no tienen que ser perfectamente acromáticas, pero cualquier matiz debe ser deliberado y coherente. Una tendencia cálida o fría modifica la relación con bordes, sombras, imágenes y acento. Comprueba la paleta en pantallas calibradas y corrientes sin prometer percepción idéntica para todas las personas. No uses una superficie teñida como única señal de éxito, advertencia o error. El agente de usuario puede sustituir colores en forced-colors, por lo que HTML semántico y estructura visible deben sobrevivir. El tema claro sigue siendo comprensible si se reducen o eliminan diferencias decorativas de fondo.

Contratar la legibilidad de los niveles de texto

Define texto principal, secundario, atenuado e inverso solo cuando cada nivel tenga un uso documentado. El principal lleva contenido; el secundario lo apoya; el atenuado puede servir para metadatos, pero conserva contraste suficiente con su tamaño y peso reales. El criterio 1.4.3 de WCAG 2.2 exige al menos 4,5:1 para texto normal y 3:1 para texto grande según su definición, con excepciones especificadas. Una etiqueta no queda exenta porque el diseño la llame sutil. El placeholder también comunica información y no debería ser la única etiqueta disponible para un campo.

:root {
  --surface-canvas: #f8fafc;
  --surface-panel: #ffffff;
  --text-primary: #0f172a;
  --text-muted: #475569;
  --border-default: #cbd5e1;
  --accent: #4338ca;
  --focus-ring: #2563eb;
}

Usar bordes y elevación para tareas reales

Los bordes separan paneles, identifican campos o decoran. El requisito depende de la función. El contraste no textual de WCAG exige 3:1 respecto de colores adyacentes para información visual necesaria al identificar componentes y estados, con excepciones definidas. Un divisor decorativo difiere del único contorno visible de una entrada. No oscurezcas todas las líneas automáticamente; identifica límites esenciales y aporta evidencia suficiente. Elevación y sombras ayudan a agrupar, pero una sombra suave puede desaparecer con alto contraste, impresión, zoom o luz ambiental intensa. La estructura no debe depender únicamente de ella.

• Superficies canvas, panel y raised con parejas de texto documentadas.
• Texto principal, secundario y atenuado ligado a funciones concretas.
• Bordes esenciales e indicadores de foco comprobados contra colores adyacentes.
• Parejas accent/on-accent y variantes de acento sobre superficie.

Tratar los acentos como roles emparejados

Un acento no es un valor universalmente válido. Trata fondos accent y sus primeros planos on-accent como una pareja probada, y prueba por separado texto o iconos acentuados sobre superficies claras. Un color saturado que funciona como fondo de botón grande puede fallar como texto pequeño sobre blanco. Los enlaces requieren una indicación distinguible en contexto, incluidos los estados de sobrevuelo y visitado cuando corresponda; el color solo puede ser insuficiente junto al texto. Los estados necesitan texto, iconos, etiquetas o patrones que mantengan significado. Las acciones destructivas se distinguen con redacción e interacción, no únicamente con matiz rojo.

Diseñar foco y estados interactivos

El foco de teclado debe ser visible. Un anillo de foco contrasta con colores adyacentes en todos sus estados, no se recorta por overflow ni se sustituye por un cambio de tono sutil. :focus-visible ayuda a ajustarse a la modalidad de entrada, conservando una solución de respaldo según la política de navegadores. Los estados de sobrevuelo, activo, seleccionado, deshabilitado y de validación necesitan parejas deliberadas. Puede haber excepciones específicas para componentes inactivos, pero reducir el contraste sin criterio suele dañar la legibilidad. No apliques un estilo de deshabilitación a contenido que aún sea importante para completar la tarea.

.card {
  color: var(--text-primary);
  background: var(--surface-panel);
  border: 1px solid var(--border-default);
}

.control:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 2px;
}

Medir contraste después de componer

Los cálculos de contraste usan colores renderizados finales. Si texto o borde tiene alfa, compón primero sobre la superficie real y después calcula luminancia relativa. Un panel translúcido sobre una imagen produce muchos fondos, así que medir solo sobre blanco no representa el caso. En gradientes se revisan puntos pertinentes bajo el contenido. El suavizado puede hacer que la tipografía fina parezca más clara, aunque el cálculo normativo use colores especificados; la revisión práctica todavía comprueba tipografía con zoom normal y plataformas compatibles. Conserva valores fuente y un informe reproducible para reevaluar cambios posteriores.

• Mide texto normal con el criterio 4,5:1 donde sea aplicable.
• Mide texto grande y límites no textuales esenciales con criterios 3:1 aplicables.
• Compón cada primer plano translúcido sobre su fondo real.
• Inspecciona los estados de foco, sobrevuelo, selección, deshabilitación, error y forced-colors.

Validar el tema en pantallas completas

Valida pantallas completas, no solo una página de tokens. Incluye formularios, tablas, navegación, diálogos, vacíos, errores, selecciones, orden de foco, zoom y cadenas localizadas largas. Ejecuta reglas automáticas y después revisa manualmente imágenes, gradientes, transparencia, iconos y semántica. Prueba luz ambiental intensa, menor diferenciación cromática, forced-colors y escalado de texto sin afirmar que una simulación reproduce todas las discapacidades. Registra fallos con pareja y estado exactos. El tema está listo cuando sus roles siguen claros y el contenido esencial permanece perceptible en los contextos compatibles.