High Contrast Mode 🎨
Building interfaces that work perfectly in Windows High Contrast Mode and other accessibility modes. Essential for users with low vision, light sensitivity, and visual impairments.
What is High Contrast Mode?
High Contrast Mode is an accessibility feature that changes the color scheme of the operating system to make text and UI elements more visible. It's used by people with low vision, light sensitivity, and certain cognitive disabilities to improve readability and reduce eye strain.
👁️ Low Vision Support
Essential for users with visual impairments who need higher contrast to read content
⚡ Reduced Eye Strain
Helps users with light sensitivity and those working in bright environments
🎯 WCAG Requirement
Required by WCAG 2.1 for level AA compliance and various accessibility laws
High Contrast Fundamentals
Key Principles for High Contrast:
- Don't rely on color alone to convey information
- Use sufficient contrast ratios (4.5:1 for normal text, 3:1 for large text)
- Ensure focus indicators are visible in all contrast modes
- Test with actual high contrast themes and forced colors mode
- Use semantic HTML and proper ARIA attributes
High Contrast Fundamentals Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>High Contrast Mode - Building Accessible High Contrast Interfaces</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
padding: 2rem;
color: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: #ffffff;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.principles-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.principle-card {
background: #2d3748;
border: 2px solid #4a5568;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.contrast-demo {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
margin: 2rem 0;
padding: 2rem;
background: #1a202c;
border-radius: 10px;
}
.good-contrast, .poor-contrast {
padding: 2rem;
border-radius: 8px;
border: 2px solid;
}
.good-contrast {
border-color: #48bb78;
background: #2d3748;
}
.poor-contrast {
border-color: #f56565;
background: #2d3748;
}
.contrast-ratio {
font-size: 0.9rem;
padding: 0.5rem;
border-radius: 4px;
margin: 0.5rem 0;
text-align: center;
}
.ratio-aaa {
background: #48bb78;
color: #000;
}
.ratio-aa {
background: #ed8936;
color: #000;
}
.ratio-fail {
background: #f56565;
color: #fff;
}
.interactive-demo {
background: #2d3748;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
border: 2px solid #4a5568;
}
.button-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.btn {
padding: 1rem 2rem;
border: none;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s ease;
text-align: center;
font-size: 1rem;
}
.btn-good {
background: #000000;
color: #ffffff;
border: 2px solid #ffffff;
}
.btn-poor {
background: #666666;
color: #999999;
border: 1px solid #777777;
}
.form-demo {
display: grid;
gap: 1.5rem;
margin: 2rem 0;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-weight: 600;
color: #ffffff;
}
.form-input {
padding: 1rem;
border: 2px solid;
border-radius: 8px;
font-size: 1rem;
background: #1a202c;
color: #ffffff;
}
.input-good {
border-color: #ffffff;
}
.input-poor {
border-color: #666666;
}
.color-scheme {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.color-card {
padding: 2rem 1rem;
border-radius: 8px;
text-align: center;
font-weight: bold;
border: 2px solid;
}
.hc-black { background: #000000; color: #ffffff; border-color: #ffffff; }
.hc-white { background: #ffffff; color: #000000; border-color: #000000; }
.hc-yellow { background: #ffff00; color: #000000; border-color: #000000; }
.hc-blue { background: #0000ff; color: #ffffff; border-color: #ffffff; }
@media (max-width: 768px) {
.principles-grid {
grid-template-columns: 1fr;
}
.contrast-demo {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🎨 High Contrast Mode</h1>
<p>Building interfaces that work in Windows High Contrast Mode and other accessibility modes</p>
</div>
<!-- Why High Contrast Matters -->
<div class="principles-grid">
<div class="principle-card">
<h3>👁️ Why High Contrast Matters</h3>
<p>High contrast modes help users with low vision, light sensitivity, and certain cognitive disabilities.</p>
<div class="interactive-demo">
<h4>User Scenarios:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li><strong>Low Vision:</strong> Users who need higher contrast to read text</li>
<li><strong>Photophobia:</strong> Users sensitive to bright light</li>
<li><strong>Cognitive Disabilities:</strong> Users who benefit from simplified color schemes</li>
<li><strong>Outdoor Use:</strong> Users accessing content in bright sunlight</li>
<li><strong>Aging Population:</strong> Older users with declining vision</li>
</ul>
</div>
<div style="margin-top: 2rem;">
<h4>Impact Statistics:</h4>
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-top: 1rem;">
<div style="background: #2d3748; padding: 1rem; border-radius: 8px; text-align: center; border: 2px solid #4a5568;">
<div style="font-size: 1.5rem; font-weight: bold; color: #48bb78;">285M</div>
<div style="font-size: 0.9rem;">People with vision impairments worldwide</div>
</div>
<div style="background: #2d3748; padding: 1rem; border-radius: 8px; text-align: center; border: 2px solid #4a5568;">
<div style="font-size: 1.5rem; font-weight: bold; color: #48bb78;">15%</div>
<div style="font-size: 0.9rem;">Users enable high contrast modes</div>
</div>
</div>
</div>
</div>
<!-- Contrast Ratio Examples -->
<div class="principle-card">
<h3>📊 WCAG Contrast Requirements</h3>
<p>Understanding and implementing proper contrast ratios for accessibility.</p>
<div class="contrast-demo">
<div class="good-contrast">
<h4>✅ Good Contrast Examples</h4>
<div style="background: #000000; color: #ffffff; padding: 1rem; margin: 0.5rem 0; border-radius: 4px;">
<strong>Black on White</strong>
<div class="contrast-ratio ratio-aaa">21:1 Ratio (AAA)</div>
</div>
<div style="background: #0056b3; color: #ffffff; padding: 1rem; margin: 0.5rem 0; border-radius: 4px;">
<strong>Dark Blue on White</strong>
<div class="contrast-ratio ratio-aa">7.4:1 Ratio (AA)</div>
</div>
<div style="background: #d4edda; color: #155724; padding: 1rem; margin: 0.5rem 0; border-radius: 4px;">
<strong>Success State</strong>
<div class="contrast-ratio ratio-aa">5.3:1 Ratio (AA)</div>
</div>
</div>
<div class="poor-contrast">
<h4>❌ Poor Contrast Examples</h4>
<div style="background: #f8f9fa; color: #dee2e6; padding: 1rem; margin: 0.5rem 0; border-radius: 4px;">
<strong>Light Gray on White</strong>
<div class="contrast-ratio ratio-fail">1.2:1 Ratio (Fail)</div>
</div>
<div style="background: #6c757d; color: #495057; padding: 1rem; margin: 0.5rem 0; border-radius: 4px;">
<strong>Similar Grays</strong>
<div class="contrast-ratio ratio-fail">1.5:1 Ratio (Fail)</div>
</div>
<div style="background: #ffc107; color: #fff3cd; padding: 1rem; margin: 0.5rem 0; border-radius: 4px;">
<strong>Yellow on Light Yellow</strong>
<div class="contrast-ratio ratio-fail">1.8:1 Ratio (Fail)</div>
</div>
</div>
</div>
</div>
</div>
<!-- High Contrast Button Demo -->
<div class="principle-card">
<h3>🔘 High Contrast Buttons</h3>
<p>Buttons that maintain accessibility in high contrast modes.</p>
<div class="button-grid">
<button class="btn btn-good">
Primary Action
</button>
<button class="btn btn-poor">
Poor Contrast
</button>
<button style="background: #000000; color: #ffff00; border: 2px solid #ffff00;" class="btn">
High Contrast Yellow
</button>
<button style="background: #ffffff; color: #0000ff; border: 2px solid #0000ff;" class="btn">
High Contrast Blue
</button>
</div>
<div class="interactive-demo">
<h4>Button Implementation Tips:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Use borders to ensure visibility in high contrast mode</li>
<li>Avoid relying solely on background colors</li>
<li>Test with both light and dark high contrast themes</li>
<li>Ensure text has sufficient contrast with background</li>
<li>Use semantic HTML for proper accessibility</li>
</ul>
</div>
</div>
<!-- Form Accessibility -->
<div class="principle-card">
<h3>📝 High Contrast Forms</h3>
<p>Creating forms that work in all contrast modes.</p>
<div class="form-demo">
<div class="form-group">
<label class="form-label">Good: High Contrast Input</label>
<input type="text" class="form-input input-good" placeholder="This input has good contrast">
<small style="color: #48bb78;">✓ Visible in all contrast modes</small>
</div>
<div class="form-group">
<label class="form-label">Poor: Low Contrast Input</label>
<input type="text" class="form-input input-poor" placeholder="This input has poor contrast">
<small style="color: #f56565;">✗ May disappear in high contrast mode</small>
</div>
<div class="form-group">
<label class="form-label">Good: Required Field</label>
<input type="email" class="form-input input-good" required placeholder="Required field with asterisk">
<small style="color: #48bb78;">✓ Uses semantic required attribute</small>
</div>
</div>
</div>
<!-- Common High Contrast Schemes -->
<div class="principle-card">
<h3>🎯 Common High Contrast Schemes</h3>
<p>Popular high contrast color combinations used in accessibility modes.</p>
<div class="color-scheme">
<div class="color-card hc-black">
Black on White
</div>
<div class="color-card hc-white">
White on Black
</div>
<div class="color-card hc-yellow">
Yellow on Black
</div>
<div class="color-card hc-blue">
Blue on White
</div>
</div>
<div class="interactive-demo">
<h4>Testing Your Design:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Enable Windows High Contrast Mode</li>
<li>Use browser developer tools to simulate forced colors</li>
<li>Test with color blindness simulators</li>
<li>Check contrast ratios with online tools</li>
<li>Verify with actual users who use high contrast modes</li>
</ul>
</div>
</div>
</div>
</body>
</html>Forced Colors Mode
⚙️ @media (forced-colors: active)
Detect when users have enabled forced colors mode and adapt your design using CSS media queries. This ensures your website respects the user's preferred color scheme.
@media (forced-colors: active) {
button { background: ButtonFace; }
}
🎨 System Colors
Use CSS system color keywords like Canvas, CanvasText, ButtonFace, and ButtonText that automatically adapt to the user's chosen high contrast theme.
background-color: Canvas;
color: CanvasText;
border-color: ButtonText;
Forced Colors Mode Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Forced Colors Mode - CSS Media Queries for High Contrast</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
min-height: 100vh;
padding: 2rem;
color: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: #ffffff;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.tech-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(500px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.tech-card {
background: #2d3748;
border: 2px solid #4a5568;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.code-demo {
background: #1a202c;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
border: 2px solid #4a5568;
font-family: 'Fira Code', monospace;
font-size: 0.9rem;
}
.interactive-demo {
background: #2d3748;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
border: 2px solid #4a5568;
}
.demo-component {
padding: 2rem;
margin: 1rem 0;
border: 2px solid;
border-radius: 8px;
}
.component-normal {
background: #4c51bf;
color: #ffffff;
border-color: #434190;
}
.component-forced {
background: Canvas;
color: CanvasText;
border-color: CanvasText;
}
.button-demo {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.demo-btn {
padding: 1rem 2rem;
border: 2px solid;
border-radius: 8px;
font-weight: 600;
cursor: pointer;
font-size: 1rem;
transition: all 0.2s ease;
}
.btn-primary {
background: #4c51bf;
color: white;
border-color: #434190;
}
.btn-secondary {
background: #718096;
color: white;
border-color: #4a5568;
}
.btn-success {
background: #38a169;
color: white;
border-color: #2f855a;
}
/* Forced Colors Mode Styles */
@media (forced-colors: active) {
.component-forced {
background: Canvas;
color: CanvasText;
border: 2px solid CanvasText;
}
.demo-btn {
background: ButtonFace !important;
color: ButtonText !important;
border: 2px solid ButtonText !important;
}
.btn-primary:focus,
.btn-secondary:focus,
.btn-success:focus {
outline: 2px solid Highlight;
outline-offset: 2px;
}
}
.system-colors {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.system-color {
padding: 1.5rem;
border: 2px solid;
border-radius: 8px;
text-align: center;
font-weight: 600;
}
@media (max-width: 768px) {
.tech-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>⚙️ Forced Colors Mode</h1>
<p>Using CSS media queries to adapt to Windows High Contrast Mode and other forced color schemes</p>
</div>
<!-- Forced Colors Media Query -->
<div class="tech-grid">
<div class="tech-card">
<h3>🎯 @media (forced-colors: active)</h3>
<p>Detect when the user has enabled forced colors mode and adapt your design accordingly.</p>
<div class="code-demo">
<span style="color: #7f8c8d;">/* Default styles */</span><br>
<span style="color: #9b59b6;">.my-component</span> {<br>
<span style="color: #3498db;">background</span>: <span style="color: #2ecc71;">#4c51bf</span>;<br>
<span style="color: #3498db;">color</span>: <span style="color: #2ecc71;">white</span>;<br>
<span style="color: #3498db;">border</span>: <span style="color: #2ecc71;">1px solid #434190</span>;<br>
}<br><br>
<span style="color: #7f8c8d;">/* High Contrast Mode Overrides */</span><br>
@<span style="color: #9b59b6;">media</span> (<span style="color: #3498db;">forced-colors</span>: <span style="color: #2ecc71;">active</span>) {<br>
<span style="color: #9b59b6;">.my-component</span> {<br>
<span style="color: #3498db;">background</span>: <span style="color: #2ecc71;">Canvas</span>;<br>
<span style="color: #3498db;">color</span>: <span style="color: #2ecc71;">CanvasText</span>;<br>
<span style="color: #3498db;">border</span>: <span style="color: #2ecc71;">2px solid CanvasText</span>;<br>
}<br>
}
</div>
<div class="interactive-demo">
<h4>Live Demo:</h4>
<p>Try enabling Windows High Contrast Mode to see the changes</p>
<div class="demo-component component-normal">
<h5>Normal Appearance</h5>
<p>This component uses brand colors and subtle borders.</p>
</div>
<div class="demo-component component-forced">
<h5>Forced Colors Mode</h5>
<p>This component adapts to system colors in high contrast mode.</p>
</div>
</div>
</div>
<!-- System Colors -->
<div class="tech-card">
<h3>🎨 CSS System Colors</h3>
<p>Use system color keywords that adapt to the user's chosen theme.</p>
<div class="system-colors">
<div class="system-color" style="background: Canvas; color: CanvasText; border-color: CanvasText;">
Canvas<br>CanvasText
</div>
<div class="system-color" style="background: ButtonFace; color: ButtonText; border-color: ButtonText;">
ButtonFace<br>ButtonText
</div>
<div class="system-color" style="background: Highlight; color: HighlightText; border-color: HighlightText;">
Highlight<br>HighlightText
</div>
<div class="system-color" style="background: LinkText; color: Canvas; border-color: LinkText;">
LinkText
</div>
</div>
<div class="code-demo">
<span style="color: #7f8c8d;">/* Using system colors */</span><br>
<span style="color: #9b59b6;">.accessible-component</span> {<br>
<span style="color: #3498db;">background-color</span>: <span style="color: #2ecc71;">Canvas</span>;<br>
<span style="color: #3498db;">color</span>: <span style="color: #2ecc71;">CanvasText</span>;<br>
<span style="color: #3498db;">border</span>: <span style="color: #2ecc71;">2px solid CanvasText</span>;<br>
}<br><br>
<span style="color: #9b59b6;">.accessible-button</span> {<br>
<span style="color: #3498db;">background-color</span>: <span style="color: #2ecc71;">ButtonFace</span>;<br>
<span style="color: #3498db;">color</span>: <span style="color: #2ecc71;">ButtonText</span>;<br>
<span style="color: #3498db;">border</span>: <span style="color: #2ecc71;">2px solid ButtonText</span>;<br>
}
</div>
</div>
</div>
<!-- Button Adaptation -->
<div class="tech-card">
<h3>🔘 Adaptive Buttons</h3>
<p>Buttons that work in both normal and high contrast modes.</p>
<div class="button-demo">
<button class="demo-btn btn-primary">
Primary Button
</button>
<button class="demo-btn btn-secondary">
Secondary Button
</button>
<button class="demo-btn btn-success">
Success Button
</button>
</div>
<div class="code-demo">
<span style="color: #7f8c8d;">/* Button with forced colors support */</span><br>
<span style="color: #9b59b6;">.adaptive-button</span> {<br>
<span style="color: #3498db;">padding</span>: <span style="color: #2ecc71;">1rem 2rem</span>;<br>
<span style="color: #3498db;">border</span>: <span style="color: #2ecc71;">2px solid transparent</span>;<br>
<span style="color: #3498db;">border-radius</span>: <span style="color: #2ecc71;">8px</span>;<br>
<span style="color: #3498db;">font-weight</span>: <span style="color: #2ecc71;">600</span>;<br>
<span style="color: #3498db;">cursor</span>: <span style="color: #2ecc71;">pointer</span>;<br>
}<br><br>
@<span style="color: #9b59b6;">media</span> (<span style="color: #3498db;">forced-colors</span>: <span style="color: #2ecc71;">active</span>) {<br>
<span style="color: #9b59b6;">.adaptive-button</span> {<br>
<span style="color: #3498db;">border-color</span>: <span style="color: #2ecc71;">ButtonText</span>;<br>
<span style="color: #3498db;">background</span>: <span style="color: #2ecc71;">ButtonFace</span>;<br>
<span style="color: #3498db;">color</span>: <span style="color: #2ecc71;">ButtonText</span>;<br>
}<br>
}
</div>
</div>
<!-- Focus Management -->
<div class="tech-card">
<h3>🎯 Focus in High Contrast</h3>
<p>Ensuring focus indicators remain visible in all contrast modes.</p>
<div class="code-demo">
<span style="color: #7f8c8d;">/* Focus styles that work in high contrast */</span><br>
<span style="color: #9b59b6;">.focus-element</span>:focus {<br>
<span style="color: #3498db;">outline</span>: <span style="color: #2ecc71;">2px solid #4c51bf</span>;<br>
<span style="color: #3498db;">outline-offset</span>: <span style="color: #2ecc71;">2px</span>;<br>
}<br><br>
@<span style="color: #9b59b6;">media</span> (<span style="color: #3498db;">forced-colors</span>: <span style="color: #2ecc71;">active</span>) {<br>
<span style="color: #9b59b6;">.focus-element</span>:focus {<br>
<span style="color: #3498db;">outline</span>: <span style="color: #2ecc71;">2px solid Highlight</span>;<br>
<span style="color: #3498db;">outline-offset</span>: <span style="color: #2ecc71;">2px</span>;<br>
}<br>
}
</div>
</div>
</div>
</body>
</html>High Contrast Patterns
🏗️ Real-World Implementation Patterns
Practical patterns for common UI components that maintain accessibility in high contrast modes. These patterns ensure your navigation, forms, buttons, and status indicators work for all users.
// Use borders for interactive elements
button { border: 2px solid; }
// Combine color with icons and text
.status { color, icon, border }
// Test with forced colors media query
@media (forced-colors: active) { /* overrides */ }
High Contrast Patterns Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>High Contrast Patterns - Real World Implementation Examples</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
min-height: 100vh;
padding: 2rem;
color: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: #ffffff;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.patterns-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.pattern-card {
background: #2d3748;
border: 2px solid #4a5568;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.component-demo {
background: #1a202c;
padding: 2rem;
border-radius: 10px;
margin: 2rem 0;
border: 2px solid #4a5568;
}
.navigation-demo {
display: flex;
gap: 1rem;
flex-wrap: wrap;
margin: 1rem 0;
}
.nav-item {
padding: 1rem 2rem;
text-decoration: none;
border-radius: 8px;
font-weight: 600;
transition: all 0.2s ease;
border: 2px solid;
}
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.product-card {
background: #2d3748;
padding: 1.5rem;
border-radius: 12px;
border: 2px solid #4a5568;
}
.status-indicators {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 1rem;
margin: 2rem 0;
}
.status-item {
padding: 1rem;
border-radius: 8px;
text-align: center;
font-weight: 600;
border: 2px solid;
}
.form-pattern {
display: grid;
gap: 1.5rem;
margin: 2rem 0;
}
.form-group {
display: flex;
flex-direction: column;
gap: 0.5rem;
}
.form-label {
font-weight: 600;
color: #ffffff;
}
.form-input {
padding: 1rem;
border: 2px solid;
border-radius: 8px;
font-size: 1rem;
background: #1a202c;
color: #ffffff;
}
.alert-demo {
padding: 1.5rem;
border-radius: 8px;
margin: 1rem 0;
border: 2px solid;
}
/* High Contrast Adaptations */
@media (forced-colors: active) {
.nav-item {
background: ButtonFace;
color: ButtonText;
border-color: ButtonText;
}
.product-card {
background: Canvas;
color: CanvasText;
border-color: CanvasText;
}
.status-success {
background: Canvas;
color: CanvasText;
border-color: CanvasText;
}
.status-warning {
background: Canvas;
color: CanvasText;
border-color: CanvasText;
}
.status-error {
background: Canvas;
color: CanvasText;
border-color: CanvasText;
}
.form-input {
background: Field;
color: FieldText;
border-color: FieldText;
}
.alert-success,
.alert-warning,
.alert-error {
background: Canvas;
color: CanvasText;
border-color: CanvasText;
}
}
/* Normal mode styles */
.nav-item {
background: #4c51bf;
color: white;
border-color: #434190;
}
.status-success {
background: #48bb78;
color: #1a202c;
border-color: #38a169;
}
.status-warning {
background: #ed8936;
color: #1a202c;
border-color: #dd6b20;
}
.status-error {
background: #f56565;
color: #1a202c;
border-color: #e53e3e;
}
.form-input {
border-color: #4a5568;
}
.alert-success {
background: #48bb78;
color: #1a202c;
border-color: #38a169;
}
.alert-warning {
background: #ed8936;
color: #1a202c;
border-color: #dd6b20;
}
.alert-error {
background: #f56565;
color: #1a202c;
border-color: #e53e3e;
}
@media (max-width: 768px) {
.patterns-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🏗️ High Contrast Patterns</h1>
<p>Real-world implementation patterns for high contrast accessibility</p>
</div>
<!-- Navigation Pattern -->
<div class="patterns-grid">
<div class="pattern-card">
<h3>🧭 Accessible Navigation</h3>
<p>Navigation that works in all contrast modes with proper focus indicators.</p>
<div class="component-demo">
<nav class="navigation-demo">
<a href="#" class="nav-item">Home</a>
<a href="#" class="nav-item">Products</a>
<a href="#" class="nav-item">Services</a>
<a href="#" class="nav-item">About</a>
<a href="#" class="nav-item">Contact</a>
</nav>
</div>
<div style="background: #1a202c; padding: 1.5rem; border-radius: 8px; margin-top: 1rem;">
<h4>Implementation Tips:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Use borders to ensure visibility in high contrast mode</li>
<li>Provide sufficient padding for touch targets</li>
<li>Test focus states in all contrast themes</li>
<li>Use semantic nav element with proper ARIA labels</li>
</ul>
</div>
</div>
<!-- Status Indicators -->
<div class="pattern-card">
<h3>📊 Status Indicators</h3>
<p>Status messages that convey meaning without relying solely on color.</p>
<div class="status-indicators">
<div class="status-item status-success">
✅ Success
</div>
<div class="status-item status-warning">
⚠️ Warning
</div>
<div class="status-item status-error">
❌ Error
</div>
<div class="status-item" style="background: #4299e1; color: #1a202c; border-color: #3182ce;">
ℹ️ Info
</div>
</div>
<div style="background: #1a202c; padding: 1.5rem; border-radius: 8px; margin-top: 1rem;">
<h4>Best Practices:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Combine color with icons and text labels</li>
<li>Use borders to maintain distinction in high contrast</li>
<li>Ensure text has sufficient contrast with background</li>
<li>Test with color blindness simulators</li>
</ul>
</div>
</div>
</div>
<!-- Product Cards -->
<div class="pattern-card">
<h3>🛍️ Product Cards</h3>
<p>E-commerce cards that maintain accessibility in high contrast modes.</p>
<div class="card-grid">
<div class="product-card">
<h4>Wireless Headphones</h4>
<p style="color: #a0aec0; margin: 0.5rem 0;">Noise-cancelling over-ear headphones</p>
<div style="font-size: 1.5rem; font-weight: bold; color: #48bb78; margin: 1rem 0;">$299</div>
<button style="background: #4c51bf; color: white; border: 2px solid #434190; padding: 1rem; border-radius: 8px; width: 100%; font-weight: 600; cursor: pointer;">
Add to Cart
</button>
</div>
<div class="product-card">
<h4>Smart Watch</h4>
<p style="color: #a0aec0; margin: 0.5rem 0;">Fitness tracking and notifications</p>
<div style="font-size: 1.5rem; font-weight: bold; color: #48bb78; margin: 1rem 0;">$199</div>
<button style="background: #4c51bf; color: white; border: 2px solid #434190; padding: 1rem; border-radius: 8px; width: 100%; font-weight: 600; cursor: pointer;">
Add to Cart
</button>
</div>
<div class="product-card">
<h4>Bluetooth Speaker</h4>
<p style="color: #a0aec0; margin: 0.5rem 0;">Portable waterproof speaker</p>
<div style="font-size: 1.5rem; font-weight: bold; color: #48bb78; margin: 1rem 0;">$149</div>
<button style="background: #4c51bf; color: white; border: 2px solid #434190; padding: 1rem; border-radius: 8px; width: 100%; font-weight: 600; cursor: pointer;">
Add to Cart
</button>
</div>
</div>
</div>
<!-- Form Patterns -->
<div class="pattern-card">
<h3>📝 Accessible Forms</h3>
<p>Forms that work perfectly in all contrast modes and accessibility settings.</p>
<div class="form-pattern">
<div class="form-group">
<label class="form-label">Full Name *</label>
<input type="text" class="form-input" placeholder="Enter your full name" required>
<small style="color: #a0aec0;">Required field</small>
</div>
<div class="form-group">
<label class="form-label">Email Address *</label>
<input type="email" class="form-input" placeholder="Enter your email" required>
<small style="color: #a0aec0;">We'll never share your email</small>
</div>
<div class="form-group">
<label class="form-label">Message</label>
<textarea class="form-input" placeholder="Enter your message" rows="4"></textarea>
</div>
<button style="background: #4c51bf; color: white; border: 2px solid #434190; padding: 1rem 2rem; border-radius: 8px; font-weight: 600; cursor: pointer; font-size: 1rem;">
Submit Form
</button>
</div>
</div>
<!-- Alert Patterns -->
<div class="pattern-card">
<h3>🚨 Alert Messages</h3>
<p>Alert components that convey urgency without relying on color alone.</p>
<div class="form-pattern">
<div class="alert-demo alert-success">
<strong>✅ Success!</strong> Your changes have been saved successfully.
</div>
<div class="alert-demo alert-warning">
<strong>⚠️ Warning!</strong> Your storage is almost full. Please free up some space.
</div>
<div class="alert-demo alert-error">
<strong>❌ Error!</strong> There was a problem processing your request. Please try again.
</div>
</div>
<div style="background: #1a202c; padding: 1.5rem; border-radius: 8px; margin-top: 1rem;">
<h4>Alert Best Practices:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Use icons alongside color coding</li>
<li>Include clear, descriptive text</li>
<li>Ensure borders are visible in high contrast</li>
<li>Provide appropriate ARIA roles and labels</li>
<li>Make alerts dismissible when appropriate</li>
</ul>
</div>
</div>
</div>
</body>
</html>Testing & Tools
🔍 Browser DevTools
Use browser developer tools to emulate forced colors mode and test your designs without enabling system-wide high contrast
🧪 Manual Testing
Enable actual Windows High Contrast Mode and test navigation, forms, and interactive elements with keyboard-only input
🤖 Automated Testing
Integrate high contrast testing into your CI/CD pipeline with tools like axe-core and Lighthouse accessibility audits
Testing & Tools Implementation
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Testing & Tools - High Contrast Accessibility Testing</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', sans-serif;
line-height: 1.6;
background: linear-gradient(135deg, #2d3748 0%, #4a5568 100%);
min-height: 100vh;
padding: 2rem;
color: #ffffff;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
.header {
text-align: center;
margin-bottom: 3rem;
color: #ffffff;
}
.header h1 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
}
.testing-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.testing-card {
background: #2d3748;
border: 2px solid #4a5568;
border-radius: 15px;
padding: 2rem;
box-shadow: 0 10px 30px rgba(0,0,0,0.3);
}
.checklist {
background: #1a202c;
padding: 2rem;
border-radius: 10px;
margin: 1rem 0;
border: 2px solid #4a5568;
}
.checklist-item {
display: flex;
align-items: center;
gap: 1rem;
margin: 0.5rem 0;
padding: 0.5rem;
}
.tool-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 1.5rem;
margin: 2rem 0;
}
.tool-card {
background: #4a5568;
padding: 1.5rem;
border-radius: 10px;
text-align: center;
border: 2px solid #718096;
}
.browser-demo {
background: #1a202c;
color: #e2e8f0;
padding: 1.5rem;
border-radius: 8px;
font-family: 'Fira Code', monospace;
margin: 1rem 0;
border: 2px solid #4a5568;
}
.testing-demo {
background: #4a5568;
border-left: 4px solid #ed8936;
padding: 1.5rem;
margin: 1rem 0;
border-radius: 5px;
}
.keyboard-test {
background: #48bb78;
border-left: 4px solid #38a169;
padding: 1.5rem;
margin: 1rem 0;
border-radius: 5px;
color: #1a202c;
}
@media (max-width: 768px) {
.testing-grid {
grid-template-columns: 1fr;
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>🔧 Testing & Tools</h1>
<p>Comprehensive testing strategies and tools for high contrast accessibility</p>
</div>
<!-- Testing Checklist -->
<div class="testing-grid">
<div class="testing-card">
<h3>✅ High Contrast Testing Checklist</h3>
<p>Essential tests to ensure your website works in high contrast modes.</p>
<div class="checklist">
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Enable Windows High Contrast Mode and test navigation</span>
</div>
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Check all text has sufficient contrast (4.5:1 minimum)</span>
</div>
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Verify focus indicators are visible in all themes</span>
</div>
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Test with browser's forced colors emulation</span>
</div>
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Ensure images have proper alt text and Don't rely on color</span>
</div>
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Check form controls are usable and clearly visible</span>
</div>
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Verify interactive elements have proper borders</span>
</div>
<div class="checklist-item">
<span style="color: #48bb78; font-weight: bold;">✓</span>
<span>Test with screen readers in high contrast mode</span>
</div>
</div>
</div>
<!-- Testing Tools -->
<div class="testing-card">
<h3>🛠️ High Contrast Testing Tools</h3>
<p>Essential tools for testing high contrast accessibility.</p>
<div class="tool-grid">
<div class="tool-card">
<h4>Windows HC Mode</h4>
<p>Native high contrast mode testing</p>
</div>
<div class="tool-card">
<h4>Browser DevTools</h4>
<p>Forced colors emulation</p>
</div>
<div class="tool-card">
<h4>axe DevTools</h4>
<p>Automated contrast testing</p>
</div>
<div class="tool-card">
<h4>Color Contrast Analyzer</h4>
<p>Contrast ratio checking</p>
</div>
<div class="tool-card">
<h4>WAVE</h4>
<p>Web accessibility evaluation</p>
</div>
<div class="tool-card">
<h4>Lighthouse</h4>
<p>Accessibility audits</p>
</div>
</div>
</div>
</div>
<!-- Browser DevTools Demo -->
<div class="testing-card">
<h3>🔍 Browser DevTools for High Contrast</h3>
<p>Using browser developer tools to test forced colors mode.</p>
<div class="browser-demo">
<span style="color: #a0aec0;">// Chrome/Edge DevTools - Rendering Tab</span><br>
1. Press F12 to open DevTools<br>
2. Press Ctrl+Shift+P (Cmd+Shift+P on Mac)<br>
3. Type "Show Rendering" and select it<br>
4. In the Rendering tab, find "Emulate CSS media feature forced-colors"<br>
5. Select "active" from the dropdown<br><br>
<span style="color: #a0aec0;">// Firefox Developer Tools</span><br>
1. F12 → Inspector tab<br>
2. Click "Toggle Accessibility Features" in toolbar<br>
3. Check "High contrast" or "Forced colors"<br>
4. Use "Accessibility" tab for detailed analysis
</div>
</div>
<!-- Manual Testing -->
<div class="testing-card">
<h3>👨💻 Manual Testing Procedures</h3>
<p>Step-by-step manual testing for high contrast accessibility.</p>
<div class="testing-demo">
<h4>Windows High Contrast Mode Testing:</h4>
<ol style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Open Windows Settings → Ease of Access → High contrast</li>
<li>Turn on "Turn on high contrast"</li>
<li>Choose a high contrast theme (try multiple themes)</li>
<li>Navigate your website using only keyboard</li>
<li>Check all interactive elements are visible</li>
<li>Verify text is readable and has sufficient contrast</li>
<li>Test forms, buttons, links, and navigation</li>
<li>Check focus indicators are clearly visible</li>
</ol>
</div>
<div class="keyboard-test">
<h4>Quick Contrast Check:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Can you read all text without straining?</li>
<li>Are interactive elements clearly distinguishable?</li>
<li>Do focus indicators stand out?</li>
<li>Are form controls properly labeled and visible?</li>
<li>Do images and icons convey meaning without color?</li>
<li>Is the visual hierarchy maintained?</li>
</ul>
</div>
</div>
<!-- Automated Testing -->
<div class="testing-card">
<h3>🤖 Automated High Contrast Testing</h3>
<p>Using automated tools to catch high contrast accessibility issues.</p>
<div class="browser-demo">
<span style="color: #a0aec0;">// axe-core contrast testing example</span><br>
<span style="color: #9b59b6;">const</span> axe = <span style="color: #3498db;">require</span>(<span style="color: #2ecc71;">'axe-core'</span>);<br><br>
axe.<span style="color: #3498db;">run</span>(document, {<br>
runOnly: {<br>
type: <span style="color: #2ecc71;">'rule'</span>,<br>
values: [<span style="color: #2ecc71;">'color-contrast'</span>, <span style="color: #2ecc71;">'link-in-text-block'</span>]<br>
}<br>
}, (err, results) => {<br>
<span style="color: #9b59b6;">if</span> (err) <span style="color: #9b59b6;">throw</span> err;<br>
<span style="color: #3498db;">console</span>.log(results.violations);<br>
});<br><br>
<span style="color: #a0aec0;">// Common high contrast related violations:</span><br>
<span style="color: #a0aec0;">// - color-contrast</span><br>
<span style="color: #a0aec0;">// - image-alt</span><br>
<span style="color: #a0aec0;">// - link-name</span><br>
<span style="color: #a0aec0;">// - button-name</span>
</div>
</div>
<!-- User Testing -->
<div class="testing-card">
<h3>👥 User Testing Strategies</h3>
<p>Involving real users in high contrast accessibility testing.</p>
<div style="background: #1a202c; padding: 1.5rem; border-radius: 8px; margin-top: 1rem;">
<h4>User Testing Best Practices:</h4>
<ul style="margin: 1rem 0; padding-left: 1.5rem;">
<li>Recruit users who actually use high contrast modes</li>
<li>Test with users who have various visual impairments</li>
<li>Observe how users navigate with keyboard only</li>
<li>Ask about pain points and confusion</li>
<li>Test on different devices and browsers</li>
<li>Include users with different high contrast theme preferences</li>
</ul>
</div>
</div>
</div>
</body>
</html>Practical Applications & Best Practices
✅ Do's for High Contrast
- Use the forced-colors media query to adapt your design
- Test with actual Windows High Contrast Mode enabled
- Use borders for interactive elements and form controls
- Ensure focus indicators are visible in all themes
- Combine color with icons, patterns, or text labels
- Use semantic HTML and proper ARIA attributes
❌ Don'ts for High Contrast
- Don't rely on background images for important content
- Avoid using color alone to convey meaning or status
- Don't remove outline styles without providing alternatives
- Avoid low contrast text and UI elements
- Don't assume your brand colors will work in high contrast
- Avoid complex gradients that may not translate well
💡 Pro Tips for High Contrast Accessibility
Development:
- Use CSS custom properties for easy theme switching
- Implement forced colors media queries progressively
- Test with multiple high contrast themes (light and dark)
- Use outline-offset for better focus indicator spacing
- Combine outline with border for fallback support
Design:
- Design with high contrast in mind from the start
- Create a high contrast version of your design system
- Use sufficient padding and spacing for touch targets
- Ensure visual hierarchy is maintained in high contrast
- Test designs with color blindness simulators
Ready to Master High Contrast? 🎨
Start building interfaces that work perfectly for users with visual impairments and light sensitivity. High contrast accessibility isn't just about compliance - it's about creating inclusive experiences that work for everyone, regardless of their visual abilities.