High Contrast Mode के लिए Design: Windows, macOS, और Web

High contrast mode web applications में सबसे अधिक broken accessibility features में से एक है। High contrast mode आपके design system के सावधानी से चुने गए रंगों को high-contrast system colors के एक छोटे set से replace करता है। Custom color palettes, gradients, box shadows, और background-image overlays जो information convey करते हैं, गायब हो जाते हैं।

High contrast mode पर निर्भर users के लिए — primarily कम दृष्टि वाले लोग, photophobia, या कुछ cognitive conditions वाले — यह preference नहीं है। यह usability के लिए एक requirement है।

High Contrast Mode क्या है और कौन इसका उपयोग करता है

High contrast mode एक operating system-level accessibility feature है जो application और website color schemes को high-contrast alternatives से override करता है।

Windows High Contrast Mode

Windows High Contrast Mode सबसे aggressive implementation है। Windows चार built-in high contrast themes प्रदान करता है: - High Contrast Black: Near-black #000000 background, white #FFFFFF text - High Contrast White: Near-white background, dark text - High Contrast #1: Dark blue-black #1F1F1F background with yellow text - High Contrast #2: Distinct accent colors के साथ dark background पर variations

macOS Increase Contrast

macOS कम aggressive approach लेता है। "Increase Contrast" UI controls — borders, separators, और buttons — की visual prominence बढ़ाता है।

High Contrast Mode पर कौन Rely करता है

• Low vision वाले लोग जो standard contrast ratios (WCAG AA-compliant भी) comfortable reading के लिए insufficient पाते हैं
• Photophobia (light sensitivity) वाले लोग
• Color vision deficiency के कुछ रूपों वाले लोग
• Bright ambient environments में users जहां screen glare standard contrast को wash out करती है

CSS में Forced Colors

forced-colors media query CSS mechanism है जो detect करती है कि browser system-defined values के साथ colors override कर रहा है:

@media (forced-colors: active) {
  /* Styles केवल forced colors active होने पर apply होते हैं */
}

forced-colors: active effect में होने पर, browser: 1. अधिकांश color, background-color, border-color, outline-color, fill, और stroke values को system colors से replace करता है 2. box-shadow remove करता है 3. background-image entirely remove करता है 4. border properties को visible बनाता है चाहे वे transparent set किए गए हों

System Color Keywords

CSS system color keywords प्रदान करता है जो उन्हीं color values को reference करते हैं जो operating system अपने high-contrast theme के लिए उपयोग कर रहा है:

Canvas          /* Default background */
CanvasText      /* Canvas पर Default text रंग */
LinkText        /* Unvisited link text रंग */
ButtonFace      /* Button elements के लिए Background */
ButtonText      /* Button elements पर Text */
ButtonBorder    /* Button elements के लिए Border */
Field           /* Form inputs के लिए Background */
FieldText       /* Form inputs में Text */
Highlight       /* Selected/highlighted text का Background */
GrayText        /* Disabled text */

forced-color-adjust Property

/* Element को forced-color overriding से बाहर रखें */
.color-swatch {
  forced-color-adjust: none;
  background-color: var(--swatch-color);
}

Testing Strategies

Windows पर Testing

Actual Windows machine पर actual High Contrast Mode enabled के साथ सबसे accurate test है: 1. Settings → Ease of Access → High Contrast open करें 2. "High Contrast Black" choose करें 3. Chrome, Edge, और Firefox में अपनी site open करें

Chrome DevTools simulation: 1. DevTools (F12) open करें 2. Ctrl+Shift+P (Mac पर Cmd+Shift+P) press करें 3. "Rendering" search करें 4. "Emulate CSS media feature forced-colors" को "active" पर set करें

macOS पर Testing

1. System Settings → Accessibility → Display
2. "Increase Contrast" enable करें
3. Safari में test करें

Minimum Manual Testing Checklist

Forced-colors mode में प्रत्येक page या component के लिए verify करें:

• [ ] सभी text अपने background के खिलाफ visible है
• [ ] सभी interactive elements (links, buttons, form inputs) visually identifiable हैं
• [ ] Focus indicators visible हैं
• [ ] Form field boundaries visible हैं
• [ ] Disabled states visually distinct हैं
• [ ] Error और success states distinguishable हैं

Common Pitfalls और उन्हें कैसे Fix करें

Pitfall 1: Borders के रूप में Box Shadows का उपयोग

Fix: Border की आवश्यकता वाले components के लिए हमेशा border define करें:

.card {
  background-color: #FFFFFF;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  border: 1px solid transparent;
}

@media (forced-colors: active) {
  .card {
    border-color: CanvasText;
  }
}

Pitfall 2: Visible Boundaries के बिना Icon-Only Buttons

Fix:

.icon-button {
  background-color: transparent;
  border: 1px solid transparent;
}

@media (forced-colors: active) {
  .icon-button {
    border-color: ButtonBorder;
  }
}

Pitfall 3: Custom Focus Indicators जो गायब हो जाते हैं

Fix:

.focusable:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px #2563EB;
}

@media (forced-colors: active) {
  .focusable:focus-visible {
    outline: 2px solid Highlight;
    outline-offset: 2px;
    box-shadow: none;
  }
}

Pitfall 4: Content Carriers के रूप में Gradient Backgrounds

Fix: CSS background-image के बजाय genuine image content के लिए <img> element का उपयोग करें:

<div class="hero">
  <img src="hero-photo.jpg" alt="Description of photo context" class="hero-bg-image">
  <div class="hero-content">
    <h1>Heading text</h1>
  </div>
</div>

Pitfall 5: Color-Only Status Indicators

Fix: प्रत्येक status indicator में text label या icon शामिल करें:

<!-- गलत: color-only status -->
<span class="badge badge-success">3</span>

<!-- सही: color + text label -->
<span class="badge badge-success">
  <svg aria-hidden="true"><!-- checkmark icon --></svg>
  Approved
</span>

Pitfall 6: Disabled State Enabled से Indistinguishable

Fix:

@media (forced-colors: active) {
  .input:disabled {
    color: GrayText;
    border-color: GrayText;
    opacity: 1;
  }
}

सिद्धांत: Color से नहीं, Structure से Communicate करें

High contrast mode एक उपयोगी design exercise force करता है: यदि रंग और shadow remove हो जाएं, तो क्या users अभी भी आपके interface की structure, hierarchy, और state समझ सकते हैं?

इस सिद्धांत के साथ design करने का मतलब है: - सभी interactive elements के लिए Visible borders - सभी status information के लिए Text या icon + रंग - Outline-based focus indicators - Content-carrying images के लिए <img> elements - GrayText का उपयोग करके Explicit disabled states

जब आपका interface shape, text, और borders के माध्यम से structure communicate करता है — केवल रंग और shadow के माध्यम से नहीं — high contrast mode एक complete redesign के बजाय एक configuration change बन जाता है।