Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
Some users have low vision or color blindness
Detects system high contrast preference
Increase color contrast for better visibility
Make borders and text more prominent
Simple @media query to implement
Helps users with visual impairments
User hasn't set any preference
Use your normal color schemeUser wants higher contrast
Use darker/brighter colors, thicker bordersUser wants lower contrast (rare)
Use softer, muted colorsUser has custom contrast settings
Let browser handle it/* Normal styling */
.card {
background: #f3f4f6;
border: 1px solid #e5e7eb;
color: #6b7280;
}
/* High contrast mode - increase visibility */
@media (prefers-contrast: more) {
.card {
background: #ffffff;
border: 3px solid #000000; /* Thicker, darker border */
color: #000000; /* Pure black text */
}
}/* Normal text */
.text {
color: #6b7280;
}
h1 {
color: #1f2937;
}
/* High contrast - use pure black/white */
@media (prefers-contrast: more) {
.text {
color: #000000;
font-weight: 500; /* Slightly bolder */
}
h1 {
color: #000000;
border-bottom: 3px solid #000000;
}
}/* Normal button */
.button {
background: #3b82f6;
color: white;
border: none;
}
/* High contrast button - clear boundaries */
@media (prefers-contrast: more) {
.button {
background: #000000;
color: #ffffff;
border: 3px solid #000000;
outline: 2px solid #ffffff;
outline-offset: 2px;
}
.button:hover {
background: #ffffff;
color: #000000;
outline-color: #000000;
}
}<div class="container">
<h2>User Interface</h2>
<p class="description">Enable High Contrast mode in your OS to see changes</p>
<div class="cards">
<div class="card">
<h3>Profile Settings</h3>
<p>Manage your account preferences and privacy settings</p>
<button class="btn">Edit Profile</button>
</div>
<div class="card">
<h3>Notifications</h3>
<p>Control how and when you receive updates</p>
<button class="btn">Configure</button>
</div>
<div class="card">
<h3>Security</h3>
<p>Two-factor authentication and password settings</p>
<button class="btn">Manage</button>
</div>
</div>
<div class="info">
<strong>High Contrast Mode:</strong> Borders, text, and buttons become more visible
</div>
</div>Loading preview...
<div class="container">
<form class="form">
<h2>Contact Form</h2>
<div class="field">
<label for="name">Full Name</label>
<input type="text" id="name" placeholder="John Doe">
</div>
<div class="field">
<label for="email">Email Address</label>
<input type="email" id="email" placeholder="john@example.com">
</div>
<div class="field">
<label for="message">Message</label>
<textarea id="message" rows="4" placeholder="Your message..."></textarea>
</div>
<button type="submit">Send Message</button>
</form>
</div>Loading preview...
Make inputs and labels more visible
Ensure clear boundaries and states
Increase text darkness and weight
Make element boundaries more prominent
🪟 Windows: Settings → Ease of Access → High Contrast → Turn on high contrast
🍎 Mac: System Preferences → Accessibility → Display → Increase contrast
🍏 iOS: Settings → Accessibility → Display & Text Size → Increase Contrast
🤖 Android: Settings → Accessibility → High contrast text
⚠️ Good but Growing: prefers-contrast is supported in Chrome 96+, Edge 96+, and Safari 14.1+. Firefox support is limited. Always provide good default contrast as a fallback!