Forced Colors Mode
Mode couleurs forcées
Le mode couleurs forcées utilise une palette système choisie par l'utilisateur au lieu de nombreuses couleurs de page. Cela peut rendre les contrôles et le texte plus faciles à distinguer.
@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 autre exemple
Un bouton perd son arrière-plan auteur et son ombre. Sa bordure, son texte et son indicateur de focus montrent toujours sa forme et son état.
Parties principales
- 01Palette de l'auteur
- 02Palette imposée par l'utilisateur
- 03Bord visible
- 04Couleur du système
- 05Indicateur de focus
- 06Exception de réglage des couleurs
Utilisez-le lorsque
Testez les contrôles avec les couleurs forcées activées. Gardez les limites importantes visibles et utilisez les couleurs système pour les ajustements nécessaires.
Ne l'utilisez pas lorsque
Ne vous fiez pas uniquement à la couleur ou à l’ombre des boîtes. Utilisez forced-color-adjust none seulement lorsque la préservation de la couleur est essentielle.
Nom utilisé dans le code
@media (forced-colors: active) -> system colors + visible shape and state Avant d'expédier
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 Mode couleurs forcées (Forced Colors Mode). User context: Un bouton perd son arrière-plan auteur et son ombre. Sa bordure, son texte et son indicateur de focus montrent toujours sa forme et son état. Recommended pattern: Mode couleurs forcées (Forced Colors Mode). Why it fits: Testez les contrôles avec les couleurs forcées activées. Gardez les limites importantes visibles et utilisez les couleurs système pour les ajustements nécessaires. Do not use it when: Ne vous fiez pas uniquement à la couleur ou à l’ombre des boîtes. Utilisez forced-color-adjust none seulement lorsque la préservation de la couleur est essentielle. 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 document officiel peut quand même être un brouillon, un release candidate, ou la version finale. Vérifie son statut et sa compatibilité avec le navigateur ou la plateforme. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Vérifiez cette demande
Review how Mode couleurs forcées (Forced Colors Mode) is used now. Definition: Le mode couleurs forcées utilise une palette système choisie par l'utilisateur au lieu de nombreuses couleurs de page. Cela peut rendre les contrôles et le texte plus faciles à distinguer. 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.