No Login Data Private Local Save

prefers‑contrast Tester - Online High/Low Contrast Emulator

22
0
0
0

prefers-contrast Tester

Online emulator for testing CSS prefers-contrast media query — simulate high & low contrast modes without changing your OS settings.

System Setting:
Detecting... Real-time monitoring via matchMedia
Live Preview 12.6:1 AAA

Sample Heading

This paragraph demonstrates how body text renders under the current contrast mode. Text should remain legible and comfortable to read across all contrast preferences.

Secondary text like captions, footnotes, and helper descriptions — these need special attention in low-contrast modes.

This is an informational alert box — observe its visibility.

View documentation → | Accessibility guide →

Contrast Metrics
Body Text Contrast
12.6:1
WCAG Level (Normal Text)
AAA — Pass
Secondary Text Contrast
5.7:1
WCAG 2.1 AA: ≥4.5:1 (normal), ≥3:1 (large)
WCAG 2.1 AAA: ≥7:1 (normal), ≥4.5:1 (large)
CSS Implementation 
/* Default styles (no preference) */
body {
  color: #1e293b;
  background: #ffffff;
}

/* High contrast mode */
@media (prefers-contrast: more) {
  body {
    color: #000;
    background: #fff;
    border-color: #000;
  }
  a { color: #0000ee; text-decoration: underline; }
  button { border: 2px solid #000; }
}

/* Low contrast mode */
@media (prefers-contrast: less) {
  body {
    color: #6b7280;
    background: #f9fafb;
    border-color: #e5e7eb;
  }
}
JavaScript Detection 
// Detect contrast preference
const moreContrast = window.matchMedia(
  '(prefers-contrast: more)'
);
const lessContrast = window.matchMedia(
  '(prefers-contrast: less)'
);

if (moreContrast.matches) {
  console.log('High contrast preferred');
}

// Listen for changes in real-time
moreContrast.addEventListener('change', (e) => {
  if (e.matches) {
    applyHighContrastTheme();
  }
});
Pro Tip

Combine prefers-contrast with prefers-color-scheme for comprehensive accessibility support.

Forced Colors

In Windows High Contrast Mode, forced-colors: active also applies. Use both queries for full coverage.

Browser Support

Supported in Chrome 96+, Firefox 101+, Edge 96+, Safari 15+. ~92% global coverage as of 2025.

Frequently Asked Questions

prefers-contrast is a CSS media query that detects the user's system-level contrast preference. It allows websites to adapt their visual presentation based on whether the user prefers more contrast (high contrast), less contrast (low contrast), or has no preference. This is part of the CSS Media Queries Level 5 specification and is crucial for accessibility — particularly for users with visual impairments who rely on high contrast to perceive content clearly.

  • no-preference — The user has not expressed any contrast preference. This is the default.
  • more — The user prefers higher contrast. On Windows, this corresponds to High Contrast Mode. On macOS, it aligns with "Increase Contrast" in Accessibility settings.
  • less — The user prefers lower contrast. Some users find high contrast fatiguing and prefer softer visual distinctions.
  • custom — The user has a custom contrast scheme (rare; primarily used with forced-colors on Windows).

Use window.matchMedia() to query the contrast preference. You can check the current value and also listen for real-time changes when the user adjusts their system settings: 
const mq = window.matchMedia('(prefers-contrast: more)');
if (mq.matches) { /* apply high contrast */ }
mq.addEventListener('change', (e) => {
  if (e.matches) { /* switched to high contrast */ }
});

While related, they serve different purposes:

prefers-contrast: more — Indicates the user wants higher contrast. The website still controls the color palette but should ensure sufficient contrast ratios.

forced-colors: active — Indicates a forced color palette is applied by the OS (e.g., Windows High Contrast Mode). The browser overrides many author styles with system colors like CanvasText, Canvas, ButtonFace, etc. Use both queries together for maximum compatibility in accessibility scenarios.

  • Chrome 96+ (November 2021)
  • Firefox 101+ (May 2022)
  • Edge 96+ (November 2021)
  • Safari 15+ (September 2021, macOS/iOS)
  • Opera 82+
  • Samsung Internet 17+

Global browser coverage is approximately 92% as of early 2025. Always provide a sensible default fallback for unsupported browsers.

1. Use this online emulator — The preview area above simulates all three contrast modes, so you can visually test without OS changes.

2. Chrome DevTools — Open DevTools → More tools → Rendering → Scroll to "Emulate CSS media feature prefers-contrast" and select a value.

3. Firefox DevTools — Open the Accessibility Inspector, or use the Responsive Design Mode to simulate contrast preferences.

4. Safari Web Inspector — Under the Elements tab, find the "Media Queries" section to emulate contrast states.

  • Use semantic HTML — Proper heading hierarchy, landmarks, and ARIA roles help assistive technologies.
  • Don't rely solely on color — Use icons, underlines, borders, or patterns alongside color distinctions.
  • Thicken borders — In more mode, increase border widths and use solid outlines for focus indicators.
  • Test with real users — Automated tools help, but real user feedback is invaluable.
  • Combine queries — Use @media (prefers-contrast: more) and (prefers-color-scheme: dark) for fine-grained control.
  • Provide a manual toggle — Some users may want to override system settings on a per-site basis.

Windows 10/11: Settings → Accessibility → Contrast themes → Choose a theme and enable. Shortcut: Left Alt + Left Shift + Print Screen.

macOS: System Settings → Accessibility → Display → Toggle "Increase Contrast." Also check "Reduce transparency" and "Differentiate without color."

Linux (GNOME): Settings → Accessibility → Seeing → High Contrast toggle. Or use gnome-tweaks for advanced options.

iOS/iPadOS: Settings → Accessibility → Display & Text Size → Increase Contrast.

Android: Settings → Accessibility → Visibility enhancements → High contrast text (varies by manufacturer).

Absolutely! Combining both media queries gives you precise control over accessibility adaptations. For example: 
@media (prefers-contrast: more) and (prefers-color-scheme: dark) {
  /* High contrast + dark mode */
  body { color: #fff; background: #000; }
}
@media (prefers-contrast: more) and (prefers-color-scheme: light) {
  /* High contrast + light mode */
  body { color: #000; background: #fff; }
}

This approach creates 4 distinct themes (light/dark × normal/high-contrast) for comprehensive coverage.

WCAG 2.1 Success Criterion 1.4.3 (Contrast Minimum) requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (AA level).

WCAG 2.1 SC 1.4.6 (Contrast Enhanced) requires 7:1 for normal text (AAA level).

Supporting prefers-contrast: more helps meet these criteria when users explicitly request higher contrast. Conversely, prefers-contrast: less serves users who find maximum contrast uncomfortable — a valid accessibility need recognized by WCAG's flexibility principle. Always ensure your less mode still meets at least the AA minimum.

This can happen for several reasons:

1. Browser doesn't support it — Older browser versions may not implement prefers-contrast. Update your browser.

2. OS-level setting — Windows High Contrast Mode triggers forced-colors: active but may not always set prefers-contrast: more depending on the OS version. On Windows 11, both are typically set together.

3. Incorrect detection — Ensure you're querying the correct value. Try checking all three: more, less, and custom.

4. Browser flags — Some browsers require enabling experimental features. Check chrome://flags or about:config.

Low contrast mode is important for users with light sensitivity, migraines, or visual processing disorders. Key considerations:

  • Stay above AA minimum — Even in less mode, maintain at least 4.5:1 for body text.
  • Softer UI chrome — Reduce the visual weight of borders, shadows, and decorative elements.
  • Avoid pure gray on white — Use slightly warmer or cooler grays for better perceptual contrast.
  • Preserve focus indicators — Even with reduced contrast, focus rings must remain visible (don't drop below 3:1).
  • Test on real devices — Different screens render low-contrast content differently; OLED vs LCD can produce different results.
🔧 Related Tools