Hacker News Reader

Removing color is not arbitrary. It is based on the physical features of human color vision.

The human eye has three types (“L”, “M”, “S”) of cone cell light detectors, but the raw data from these detectors never makes it to the visual cortex of the brain. The first level of processing inside the eye combines these into an L + M lightness signal and two color difference signals (L – M and L + M – S), which are then further combined into higher-level spatial patterns, etc.

Lightness contrast is most of how the visual system distinguishes motion, shapes, textures, and fine details.

Two bordering shapes without lightness contrast get visually smeared together, text without lightness contrast is illegible, design elements without lightness contrast are largely indistinguishable, etc., even if the colors are otherwise strongly contrasting.

* * *

> makes as much sense as designing without different font sizes, designing without borders, or designing without rounded corners so everything is rectangular

Designing with rectangles only as a first step to iterate quickly seems like a reasonable idea. Your other two suggestions are not analogous.

A better comparison might be getting the melody of a song right before figuring out the lyrics.

A grayscale design with a light gray button somewhere among other light gray buttons has zero emphasis whatsoever.

A grayscale design with a highly-saturated orange button that is technically the same lightness as the other light gray buttons will stand out immensely and the eye will be immediately drawn to it.

Likewise, a light orange button against a dark blue contrast creates a far stronger separation than a light gray button against a dark gray background, even though the "lightnesses" are still the same.

So I really don't understand how you're trying to argue that color doesn't matter.

Nobody says color doesn’t matter, or that final designs should not use color.

If your intense orange button has nearly the same lightness as its intense blue background, it’s going to look like a headache-inducing blob instead of like a button.

> light orange button against a dark blue contrast creates a far stronger separation than a light gray button against a dark gray background

It’s not that much stronger separation, in my experience. Light on dark is much more fundamentally important to the design than orange on blue.

If you made it intense middle orange on intense middle blue, the result would be horrifically bad. But light gray on dark gray is just fine.

If you get the lightness contrast right, you have broad latitude in color choices and you won’t be able to screw things up too badly. You can switch between light yellow on dark red, light blue on dark purple, light orange on dark blue, light gray on dark brown, etc. On the other hand, if you get the lightness contrast wrong, then there’s pretty much no way to fix it with color. Which is why it is helpful to design for lightness first.

That doesn’t mean that you can’t e.g. keep in mind while you are doing your black and white setup work that a particular button is going to get a super zappy red color against a largely neutral slate colored design (or whatever), but even so, you want the lightness relationships to be right. Doing the lightness work separately up front can be helpful for many artists: it will preclude many of the worst design mistakes, and focus attention on making text legible, structurally important shapes stand out from their background, and so on.

The advice is sound, IMO. Fine arts teach in this way and it’s an accepted best practice.

The approach is reductionist and aims for solving the right problems first. You can reach for color, typography, etc after you’ve done the legwork to know your design satisfies basic constraints. It’s hard for me to generalize the statement, but learning to design this way (BFA at a well-known fine arts college) had an immediate positive effect on the usability of my apps and readability of print media. I still use the technique today.

Although i agree that bringing color as afterthought is bad advice... i disagree about the limiting.

It is actually powerful way to work. You start with some concept and create limits around it. You mentioned using one font size - thats wonderful tactic. Often time it is enough or almost enough. Design is about balance and it is much easier to sucessfully balance 5 variables than 50. In fact i doubt anyone can do it. Great designers are just very good at hiding that they made their job easier.

> color is in no way an "extra". It is functional, and treating it merely as ornament instead will lead to a more limited, more likely worse design

Completely agree. It's a bizarre suggestion, to just arbitrarily drop one of the most important tools. What if traffic lights were designed this way?

What if traffic lights were designed this way?

They are; reason being: color-blind drivers are out there.

Traffic lights have consistencies which allow drivers not to rely on color. The consistencies aren't global, but hold within major geo-political regions.

For instance, where traffic lights are vertical, it's usually red on top, then yellow, then green. The order isn't perturbed. Moreover, the red light may be larger and brighter.

Yes thank you, I'm aware of how traffic lights work. They don't rely exclusively on color—clearly a different design philosophy from the advice of this article, which is to not use color at all for functional purposes.

From an accessibility standpoint, a design needs to work well in black and white / without color. Color shouldn't be functional in the sense that people need it to use a design easily and safely.