Color Perception of Stacked Semi-Translucent Boxes

When two semi-translucent boxes are stacked atop one another, the perceived color of the combined layers will differ based on the order in which they are arranged. To understand the reason behind this phenomenon, let's delve into the concept of opacity in CSS.

Opacity defines the transparency of an element, ranging from 0 (fully transparent) to 1 (fully opaque). In the given example, the CSS for the semi-translucent boxes defines the opacity as 0.5, indicating that each layer has a 50% transparency.

When the layer with a red background is placed on top of the blue background, the eye perceives a combination of 50% blue from the bottom layer and 25% red from the top layer. This is because the top layer's 50% transparency allows half of the bottom layer's color to show through.

However, when the order is reversed, with the blue background on top, the eye encounters a combination of 50% red from the bottom layer and 25% blue from the top layer. This shift in proportions results in a different perceived color.

Achieving Consistent Color

To ensure the same perceived color regardless of the order in which the boxes are stacked, it is necessary to maintain the same color proportion for both layers. In the provided example, this can be achieved by adjusting the opacity values as follows:

For the inner layer (containing the solid color):

opacity: 0.25;

For the outer layer (containing the semi-transparent color):

opacity: 0.333;

With these adjustments, both layers will have the same 25% color strength, resulting in the same perceived color regardless of the order they are stacked.