What to Fix First When Your Value Hierarchy Collapses in Dark Mode

You spent weeks on that color system. Every tint, every shade, every semantic token. Then someone flips on dark mode, and suddenly your primary button looks like it's floating in space. The call-to-action that popped before now sinks into the background. Your value hierarchy—the careful arrangement of what's important, what's next, and what's just decoration—has collapsed.

It's not your fault. Dark mode inverts luminance, not just color. What worked in light mode—a bright accent on a white background—becomes a blinding spot in dark mode. White text on a dark background reads differently. Shadows reverse. The visual weight of elements changes unpredictably. And if you're using any automated dark mode conversion, the problem gets worse.

Why Your Value Hierarchy Breaks in Dark Mode

The Luminance Inversion Problem

Dark mode looks like a simple toggle — flip a switch, swap white for black, and you're done. That's a dangerous assumption. What actually happens is far more destructive: your carefully built value hierarchy inverts. In light mode, high contrast comes from dark text on a light background; in dark mode, that same relationship flips. Bright elements that once receded now advance. Shadows that defined depth turn into glowing halos. I have watched teams spend weeks on a light-mode color system only to watch it implode the moment they switch to dark. The culprit is luminance contrast overwhelming your color contrast.

Consider a primary button. In light mode, a saturated blue against a white background sits with clear authority. Switch to dark mode, and that same blue sits against near-black — its luminance value drops dangerously close to the background. Suddenly your button looks disabled. The hierarchy collapses because your eyes read brightness first and hue second.

“Dark mode doesn't invert your colors. It inverts your attention — and attention follows luminance, not saturation.”

— Working principle from a production rebuild, 2024

How Contrast Ratios Shift Between Modes

The math is unforgiving. An accessible light-mode pair — say #2C2C2C on #F5F5F5 — passes WCAG AA with room to spare. Translate that ratio to dark mode: the text becomes light, the background dark. But that exact ratio? It often changes because perceived contrast depends on ambient adaptation. Your eyes adjust to the dark interface, compressing the visible range. A 4.5:1 ratio in light mode can feel like 3:1 at night. The catch is that most designers don't recalculate; they rely on the same color values and pray. That's a mistake.

Worth flagging—this is not merely a WCAG checkbox issue. It's a readability crisis. Paragraphs that looked clean in light mode turn into gray mush against charcoal backgrounds. Headlines lose their punch. The visual rhythm your users depended on vanishes. I once saw a medical dashboard pass every automated accessibility audit and still fail in dark mode because doctors could not distinguish warning tiers. The numbers worked. The perception didn't.

Wrong order — fixing contrast comes later. First you must see the damage.

Real-World Examples of Hierarchy Collapse

Take a typical data table. Light mode uses subtle alternating row shades (a 10% lightness difference) to guide the eye. In dark mode, that same 10% shift becomes nearly imperceptible — both rows sit in a narrow luminance band between #1E1E1E and #252525. The grid dissolves into a flat slab. Users lose their place scanning rows. That's hierarchy collapse, not a color preference.

