skip to content

A library catalog's dark palette put every panel on the page color and kept light mode's pale status chips; panels blur together and 'On hold' chips are unreadable. How do you fix it?

level: seniorimportance: should knowfreq 40%

answer

  1. shadows vanish on dark
  2. lighter steps show height
  3. lighter surfaces erode text contrast
  4. dark container, light status text
  5. every pair, every dark surface

basics

~20 s

Show elevation with progressively lighter surfaces instead of shadows, redesign status chips as dark muted containers with light text, then re-check every text, icon and border pair on every dark surface, because lighter surfaces erode contrast.

solid answer

~50 s

Two things broke. Panels share the page color and rely on shadows, which barely show on dark, so there is no depth; the fix is a few lighter surface steps, base, surface, raised, so height reads as lightness. The chips kept their pale amber fill while the text role became off-white, so off-white sits on pale amber at roughly 1.2:1; the fix is a dark, muted amber container with light amber text, still labelled On hold. Then comes the part people skip: **re-check every pair across the dark ramp**. Lighter surfaces lower the contrast of light text, so a secondary gray at about 5.4:1 on the base can fall to about 4:1 on the highest panel and fail 4.5:1. Input borders and focus indicators need 3:1 against each surface too. Record the results so the next surface change triggers a re-check.

go deeper

for a junior

Know that dark palettes show height with lighter surfaces and that status chips need their own dark versions.

for a middle

Explain why shadows fail on dark, why a pale container with light text fails, and why lighter surfaces lower light-text contrast.

for a senior

Diagnose the shared cause, fix depth and chips, then sweep every pair across the dark ramp and set text levels against the lightest surface each can reach.

for a principal

Decide how the system prevents derived dark palettes: required pair sweeps, per-surface limits on text levels, and who signs off before a dark palette ships.

## What went wrong A public library catalog shipped a dark palette built quickly: the page became a near-black gray, text became off-white, and the rest was kept or flattened. Two defects followed, and a third was waiting. - **Panels blur together.** In light mode, record panels were white on a light gray page, with a shadow marking their height. In the dark palette every panel took the page color, and the shadows that remained barely register on a dark surface. Readers cannot tell where the search results end and the filter panel begins. - **Status chips are unreadable.** The On hold chip kept its light-mode pale amber container, but the text role was switched to off-white along with all other text. Off-white on pale amber measures roughly 1.2:1. The pale chip also glares against the dark page. - **The hidden one.** No one re-measured the pairs. Once the surfaces are fixed, some text pairs that pass today will fail. ## Fix 1: show elevation with lighter surfaces On dark surfaces, height is shown mainly by **lightness**: each raised level is a step lighter than the one beneath it. A typical set might be: | Surface level | Example | Used for | |---|---|---| | Base | #121212 | Page behind everything | | Surface | #1E1E1E | Result list, record body | | Raised | #2C2C2C | Filter panel, menus, dialogs | Shadows can stay as a secondary cue, but the lightness step carries the meaning. How many levels exist and what shadows accompany them belongs to the elevation scale; the palette supplies the colors. ## Fix 2: redesign the status chips for dark A pale tinted container with dark text works on white and fails on dark. The dark palette uses a **dark, muted tint of the status hue** as the container and a **light tone of the same hue** for the text and icon. The label On hold stays, so status never depends on color alone. The container and its text are designed as a pair and must be switched together; switching one role without the other is exactly how this bug appeared. ## Fix 3: re-check every pair across the dark ramp This is the step that catches the next bug. Lighter surfaces help depth but **reduce contrast with light text**. Measured with WCAG's formula: | Text | On base #121212 | On raised #2C2C2C | |---|---|---| | Primary #E0E0E0 | about 14.2:1 | about 10.6:1 | | Secondary #8A8A8A | about 5.4:1 | about 4.0:1, fails 4.5:1 | | Adjusted secondary #9E9E9E | about 7.0:1 | about 5.2:1 | So the secondary text level that looked safe on the base fails on the filter panel. The fix is to set each text level against the **lightest surface it can appear on**. The same sweep covers non-text parts under WCAG 2.2 1.4.11 Non-text Contrast (Level AA): an input border that is the only cue for a search field needs 3:1 against each surface it sits on, and focus indicators need 3:1 against their adjacent colors on every level. ## A repeatable process 1. List every dark surface, including raised levels and status containers. 2. List every foreground role: text levels, links, icons, borders, focus indicator, status text. 3. Measure each foreground on each surface it can appear on, unrounded. 4. Fix failures by adjusting the foreground level, or by limiting which surfaces it may appear on. 5. Record the results so any later change to a surface triggers a re-check of its rows. ## Explaining it to the team - The dark palette is its own set of values, not the light one with the page color swapped. - A container and the content on it change together, or not at all. - A lighter surface is never free: it spends contrast that the text on it was relying on. - A pair is approved for a specific surface, not in general. ## Why this is a senior question Each fix is small. The judgement is in seeing that the visible bugs share a cause, a dark palette derived rather than designed, and in knowing that fixing depth creates the next contrast failure unless every pair is re-measured. A strong answer fixes both reported defects and the one nobody has reported yet.

  • Why not simply make the dark-mode shadows stronger instead of adding lighter surfaces?
    A shadow needs something darker than the surface to show against, and a near-black surface leaves little room. Even heavy shadows read weakly on dark, while a lightness step reads immediately. Shadows can stay as a secondary cue, but the lighter surface carries the height.
  • Why must the status container and its text change together?
    They were designed as a pair and are only readable as a pair. Switching the text role to off-white while keeping the pale container produced a 1.2:1 chip. Designing and switching them together is the only way both halves stay matched.
  • How do you stop the next surface change from breaking contrast again?
    Record each measured pair with the surfaces it was checked on, and treat any change to a surface value as a trigger to re-measure its rows. The failures come from lighter surfaces quietly eroding light-text contrast, so the check has to follow every surface change.

saying these in an interview costs you the question

  • Stronger shadows are enough to show depth on a dark surface.
  • Lighter raised surfaces improve the contrast of light text on them.
  • If text passes on the dark base, it passes on every raised surface.
  • Status containers can keep their light-mode tint if only the text is recolored.
  • Once light-mode pairs pass, dark-mode pairs need only a spot check.