Container color

Material 3 gives every accent role a quieter twin. primary is the solid fill a button takes, and it is dark enough that only white ink will sit on it; primaryContainer is the same hue pulled up to a pale tone, light enough that ordinary dark text reads on it without effort. That is the whole idea. A container colour is a fill whose job is to hold content rather than to be content, so a region can be shaded in the accent hue without everything inside it having to shout. Radix reaches the same place from the other direction, reserving steps 3, 4 and 5 of each scale for component backgrounds at rest, hover and pressed.

The word most often confused with it is on colour, and the two are opposite halves of one pair. An on colour is a foreground, defined by the fill it has to stay legible against; a container colour is a fill, defined by the fact that a foreground can live on it at all. Every container ships with its own on colour, onPrimaryContainer beside primaryContainer, and that pair is what a contrast ratio is measured between, which is why the specimen prints the ratio instead of claiming the pair clears.

Hold it apart from its two nearest neighbours as well. A surface tint is also a seed-derived fill, but it encodes height: how much of the primary hue a surface takes is a function of elevation and says nothing about the content on it. A static colour is the opposite kind of thing again, a value declared exempt from derivation, while a container is derived along with everything else from the seed colour that Material You pulls out of a wallpaper. In a tonal scheme the containers land near tone 90 in a light theme and tone 30 in a dark one, with their on colours at the far end of the same ramp.

In practice a container is how a system says medium emphasis with colour rather than with the opacity steps an emphasis level uses, and the two mistakes are easy to name. The first is filling a whole page region with the solid accent and then hunting for ink that survives it, which is the problem the container role exists to remove. The second is hardcoding the pale value: a container belongs in the token layer as a colour alias pointing at a rung, never as a primitive copied into a component, because the rung it points at is exactly what a theme swap has to move.