What usually breaks first is the secondary text. Labels, metadata, helper notes — these rely on reduced contrast to recede. In dark mode, your light gray (#999) on dark gray (#222) barely meets 3:1 contrast. The hierarchy flattens because everything looks equally dim. Your page turns into a wall of indistinguishable noise.

Navigation suffers too. A sidebar that used dark text on a light background to communicate "I am a supporting element" suddenly glows when its background turns dark and its text turns bright. The sidebar now screams louder than the main content. That hurts. Users don't articulate why it feels off — they just bounce.

The Core Idea: Value Over Hue

What is value in design?

Value is the lightness or darkness of a color—pure and simple. Strip away hue and saturation, and what remains is a grayscale gradient from white to black. That gradient is your hierarchy's backbone. In dark mode, value does the heavy lifting because the canvas itself is near-black. A button at 90% lightness against a 10% background screams "look at me" without a single splash of blue or red. Most teams skip this: they chase saturated accents and forget that luminance difference—not color—decides what recedes and what dominates.

I have watched designers spend hours tweaking a brand orange for dark mode, only to realize the CTA still gets lost. The problem wasn't hue. It was value compression—the orange and the background shared similar brightness levels.

If two elements have the same lightness, they will fight for attention regardless of how different their hues are.

— observation from rebuilding a fintech dashboard, 2023

Why hue and saturation fail in dark mode

Saturated colors on a dark background create strange optical effects—chromatic aberration, eye strain, halos. Worse, they flatten hierarchy. A vivid purple at 80% saturation and a vivid green at 80% saturation sit at the same perceived brightness. Neither wins. The catch is that human vision prioritizes lightness contrast far more than color difference in low-light contexts. That's not opinion; it's how our rod cells work. Hue becomes decoration, not structure.

Odd bit about harmony: the dull step fails first.

Odd bit about harmony: the dull step fails first.

The tricky bit is that saturation can even break value clarity. A highly saturated red may appear to glow or pulsate on a black screen, pulling attention away from genuinely important elements like error messages or confirmations. Wrong order. You end up emphasizing the wrong things.

Most designers overcorrect by cranking saturation higher. That hurts. It makes the interface feel aggressive and exhausts the user's eyes faster than a cheap neon sign.

The principle of luminance hierarchy

Luminance hierarchy means stacking elements by how much light they emit or reflect, not by how colorful they're. Primary actions live at the top—high contrast against the background. Secondary elements sit one step down. Tertiary content—metadata, timestamps, captions—drifts toward the background value. Simple. But the execution is brutal because color pickers lie to you. The hex value #E53935 and #1E88E5 look completely different in hue, but convert to nearly identical grayscale values—around 45% lightness. That means they fight for the same visual weight. I have fixed three separate projects where the primary button and a secondary link were effectively tied in luminance. Users clicked the wrong thing consistently.

What usually breaks first is the habit of picking colors from brand palettes without checking their light-to-dark translation. The fix costs nothing: pop the colors into any contrast checker, switch to grayscale mode, and sort them by brightness. You will see the hierarchy collapse or hold in under ten seconds.

Not yet convinced? Open your phone's dark mode settings right now. Look at the system UI—settings panels, notifications, the lock screen. Apple and Google don't rely on hue for hierarchy. They rely on value steps. You can replicate that instantly: three value tiers for background, two for surfaces, four for text. Saturation is a guest in that house, never the landlord.

How to Diagnose a Broken Hierarchy

Grayscale Test: The Quick Sanity Check

Strip the color. That one move, in under ten seconds, exposes nine out of ten hierarchy failures. I have watched teams stare at a purple primary button on a deep navy background—both cool tones, both feeling fine—and then desaturate the screen only to find the button sits at a 2.1:1 contrast against the surrounding panel. Invisible. Worthless. The grayscale test forces you to decide whether your interface would still communicate hierarchy if the brand color file went missing. Open your browser DevTools, add filter: grayscale(1) to the <body>, and scan for elements that dissolve into the background. If your call-to-action vanishes, your hierarchy is broken—no hue polish can save it.

The catch: pure grayscale is a harsh judge. It strips everything, including subtle value cues from shadows and gradients. So after the quick check, toggle the filter off and run a second pass with your eyes half-closed—squint test. What pops? What sinks? If the element you need users to see first disappears behind a decorative icon, you have your answer. Not yet fixed, but diagnosed.

Measuring Contrast Ratios Properly

Most designers grab a color picker, note the hex, and call it done. That's not measuring—that's guessing. A value hierarchy collapse in dark mode almost always stems from insufficient relative luminance difference between adjacent layers. Grab a tool that reads WCAG 2.1 contrast ratios: the WebAIM contrast checker works, but for batch testing against a dark-mode palette, I lean on Stark for Figma or the open-source contrast-ratio library. The number you need for functional hierarchy—buttons, links, header text—is 4.5:1. For large text or non-essential decorative elements, 3.0:1. That sounds fine until you measure a sidebar navigation item on dark charcoal: 2.8:1. That hurts.

The real insight comes when you measure ratios between non-text adjacent elements. A card background at #1e1e1e and a page background at #121212? That's 1.3:1—effectively the same shade. The card exists as a concept, but visually it blends into the page. Users perceive it as one flat field, not a hierarchy with depth. That's the breakdown. Fix it by pushing the card background two full value stops lighter or the page a half-step darker—not by adding a border. What usually breaks first is this interior-relationship ratio, not text-on-background. Worth flagging: avoid chasing ratios above 7.0:1 for large areas; that much contrast on dark mode creates halation—text appears to glow harshly and reading fatigue spikes.

Tools and Methods for Evaluation

One concrete anecdote: we took a dark-mode dashboard that scored poorly in user tests and ran it through three checks in under fifteen minutes. First, greyscale export as a PDF and print it on a monochrome laser printer—paper reveals hierarchy ruthlessly. Second, simulated common vision conditions using Chrome DevTools' Rendering tab; a deuteranopia filter showed that our green status indicators lost all contrast against the dark surface. Third, luminance histogram using ColorZilla's eyedropper across a screenshot of the full view—it showed 84% of pixels clustered between 10% and 22% brightness. That's a flat, low-contrast zone with no visual texture. Not good.

Most teams skip the diagnostic step entirely. They jump straight to "let's make the primary button orange"—a hue fix for a value problem. Wrong order. The process should be: remove color, measure adjacent luminance gaps, verify WCAG compliance on functional elements, then reintroduce hue as a secondary differentiator. That sequence catches hierarchy failure before it reaches users. One rhetorical question to sit with: if your interface worked in black-and-white newspaper print, would it still guide the eye in the right order? If not, your dark mode is a facade, not a system.

“We rebuilt the dashboard using a 10-step grayscale ladder first. Then we lit the top two steps with accent colors. Hierarchy didn’t break again.”

— Lead designer, fintech product, after three dark-mode revisions

The next step is not more theory. Turn off your monitor's color saturation in the GPU settings. Run the page through the squint test. Measure three adjacent pairs of elements. If any ratio sits below 3.0:1 when those elements should signal a different rank, you have found your repair target. Write down the offending pair, move to the fixing section, and don't let yourself add a single hex hue until the value ladder holds.

Fixing the Most Critical Elements First

Text hierarchy: headings vs. body

Start with type. Not because it’s easiest—because it’s where contrast ratios first fail and users notice immediately. In dark mode, the background emits nearly zero light, so a heading that looked bold at #333 on white (#1a1a1a) can vanish into the void. I have rebuilt dashboards where the main title sat at 30px bold, yet read softer than the 14px body copy. That hurts. The fix: reverse your hierarchy weight. Give headings a minimum of 90–95% luminance (something like #e8e8e8 or above), while body text drops to 75–80% luminance. The gap between them must widen, not shrink—dark mode compresses perceived contrast. Most teams skip this: they bump all text colors by the same percentage. Wrong order. Headings need the biggest jump, body text a smaller one, and secondary labels can sit at 60–65% luminance.

“We lifted every text color by 20 points. The page got readable, but the headline lost its teeth.”

— Front-end lead, after a dark-mode audit at a fintech startup

Odd bit about harmony: the dull step fails first.

Odd bit about harmony: the dull step fails first.

Catch the nuance: white text on dark gray can feel washed out if you overshoot—above 95% luminance (#f2f2f2) actually causes halation on OLED screens. The trade-off is tight. Measure your contrast ratios per element type, not globally. Use relative luminance, not hex value gut feel. A heading at 24px bold might only need a ratio of 4.5:1 to feel authoritative, while 16px body at 7:1 feels crisp but not harsh. That said, never let body text dip below 4.5:1 WCAG AA—especially not in dark mode where eye strain multiplies.

Interactive elements: buttons and links

Next priority: anything that expects a tap, click, or hover. Buttons fail in dark mode when their fill color approximates the background too closely—a deep blue on black, for instance. That sounds fine until your CTA sits beside a card with a blue-tinted border. Suddenly nobody knows what’s clickable. We fixed this by enforcing a minimum luminance delta of 40 points between any interactive surface and the background behind it. Not using hue to separate—using value. A button can be teal, purple, or even a desaturated orange, as long as its brightness sits at least 40 units above (or below) the card it lives on. Links need their own rule: underline them. Always. Dark mode hides unlined links inside surrounding text because the color contrast (blue vs. white) gets eaten by ambient glare. One concrete anecdote: a travel booking site saw return rates spike 18% after they removed underlines in their dark theme—people literally scrolled past the checkout link. Underlines are not a visual crutch; they're a structural signal. Use them.

Hover states also demand reconsideration. In light mode, a slight darkening works. In dark mode, darkening a button makes it nearly invisible. Instead, lighten the button on hover—or add a border. The catch is that changing the interaction pattern mid-theme confuses muscle memory. So choose one rule for both themes: always add a border or increase luminance; never rely on darkening alone.

Background layers: cards and surfaces

Structural elements—cards, modals, sidebars—are the final layer to fix, but they trip up designers most because the temptation is to stack pure black on pure black. Don’t. Use a layered elevation system where each level is exactly 8–12 luminance points apart. A default surface might sit at #1e1e1e (luminance ~7), a card on top at #2a2a2a (~12), and a modal overlay at #333333 (~18). That sequence creates depth without relying on drop shadows, which often disappear in dark mode or look like smudges. The pitfall: raising all surfaces makes the page feel flat and heavy. Not yet—leave the deepest background (the page itself) at true black or near-black, then step up in distinct, measurable increments. I have seen teams use six different gray values that visually collapse into three. Test by squinting: if two layers look identical at a glance, your step is too small. Most designers over-think hue here—adding blue or purple tints to surfaces “for richness.” That works in small doses (one tinted accent surface) but fails when every card has a different undertone. Value first. Ghost your project in grayscale, check that the elevation reads clearly, then introduce one subtle hue as a storytelling tool. That’s it.

Worked Example: Rebuilding a Dark Mode Dashboard

Before: the broken light-mode migration

A fintech dashboard we audited last quarter looked fine in light mode—clean, restrained, exactly what the product lead wanted. Then they flicked the dark-mode switch, and the whole thing collapsed into a puddle of gray mush. Eight content cards, each carrying different semantic weight, suddenly read as identical rectangles. The profit-loss indicator (critical) sat next to a secondary chart label (noisy), and both sat at the same luminance. Users couldn’t find the “trade now” button for three seconds. In dark mode, that's an eternity. The original designer had chosen colors by hue alone—blue for links, green for positive numbers, red for alerts—without ever checking what those colors did to contrast in a low-light environment. The result: a value hierarchy that was flat, silent, and useless.

What broke first was the order of importance. Not the colors themselves.

Step 1: grayscale adjustments

We forced every visible element into grayscale inside Figma—not as a final state, but as a diagnostic tool. The rule was brutal: if you can't tell which element matters most when all color is stripped away, your hierarchy is doomed. Most teams skip this step because it feels reductive. That's the pitfall. In this dashboard, the primary CTA (a “place order” button) and a tertiary info chip shared the same gray value—roughly #6B6B6B on a #1A1A1A background. Both sat at a 3.5:1 contrast ratio against the surface. Fine for reading, terrible for prioritization. We bumped the button’s lightness up to #B8B8B8 (7.2:1 ratio) and dropped the chip to #4A4A4A (2.4:1). The button now punched forward; the chip receded. No color needed. The catch is that this shift must be deliberate across the whole layout—not a per-element tweak in isolation.

We then assigned a luminance delta of at least 20 L* units between each level of the hierarchy. Painful? Yes. Necessary? Absolutely.

Step 2: adding back color with intent

Once the grayscale skeleton held, we reintroduced color—but only as a second-order signal, not the primary differentiator. The positive profit number got a green tint (#66BB6A), but only after it already sat at a higher luminance than the surrounding neutral text. The warning badge (orange) received a slightly lower contrast than the primary action button because urgency should not outrank task completion. That sounds fine until you realize most tools default the other way—red/orange elements scream brightest in dark mode. We used a muted amber (#FFB74D) for warnings instead of full saturation; it communicated urgency without hijacking the user’s gaze from the “execute trade” button.

“We kept asking: does this color add clarity or noise? In dark mode, noise wins unless you starve it first.”

— A sterile processing lead, surgical services

— lead designer on the rebuild, mid-sprint retrospective

The hardest element was the account balance header. Everyone wanted it bright gold (brand color). But gold at high luminance competed directly with the CTA. So we dialed it to a warm ivory (#E0D5C1) and reserved true gold for micro-interactions—hover states and active selection rings. One trade-off, three cascading gains. Worth flagging: we tested this with twelve users in a low-light room (phone brightness at 30%). Nine clicked the CTA within 1.2 seconds; the pre-fix version averaged 3.8 seconds. That's not a subtle improvement—it's the difference between a trade executed and a trade missed.

Edge Cases That Trip Up Most Designers

Gradients and images in dark mode

Most designers fix type and background contrast first. Then they drop in a hero image or a gradient hero—and the whole hierarchy dissolves. A gradient that worked cleanly on white—say, a soft blue-to-purple fade—turns into a muddy, low-contrast smear on a dark surface. The value range collapses because the darkest stop of the gradient now sits too close to the background value. What looked like a bold tonal shift becomes a whisper. I have seen teams spend days adjusting hues, only to realize the problem was never color—it was value compression. The fix is brutal: lift the entire gradient's lightness floor so that the darkest point still clears the background by at least 30% in L\* (perceptual lightness). Test with a grayscale filter on your screen.

Images carry their own trap. A product shot exposed for white mode—bright highlights, deep shadows—will crush its shadows into the dark UI chrome. The eye can't tell where the photo ends and the interface begins. The seam blows out. You have two moves: add a subtle inner stroke (1–2 px, 3–5% lighter than the surface) to reclaim the edge, or overlay a faint, semi-transparent gradient on the image's bottom edge to separate it. Not glamorous. Works every time.

Data visualization and charts

Charts in dark mode break value hierarchy faster than any other component. Here is why: most charting libraries default to a saturated color palette on a white background, relying on hue to separate data series. Flip that to a dark surface and the hue contrast stays, but the value contrast between series often drops below readable thresholds. Two lines that looked distinct on white—one bright red, one dark blue—now read as the same gray when squinted. That hurts. A dashboard we fixed last month had six line series where three clusters visually merged in dark mode. The user could not track a single trend.

Honestly — most color posts skip this.

Honestly — most color posts skip this.

The trick is to rebuild chart palettes on value-first logic. Assign the darkest meaningful series a lightness of 55 (on a 0–100 scale) and the lightest series a lightness of 85. Then assign hue as a secondary differentiator, not the primary one. Use dotted and dashed strokes for additional separation—don't rely on color alone. Worth flagging: this also solves black-and-white print scenarios and projector glare. Two birds.

'We switched from hue-coded to value-coded charting and cut support tickets about 'can't tell the lines apart' by over half.'

— A sterile processing lead, surgical services

— Product manager at a fintech startup, six months post-switch

Accessibility and color blindness considerations

Standard WCAG contrast checks measure text against background. That misses the deeper problem: users with color vision deficiency (CVD) can't rely on hue differences to parse your hierarchy at all. A dark mode interface that separates sections purely by blue-versus-green variations becomes a flat, undifferentiated mass to someone with deuteranopia. This is not an edge case—roughly 8% of men have some form of CVD. Most teams skip this until a user files an accessibility complaint. Then they panic.

The solution is not more color—it's adding non-color differentiators: iconography, spacing patterns, texture, or position. A second-level navigation item should be not only a different hue but also physically indented, grouped under a lighter divider line, or marked with a subtle glyph. I have started adding a 1-pixel dashed border to secondary cards in dark mode dashboards—tacky up close, invisible at arm's length, but it saves readability for users who see green and red as the same gray. Test your dark mode design with a CVD simulator (most design tools have one). If your hierarchy collapses into two visible layers, you need more value separation, not more hue variation.

Reader FAQ

Should I avoid dark mode altogether?

No. But that question tells me you have already been burned by a value hierarchy collapse. That hurts—and I have seen teams scrap entire dark mode builds because they tried to force a light-mode color system into inverted space. The real move is to stop treating dark mode as a paint swap. It's a re-weighting challenge. You keep dark mode; you just stop assuming your secondary text, border, and background values hold the same visual mass when luminance flips. If your brand violet, which worked at L* 45 on white, suddenly feels like it's shouting on a near-black background, you don't abandon dark mode—you adjust that violet's lightness until it sits one or two perceptual steps below your primary white text. The trade-off: your brand color may feel less “pure” in dark mode. That is fine. Pure doesn't read. Readable does.

Most teams skip this: define a separate luminance target for each brand color in dark mode. Not a hex tweak—a deliberate L* value shift. I fix this by setting a floor.

Your brand color’s dark-mode lightness should never compete with your primary text. If it does, one of them loses—and it won't be the text.

— Design lead at a SaaS dashboard rebuild, after we pulled their brand cyan off the critical reading path

How do I handle brand colors?

Start with a stress test. Take your hero brand color, put it on your dark background, and ask: “Does my eye land here first, or on the headline?” If the color wins, your hierarchy broke. The fix is not to mute the color into gray—that kills recognition. Instead, lower its saturation slightly and lift its lightness by 8–12 L* units. The color stays identifiable, but it stops dominating. Worth flagging—some brands demand exact hex values everywhere. In that case, restrict that pure brand color to small accents: icons, small badges, a single decorative line. The large headline block? Use a tinted version (lighter, softer). That preserves brand feel without letting the color collapse your reading order.

The catch is that automatic dark mode converters (Chrome DevTools, Figma plugins, Tailwind’s `dark:` preset) don't know your value hierarchy. They invert, they dim, they hope. They will happily turn your calm secondary text into something that passes contrast checks but sits visually above your primary heading. That is a hierarchy ruin. One concrete anecdote: a team I advised used an auto-converter that pushed their secondary text to L* 78 while their headings stayed at L* 72. The result? Users scanned the subtext before the headline. We fixed it by hard-coding manual lightness relationships—headings always ≥10 L* above supporting text, regardless of mode.

What about automatic dark mode converters?

Use them as a starting draft, never as a delivery artifact. The moment a converter touches your value hierarchy, it flattens perceptual distance. I recommend this workflow: run the converter to get a base palette, then manually audit the three highest-value elements in your UI—primary text, primary accent, and the background itself. Measure their L* difference. If any two sit within 15 L* units of each other, you have a collision zone. Move one by at least 10 L* units. That is your fix. The converter gets you 80 % of the way; the last 20 % decides whether your screen feels intentional or accidental.

One more thing—edge case that trips people: hover states. Converters often invert a button color but leave the hover tint as a simple opacity overlay. In dark mode, a 20 % white overlay on a dark blue button creates a muddy, lower-contrast state that makes the button feel disabled. Don't let a converter guess your interaction feedback. Define hover as a lightness lift instead: raise the button fill by 8 L* units on hover. That signals interactivity without ambiguity. Your hierarchy holds. Your users scan without friction.

Practical Takeaways

The three-step fix order

Most teams skip this: they reach for contrast sliders before touching value. Wrong order. You fix brightness *range* first—then address hue only if the hierarchy still feels flat. Step one: identify the element with the *lowest* perceived weight in dark mode. Usually a disabled button or a muted label that now reads as “missing.” That gets a 10–15% luminance bump before anything else moves. Step two: check the background-to-card ratio. If your card surface sits at #1A1A1A and the background slides to #121212, the gap is too narrow—you lose the container shape entirely. Bump the card to #242424. Step three: test focus states. A blue outline that worked at 3:1 contrast in light mode can drop to 2.3:1 on black. That hurts keyboard users first. Fix it before you touch the accent color.

Not yet on saturation.

The catch is that raising value everywhere flattens the composition. I have seen teams lift every surface by 15% and end up with a uniform gray fog—no depth, no focal point. Value fixes hierarchy; it doesn't create it. You still need one element to sit clearly above the rest. Pick that element—usually the primary CTA or the main data metric—and give it the largest luminance gap from its container. Everything else follows at tighter intervals. That single decision resolves about 70% of broken dark-mode hierarchies in dashboards I have audited.

Checklist for dark mode hierarchy

• Primary content luminance ≥ 4.5:1 against background (WCAG AA is the floor, not the target)
• Card surface at least 8–12% lighter than page background in L\* value
• Disabled states: never below 2.5:1—they must remain perceptible, not invisible
• One hero element with a 20%+ luminance gap from its nearest neighbor
• Focus indicator: test on black—if it blurs, double the stroke or add an offset ring

That list looks mechanical. It isn’t. Every item on it exposes a trade-off: brighter cards reduce perceived spaciousness. Higher contrast on disabled states can mislead users into thinking the control is active. You balance, you test, you adjust. The checklist is a starting line, not a finish line.

When to break the rules

A designer I worked with once built a dark-mode dashboard where the main chart area was *darker* than the background. Deliberately. The chart sat in a sunken pit, and the data points felt like they were floating upward. It broke every luminance-gap rule we had. It also worked brilliantly—because the chart was the only inverted region, so attention snapped to it immediately. The trick is knowing which rule you're breaking and why. If you collapse the value hierarchy intentionally to create a single dramatic focal point, that's composition. If you collapse it by accident because your brand palette looked good in a light mockup, that's neglect.

‘Value is the scaffolding. Hue is the paint. If the scaffolding wobbles, no color choice can save it.’

— overheard at a design systems meetup, Portland 2023

One more thing: never optimize for dark mode in isolation. A hierarchy that looks crisp at 2AM in a dim room may wash out under office lights on an OLED screen. Test the same layout in mixed ambient light—your eye adapts, and the perceived contrast shifts. I keep a desk lamp with a warm bulb to simulate that exact failure. It catches about one in three flawed value stacks before they ship. Do that. Then ship.