CSS Color Adjustment

Intermediate

CSS Color Adjustment defines how authored styling interacts with automatic color adaptation by the user agent. Its core author-facing controls are color-scheme, forced-color-adjust, and print-color-adjust. This lesson teaches those controls without repeating media-query grammar or the general CSS color-value model.

A preference query and a color-adjustment control solve different problems

prefers-color-scheme reports a preferred scheme through a media query. color-scheme declares which schemes an element supports and lets the user agent coordinate browser-provided UI such as form controls and scrollbars. They work together, but they are not aliases.

?

color-scheme participates in color-scheme negotiation

The page or an element can support light and dark schemes. The user agent combines that support with the user preference to determine the used color scheme. The property can also override the supported scheme for a subtree; its grammar includes normal, light, dark, and only.

?

Forced colors is a media feature; forced-color-adjust is the CSS control

The forced-colors media feature tells an author that forced colors mode is active. forced-color-adjust controls whether an element participates in that automatic adjustment. The default auto value permits the user agent to apply its forced-color behavior; none opts an element out, and preserve-parent-color provides a specialized inheritance-related behavior.

.status { ?forced-color-adjust: auto; }

System colors belong to the Color model

Color Adjustment can interact with system colors during forced-colors and color-scheme processing, but the definitions of system color keywords such as Canvas and CanvasText belong to CSS Color. Learn their value semantics in the Color lesson; use them here only when adapting to the user agent’s active palette.

print-color-adjust controls automatic print optimization

print-color-adjust provides a hint about whether authored color and styling choices should be preserved when the user agent optimizes output, such as reducing ink use for printing. economy permits optimization; exact indicates that preserving the authored styling is important. It remains subject to user preferences and user-agent behavior.

.ticket { ?print-color-adjust: exact; }

The old color-adjust shorthand is not the authoring target

The Color Adjustment specification retains color-adjust as a deprecated shorthand. Prefer the specific print-color-adjust property so the intent of the declaration is clear and future adjustments are not reset unintentionally.

Test adjustment states, not just the default state

Test light and dark scheme negotiation, forced-colors behavior, and print output separately. Check that content remains readable and meaningful when the user agent changes colors. Do not assume that an authored color survives automatic adjustment unchanged.

?

Ownership boundaries

Use Media Features for the meaning of prefers-color-scheme and forced-colors. Use Color for color values, spaces, interpolation, gamut mapping, and system-color definitions. Use Color Adjustment for color-scheme negotiation and automatic color-adjustment controls. Use Paged Media and Fragmentation for the broader printing and fragmentation models.

Quick self-audit

Before shipping adaptive color CSS, ask: Which user preference or adjustment mode am I addressing? Am I using the right owner? Have I declared supported schemes where appropriate? Have I tested forced colors and print output when relevant? Am I treating a user-agent hint as an absolute command?

?