Color and contrast in UI: palette and dark mode

Why a beginner’s layout looks like a carnival

You know the trap? You want to cram all your favorite colors into the layout at once. Blue button. Green heading. Red banner. Purple background. And everything shouts at the same time. There’s nothing for the eye to grab onto - when everyone yells, nobody gets heard.

Good taste in color isn’t about “knowing a hundred beautiful shades.” It’s the ability to restrain yourself. Picture a band on stage: one lead singer, the rest on backing vocals. If everyone sings lead, you get a brawl. Color works exactly the same way: one or two soloist accents and a crowd of humble neutrals in the background. That’s the whole secret to an expensive-looking palette.

What working with color properly gives you

Color hits the eyes first - before a person has read a single word. In a fraction of a second it decides: is this expensive or cheap, calm or anxious. And if you’re vibecoding an interface or putting together a landing page, color is either working for you or against you - there’s no middle ground here.

• You’ll stop making “carnival” layouts where ten colors fight for attention.
• You’ll understand why your text is hard to read - and fix it with one rule.
• You’ll build a dark mode that doesn’t tire your eyes after five minutes.
• You’ll be able to give your vibecoding assistant Vibecoding - building apps and sites together with AI, where you describe things in words and the neural network writes the code. Here it's especially important to be able to define the palette in words, otherwise the model will pile on default bright colors. clear commands about color, instead of “make it pretty.”

Nine out of ten “ugly” interfaces aren’t bad color - they’re too many colors and weak contrast. The cure is restraint, not addition.

How to build a site palette: soloist and choir

Don’t pick colors one at a time, by “which one I like.” Pick roles - and then choose a shade for each role. That changes the approach completely.

Neutrals take up almost the whole screen

Neutrals aren’t even color. They’re air. Grays of varying lightness, near-white for the background, near-black for text. There are a lot of them, and they go unnoticed - that’s the whole point. They hold the stage so the accent has room to shine. On a real screen, neutrals usually take up most of the area, and the bright colors are left with just a sliver.

How many accent colors to use

The accent is your signature color. The “buy” button, the active link, the important number. One main accent is plenty. You can add a second as a counterpoint - say, a warm one against a cool one. But a third is almost always too much: it doesn’t reinforce the first, it steals attention from it. Getting greedy here doesn’t pay off.

Contrast and text readability: the 4.5 to 1 rule

Contrast Contrast is the difference in brightness between two colors, for example text and background. It's measured as a ratio: the bigger the number, the more the text stands out from the background and the easier it is to read. is about brightness, not about “how different the colors are.” Yellow and white are completely different colors, but their brightness is almost identical, so yellow text on white is unreadable. Meanwhile black on white reads perfectly, even though, strictly speaking, those aren’t colors at all.

There’s a proven benchmark from the WCAG accessibility standard. Every decent designer keeps it in mind:

• Regular text against background - at least 4.5 to 1.
• Large text (a big heading, bold) - you can go softer, 3 to 1.
• Icons and important interface elements - also around 3 to 1.

You won’t have to calculate in your head. There are plenty of free contrast checkers: paste in two colors, see the number. But even without them, a simple eyeball test works - more on that below.

Squint and look at the text from a distance. If the letters blur into mush, there’s not enough contrast.
Take a screenshot and convert it to black and white. If the text vanishes or is barely visible, color was carrying everything and there’s no brightness.
Compare it to black text on white - that’s the gold standard. Your version should be close in sharpness, not noticeably weaker.
Look at it on your phone in daylight outdoors. If it survives, it’s fine.

Dark mode: the background isn’t black, it’s dark gray

The most common beginner mistake in dark mode is flooding the background with pure black and dropping bright white text on top. The logic seems airtight: maximum contrast, right? But in practice you get an eye-slicing vibration - white letters seem to hum against black, and you can’t read for long.

The pros do it differently. Material Design (Google’s design system) explicitly recommends using a very dark gray, not black as the base background for dark mode - around #121212. Nudge it slightly warm, toward brown or petrol, and it gets even gentler on the eye.

Dark mode Dark mode is a version of the interface with light text on a dark background. A good dark mode uses not pure black but dark gray, and toned-down accents instead of bright ones. lives by its own rules, and they mirror the light theme.

Three rules of dark mode

• Background - warm dark gray, not #000000. Pure black looks like a hole and amplifies the text vibration. Dark gray is gentler and leaves room for shadows.
• Text - not pure white. Use light gray, slightly toned down. Perfect white on black is blinding. Make secondary text dimmer still - that’s how you get hierarchy.
• Tone the accents down. That bright color that looked great on a light background will slice on a dark one. Make it less saturated and a bit lighter - so it still passes the contrast check but doesn’t yell.

Common mistakes with color and contrast

• Colors like a box of markers. Five accents means none. Keep one or two; everything else is neutral.
• Weak contrast for the sake of aesthetics. Light gray text on white looks “airy” but doesn’t read. Pretty and unreadable is just unreadable.
• Meaning by color alone. Showing “error/success” with color only means losing some of your audience. Back it up with text or an icon.
• Pure black in dark mode. #000000 with white text hums. Use a warm dark gray and toned-down text.
• Bright accents on a dark background. A saturated color that dazzled on light slices on dark. Tone it down and lighten it slightly.
• Warm and cool accents mixed for no reason. Warm and cool can clash with each other. If you’re not sure, stick to one temperature family.