Intermediate LevelCSS & Modern Layouts
How do you support Windows High Contrast Mode with forced-colors?
❓ Interview Prompt: Explain @media (forced-colors: active) and system color keywords for accessibility.
Windows High Contrast Mode overrides all colors with system-defined high-contrast palettes. @media (forced-colors: active) lets you adjust styles for this mode:
System Color Keywords:
•
Canvas — background color•
CanvasText — foreground text color•
LinkText — hyperlink color•
ButtonFace / ButtonText — button colors•
Highlight / HighlightText — selected item colorsCommon Fixes:
•
Add visible borders where you relied only on background-color differences.
•
Use
forced-color-adjust: none sparingly to opt out for specific elements (like syntax highlighting).Code Implementation Example
css
@media (forced-colors: active) {
.btn {
border: 2px solid ButtonText; /* Visible in high contrast */
}
/* Preserve syntax highlighting colors */
pre code {
forced-color-adjust: none;
}
}💡High contrast mode support with forced-colors media query.
🎯 Interview Key Takeaway
Test in Windows High Contrast Mode and add visible borders where color alone distinguishes elements.
#High Contrast#forced-colors#Accessibility#Intermediate
Back to all CSS & Modern Layouts Questions→