Forced Colors Mode
Modalità Colori Forzati
La modalità colori forzati utilizza una palette di sistema scelta dall'utente invece di molti colori della pagina. Questo può rendere più facile distinguere controlli e testo.
@media (forced-colors: active) -> system colors + visible shape and statebackground + box-shadowButtonText · ButtonFace · borderoutline: 2px@media (forced-colors: active) -> system colors + visible shape and stateA11YUn altro esempio
Un pulsante perde il suo background e ombra originali. Il suo bordo, testo e indicatore di focus mostrano ancora la forma e lo stato.
Parti principali
- 01Tavolozza dell'autore
- 02Palette forzata dall'utente
- 03Bordo visibile
- 04Colore del sistema
- 05Indicatore di messa a fuoco
- 06Eccezione di regolazione del colore
Usalo quando
Testa i controlli con colori forzati attivi. Mantieni visibili i confini importanti e utilizza i colori di sistema per gli aggiustamenti necessari.
Non usarlo quando
Non dipendere solo dal colore o dall'ombra del riquadro. Usa forced-color-adjust none solo quando preservare il colore è essenziale.
Nome usato nel codice
@media (forced-colors: active) -> system colors + visible shape and state Prima di spedire
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 Modalità Colori Forzati (Forced Colors Mode). User context: Un pulsante perde il suo background e ombra originali. Il suo bordo, testo e indicatore di focus mostrano ancora la forma e lo stato. Recommended pattern: Modalità Colori Forzati (Forced Colors Mode). Why it fits: Testa i controlli con colori forzati attivi. Mantieni visibili i confini importanti e utilizza i colori di sistema per gli aggiustamenti necessari. Do not use it when: Non dipendere solo dal colore o dall'ombra del riquadro. Usa forced-color-adjust none solo quando preservare il colore è essenziale. 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 formale può ancora essere una bozza, un release candidate o la versione finale. Controlla il suo stato e il supporto per browser o piattaforma. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Controlla questa richiesta
Review how Modalità Colori Forzati (Forced Colors Mode) is used now. Definition: La modalità colori forzati utilizza una palette di sistema scelta dall'utente invece di molti colori della pagina. Questo può rendere più facile distinguere controlli e testo. 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.