Keyboard and color · 20
Survive forced colors
Gradients and shadows can disappear in a forced-color palette, taking icons and boundaries with them.
What to do
- Add an @media (forced-colors: active) repair for the button and icon.
- Use system colors and a real visible border; do not disable forced-color adjustment.
- Remove the icon background image in forced colors and reveal a system-colored fallback.
Result
Run the checks
Edit the HTML and select “Check solution”. The preview updates automatically.
If you are stuck
Use ButtonFace and ButtonText. Replace the gradient with background-image: none and let the existing glyph carry the icon.