CSS monochrome Media Feature

What You’ll Learn

The monochrome media feature detects grayscale displays and their bit depth. Adapt styles for e-readers, industrial screens, and high-contrast monochrome environments.

Introduction

Most screens today display millions of colors. Some specialized devices — e-readers, industrial panels, legacy terminals — show only grayscale (monochrome) output. The monochrome media feature lets CSS detect those devices and optimize for black-and-white display.

On a monochrome screen, subtle color differences disappear. Red and green buttons may look identical. The monochrome query helps you switch to high-contrast patterns, borders, and labels that work without color.

Definition and Usage

Write @media (monochrome) for any grayscale device, or use integer values like @media (monochrome: 0) for full-color devices and @media (min-monochrome: 1) for monochrome displays.

📝 Syntax

Use integer values or the boolean form inside @media:

/* Any monochrome (grayscale) device */
@media (monochrome) {
  /* Grayscale display — bits > 0 */
}

/* Full-color device */
@media (monochrome: 0) {
  /* Not monochrome */
}

/* At least 1 bit per pixel (monochrome) */
@media (min-monochrome: 1) {
  /* Same as boolean (monochrome) */
}

/* Specific bit depth */
@media (monochrome: 2) {
  /* Exactly 2 bits per pixel */
}

Accepted Values

• (monochrome) — Boolean form; matches when the device is grayscale (bits per pixel > 0).
• monochrome: 0 — Device supports full color (not monochrome).
• monochrome: N — Positive integer; bits per pixel on a monochrome display (e.g. 1, 2, 8).
• min-monochrome / max-monochrome — Range queries for bit depth thresholds.

monochrome vs color Media Feature

Basic Example

body {
  background-color: #fff;
  color: #1e293b;
}

@media (monochrome) {
  body {
    background-color: #000;
    color: #fff;
  }
}

Default Value

The default is 0 (full color) on virtually all modern devices. Monochrome queries are progressive enhancement.

Syntax Rules

• Boolean (monochrome) is equivalent to (min-monochrome: 1).
• Use (monochrome: 0) to target full-color devices explicitly.
• Rely on contrast, borders, and labels — not color alone — on monochrome screens.
• Do not confuse with CSS filter: grayscale().
• Pair with semantic HTML for baseline accessibility.

Related Topics

• color media feature — color bit depth
• color-index — palette lookup table size
• inverted-colors — system color inversion

When to Use monochrome

Reach for monochrome when display color capability matters:

• E-readers — Optimize reading UI for grayscale e-ink screens.
• Industrial displays — Adapt for monochrome panel hardware.
• High-contrast fallback — Simplify UI when color cannot convey meaning.
• Progressive enhancement — Layer on top of accessible defaults.
• Learning media queries — Understand display capability detection.

Examples Gallery

Practice monochrome with page themes, high-contrast buttons, simplified cards, and comparisons to the color feature.

body {
  background-color: #fff;
  color: #1e293b;
}

@media (monochrome) {
  body {
    background-color: #000;
    color: #fff;
  }
}

.btn {
  padding: 0.65rem 1.25rem;
  border: none;
  border-radius: 0.45rem;
  font-weight: 600;
  cursor: pointer;
}

.btn-primary { background: #2563eb; color: #fff; }
.btn-danger { background: #dc2626; color: #fff; }

@media (monochrome) {
  .btn {
    background: #fff;
    color: #000;
    border: 2px solid #000;
  }
  .btn-primary { background: #000; color: #fff; }
}

.card {
  padding: 1rem;
  background: linear-gradient(135deg, #dbeafe, #fce7f3);
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

@media (monochrome) {
  .card {
    background: #fff;
    border: 2px solid #000;
    box-shadow: none;
    font-weight: 500;
  }
}

/* Full-color display */
@media (monochrome: 0) and (min-color: 8) {
  .badge {
    background: #2563eb;
    color: #fff;
  }
}

/* Grayscale display */
@media (monochrome) {
  .badge {
    background: #000;
    color: #fff;
    border: 1px solid #fff;
  }
}

.badge {
  display: inline-block;
  padding: 0.4rem 0.65rem;
  border-radius: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

💬 Usage Tips

• Don’t rely on color alone — Use icons, labels, and borders on monochrome screens.
• Maximize contrast — Black/white or near-black/near-white works best.
• Simplify gradients — Replace with flat fills and strong outlines.
• Test with grayscale filter — Preview designs in DevTools (visual only, not the media query).
• Progressive enhancement — Base design must work without monochrome rules.

⚠️ Common Pitfalls

• Confusing with filter: grayscale() — Media feature detects device; filter is visual effect.
• Color-only status indicators — Red/green badges look identical in grayscale.
• Assuming wide matching — Modern devices report monochrome: 0.
• Thin fonts on e-ink — Increase weight for readability on low bit-depth screens.
• Skipping accessible defaults — Monochrome rules are enhancement, not replacement.

♿ Accessibility

• WCAG contrast — Aim for 4.5:1 or higher; 7:1 is ideal on grayscale.
• Non-color cues — Icons, text labels, and patterns convey state.
• Focus visibility — Strong focus rings on monochrome displays.
• Semantic HTML — Proper headings and landmarks help all users.
• Test readability — Print or preview in grayscale to spot issues early.

💡 Best Practices