Adapting Auxiliary Text Colors to Colored Backgrounds: A UI Design Case Study

Requirements

The task was to add a deep blue summary panel for mirror build results, displaying the build conclusion, commit a13f9c2, and merge request !86. The goal was to learn how to choose auxiliary text colors based on the actual background while checking primary/secondary relationships and readability.

Initial Implementation

The first version placed the build summary in a deep blue panel ( #205e9e) with white primary text and reused the neutral gray ( #a0a0a0) for the commit and merge request metadata.

Figure 1: Deep blue summary panel paired with neutral gray source information.

Problem Analysis

Primary Issue

Neutral gray that works on a white background creates different lightness and color relationships when placed on a colored background. The original gray may no longer naturally convey the auxiliary hierarchy.

Two separate judgments are needed: whether the text harmonizes with the panel, and whether it is sufficiently legible. Visual harmony does not automatically guarantee adequate reading contrast.

Design Principles

The visual weight of auxiliary text depends on its relationship with the background. For a colored panel, start from the background hue and adjust lightness and saturation to select a suitable solid text color.

Reducing white text opacity also lowers contrast, but the background participates in color blending. With patterns, gradients, or photos, the resulting color changes accordingly, so the actual rendered result must be checked — opacity parameters alone are insufficient.

Optimization Implementation

Color Selection

Keeping the same deep blue background and white primary text, the source information was changed to a light blue #c5e4ff. The primary/secondary relationship was compared on the panel first, then the contrast ratio of this text/background pair was verified.

The chosen combination yields a contrast ratio of approximately 5.04:1 . This measurement applies to the specified color values and does not automatically cover other background colors, gradients, or interactive states.

CSS Implementation

.summary {
  background: #205e9e;
  color: #fff;
}
.summary-source { color: #c5e4ff; }

The colored summary area's text roles are defined separately, avoiding direct reuse of auxiliary colors prepared for white backgrounds.

State Verification

If the commit hash and merge request are links, hover and focus states must also be checked. Auxiliary text should retain its secondary hierarchy while interactive cues remain discernible.

When the panel color changes, re-verify the text colors simultaneously. Picking a nearby hue is only one color-matching method; readability is still determined by the final foreground/background combination.

Effect Verification

Figure 2: Background and content unchanged, using the selected light blue auxiliary text for the current panel.

The only difference between the two versions is the source text color, allowing direct comparison on the same background.

☐ Build conclusion remains the primary content; source fields are clearly legible.

☐ Normal, hover, and focus state color combinations checked separately.

☐ Verification performed with final dimensions and background; not substituted by hue or opacity parameters.

Application & Exercise

Within the same panel, compare three source text treatments: neutral gray, semi-transparent white, and the solid light blue. Record each one's background conditions, primary/secondary relationship, and contrast check results.

Deliver a color checklist and explain which combinations require re-verification when the panel color changes.