Forced Colors Mode
Modo de colores forzados
El modo de colores forzados usa una paleta del sistema elegida por el usuario en lugar de muchos colores de la página. Esto puede hacer que los controles y el texto sean más fáciles de distinguir.
@media (forced-colors: active) -> system colors + visible shape and statebackground + box-shadowButtonText · ButtonFace · borderoutline: 2px@media (forced-colors: active) -> system colors + visible shape and stateA11YOtro ejemplo
Un botón pierde su fondo y sombra de autor. Su borde, texto e indicador de foco todavía muestran su forma y estado.
Partes principales
- 01Paleta de autor
- 02Paleta forzada por el usuario
- 03Borde visible
- 04Color del sistema
- 05Indicador de foco
- 06Excepción de ajuste de color
Úsalo cuando
Prueba los controles con colores forzados activados. Mantén visibles los límites importantes y usa colores del sistema para ajustes necesarios.
No lo uses cuando
No dependa únicamente del color o la sombra de la caja. Use forced-color-adjust none solo cuando sea esencial preservar el color.
Nombre usado en código
@media (forced-colors: active) -> system colors + visible shape and state Antes de lanzarlo
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Modo de colores forzados (Forced Colors Mode). User context: Un botón pierde su fondo y sombra de autor. Su borde, texto e indicador de foco todavía muestran su forma y estado. Recommended pattern: Modo de colores forzados (Forced Colors Mode). Why it fits: Prueba los controles con colores forzados activados. Mantén visibles los límites importantes y usa colores del sistema para ajustes necesarios. Do not use it when: No dependa únicamente del color o la sombra de la caja. Use forced-color-adjust none solo cuando sea esencial preservar el color. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Un documento formal aún puede ser un borrador, un release candidate o una versión final. Revisa su estado y la compatibilidad con tu navegador o plataforma. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Revisa esta petición
Review how Modo de colores forzados (Forced Colors Mode) is used now. Definition: El modo de colores forzados usa una paleta del sistema elegida por el usuario en lugar de muchos colores de la página. Esto puede hacer que los controles y el texto sean más fáciles de distinguir. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.