CSS color Media Feature

What You’ll Learn

The color media feature detects whether a device can display color. Adapt styles for full-color screens vs monochrome displays, and distinguish the media feature from the CSS color property.

Introduction

The @media color feature in CSS checks whether the output device can display color. It is used inside media queries to apply different styles depending on display capability — from full-color monitors and phones to grayscale e-readers or monochrome terminals.

While nearly every modern screen matches (color), this feature is still valuable for progressive enhancement, print stylesheets, and providing accessible fallbacks when color cannot convey meaning alone.

Definition and Usage

Write @media (color) for color-capable devices and @media not (color) for devices without color support. You can also use min-color and max-color with a numeric bit depth per color component.

📝 Syntax

The basic forms of the color media feature are:

@media (color) {
  /* Color-capable devices */
}

@media not (color) {
  /* Monochrome or grayscale devices */
}

@media (min-color: 8) {
  /* 8+ bits per color component (true color) */
}

Feature Variants

• (color) — Matches when the device supports color (equivalent to min-color: 1).
• not (color) — Matches monochrome devices with zero color bits.
• min-color — Matches when the device has at least N bits per color component.
• max-color — Matches when the device has at most N bits per color component.

Basic Example

@media (color) {
  body {
    background-color: #dbeafe;
  }
}

@media not (color) {
  body {
    background-color: #e2e8f0;
  }
}

Media Feature vs CSS Property

Default Value

There is no default value. Styles outside media queries apply universally unless a matching query overrides them.

Syntax Rules

• (color) is a boolean feature — no value after the colon is needed.
• Use not (color) for monochrome fallbacks, not (color: 0).
• Bit-depth queries use integers: (min-color: 8).
• Combine with other features: @media (color) and (min-width: 48rem).
• Never rely on color alone to convey information — add icons, labels, or patterns.

Related Topics

• color property — set text and foreground colors
• color-gamut — detect wide-gamut display support
• background-color property — element background colors

When to Use color

Use the color media feature when display capability affects design:

• Monochrome fallbacks — Simplify UI on e-readers or grayscale displays with not (color).
• Rich gradients — Enable colorful backgrounds on (min-color: 8) true-color screens.
• Progressive enhancement — Layer color cues on top of shape and text that work everywhere.
• Print styles — Pair with print media types for black-and-white output.
• Status indicators — Add color on capable devices; use icons or labels as the primary signal.

Examples Gallery

Practice the color media feature with backgrounds, status badges, gradients, and property comparisons.

@media (color) {
  body {
    background-color: #dbeafe;
  }
}

@media not (color) {
  body {
    background-color: #e2e8f0;
  }
}

.badge {
  padding: 0.35rem 0.65rem;
  border: 1px solid #334155;
  border-radius: 0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
}

@media (color) {
  .badge--success {
    background: #dcfce7;
    color: #16a34a;
    border-color: #86efac;
  }
  .badge--error {
    background: #fee2e2;
    color: #dc2626;
    border-color: #fca5a5;
  }
}

@media not (color) {
  .badge {
    background: #f8fafc;
    color: #1e293b;
  }
}

.header {
  padding: 2rem;
  background: #334155;
  color: #fff;
  text-align: center;
}

@media (min-color: 8) {
  .header {
    background: linear-gradient(135deg, #7c3aed, #2563eb, #06b6d4);
  }
}

/* Device capability check */
@media (color) {
  .alert {
    border-left: 4px solid #2563eb;
  }
}

/* Element text color — always applies */
.alert {
  color: #1e293b;
  padding: 0.75rem 1rem;
  background: #f8fafc;
}

@media not (color) {
  .alert {
    border-left: 4px solid #000;
  }
}

💬 Usage Tips

• Progressive enhancement — Design for monochrome first, then add color with (color).
• Pair with icons — Never use color as the only way to communicate status or errors.
• min-color for gradients — Reserve complex gradients for (min-color: 8) displays.
• Print styles — Combine with @media print for black-and-white output.
• Name collision — Remember: media color = device; property color = text.

⚠️ Common Pitfalls

• Assuming not (color) is common — Almost all modern browsers and devices match (color).
• Color-only meaning — Red/green status colors fail for color-blind users; add icons and labels.
• Confusing with color property — They share a name but serve different purposes.
• Replacing contrast checks — (color) does not guarantee sufficient contrast; test WCAG ratios.
• Overusing bit-depth queries — min-color: 8 matches virtually all current hardware.

♿ Accessibility

• Do not rely on color alone — WCAG requires a non-color way to convey information.
• Monochrome fallbacks — Use not (color) to ensure borders, icons, and labels remain clear.
• Color blindness — Test with simulators; red/green pairs are especially problematic.
• Sufficient contrast — Colorful badges must still meet contrast requirements on all backgrounds.
• High contrast mode — Users may override colors; layouts must remain usable.

💡 Best Practices