CSS color-gamut: add a wide-color accent behind an sRGB base

When to use it

A case-status card uses a blue accent strip for visual grouping. Define the sRGB color first, then replace only the decorative strip when both the P3 color syntax and output capability are available. Keep the text color and status word independent of the accent. The sample uses nested feature and media queries to avoid sending a wide-gamut value to a parser or device that cannot use it. Review the final pixels on ordinary sRGB and P3 displays, in forced colors, and in print; software screenshots may be converted to another color space before anyone sees them. A bright P3 accent can clip or appear less saturated on other output paths. Never use color-gamut to classify the user's device quality or to decide whether an error message is displayed. Visual state must still have text and a noncolor cue.

.case-status { border-inline-start: .35rem solid #1f7794; color: #153447; }
@supports (color: color(display-p3 0 0 0)) { @media (color-gamut: p3) { .case-status { border-inline-start-color: color(display-p3 .08 .48 .66); } } }

Cost and verification

A flat color value is cheap to render. The cost lies in review across displays, color profiles, and forced-color settings. Because gamut support is approximate, the query is no proof that an exact color can be rendered without mapping. Measure contrast from the actual composited foreground and background, not the source channel values alone. The original sRGB border remains a full presentation when the enhanced rule does not apply. Use wide-gamut color for a modest decorative gain, not a second information system that disappears on common displays. Keep design tokens documented so later theme changes update both branches together.

Common Mistakes

• Do not treat a P3 query as a contrast test.
• Do not encode status only in a wide-gamut accent.
• Do not omit an sRGB color before the enhanced declaration.

Connected lessons

• CSS Property Decisions
• CSS color and contrast: pair text with its real surface
• CSS @supports: layer a feature over a usable base
• CSS dark mode and forced colors: honor distinct user settings