Color

Color accesible

No uses solo el color para indicar la presencia de un componente de la interfaz de usuario o su estado: Usa iconografía o formas para ayudar a diferenciar. No indiques el éxito o los errores SOLO con color. Usa íconos o texto.

<!-- Good: Denotes state without colors alone -->
<div class="error-msg">
  <span aria-hidden="true">❌</span>
  <span>The password entered was invalid.</span>
</div>

Contraste

• Estándares de contraste mínimo: Mantén una proporción de 4.5:1 para el texto normal y de 3:1 para el texto o los íconos grandes.
• Garantiza los estándares de contraste de elementos que no son de texto: Mantén una proporción de contraste mínima de 3:1 para los límites y estados de los componentes de la interfaz de usuario.
  • Esto incluye elementos visuales (bordes, fondos, sombras de cuadros, subrayados) que forman el límite o indican la presencia de un componente de la IU (p.ej., bordes de campos de entrada).
  • Esto también incluye elementos visuales que indican estados activos dentro de un componente (p.ej., marcas de verificación de casillas de verificación o controles deslizantes de interruptores).
  • Advertencia: Cumplir con el contraste de 3:1 para elementos no textuales puede ser un desafío para los diseños minimalistas. Los gradientes suaves o las sombras sutiles hacia adentro o hacia afuera pueden suavizar los límites visuales y, al mismo tiempo, cumplir con los requisitos de accesibilidad.
• Usa prefers-contrast solo cuando esté justificado: Usa @media (prefers-contrast: more) cuando el diseño use detalles de bajo contraste (p. ej., bordes sutiles, texto secundario atenuado) que deban reforzarse. La mayoría de los sitios que ya cumplen con el contraste de referencia no lo necesitarán.

Esquemas de colores claros y oscuros

• Admite esquemas de colores claros y oscuros: Respeta @media (prefers-color-scheme: dark) y vincúlalo con la propiedad de CSS color-scheme para que coincidan los controles de formulario, las barras de desplazamiento y otras superficies renderizadas por el UA. Consulta Modo oscuro para obtener más detalles.

Modo de colores forzados

• Compatibilidad con el modo de colores forzados: En el modo de colores forzados (contraste alto en Windows), el navegador anula los colores del autor con palabras clave del sistema y quita background-image, box-shadow y border-image. Define resguardos de colores del sistema para los tokens de color con @media (forced-colors: active).
• Usa forced-color-adjust: none solo cuando el color sea información esencial (resaltador de sintaxis, muestra del selector de color). NO uses forced-color-adjust: none solo para preservar la estética.
• No confíes en background-image, box-shadow ni border-image para transmitir bordes, separadores o estados: Desaparecen en los colores forzados (y, a menudo, también en la impresión). Si es necesario, asegúrate de que haya una alternativa en el modo de colores forzados, como outline o border con palabras clave de color del sistema (CanvasText, LinkText, ButtonText, Highlight, GrayText, etcétera).

Genera matices

Antes de generar matices de forma dinámica, verifica si puedes usar un token de diseño existente y predefinido. Esto permite un control mucho mayor por parte del diseñador y garantiza la coherencia.

Si necesitas generar colores más claros o más oscuros de forma dinámica, haz lo siguiente:

• NO ajustes solo el canal de luminosidad en oklch/oklab o lch/lab, p.ej., oklab(from var(--primary) 0.9 a b). Si bien, en teoría, esa es la forma correcta, los navegadores aún no implementan la asignación de gama, por lo que el color resultante es impredecible.
• Puedes usar color-mix() para mezclar con blanco o negro (preferiblemente en oklab). Esto mantiene el color dentro de la gama de forma segura, pero tiende a desaturar los colores en exceso y producir tonos y matices deslavados.
• PUEDES combinar el ajuste de luminosidad con cualquiera de los otros métodos (p.ej., color-mix(in oklab, oklch(from var(--primary) 0.9 c h), white 30%)) para lograr un equilibrio entre ambos, pero evita superar el 30% en el ajuste de luminosidad.