When it comes to applying color to body copy, there’s one rule that I personally will always follow.
Body copy should always be a very dark hue.
This means, no blue, no green, no red body copy.
Let’s dissect a few examples below to help illustrate my point.
In this first example, you’ll see I have a dark heading, with a bright blue hue for the body copy.
Not only does the body copy color likely not pass accessibility, but there’s a huge hierarchy issue taking place.
When the body copy is brighter than the heading, it tricks your eye to determine what’s most important. Am I supposed to be reading the body copy first? The brightness is challenging and causes uncertainty.
Next, you’ll see a mockup with the heading now the same bright blue as the body copy.
Aside from any real design best practices, this to me looks cheap. It’s elementary and signals to me that this designer has no idea what they are doing.
When your heading and body copy are the same hue like this, it also creates confusion and eye fatigue. I personally can’t look away fast enough, just based on how it hurts my eyes to even try to read it!
Now, finally you’ll see the proper usage of color and hierarchy here — bright blue heading, with dark gray body copy.
The heading now stands out first visually, and the body copy is easy to read. There’s no confusion or fatigue here.
The Design to Dollars Takeaway
No matter what color your headings are, always keep your body copy dark.
It might be tempting to add color to make it “stand out.” But colored body copy can look cheap fast, and it often fails accessibility. It also creates eye fatigue for anyone trying to actually read it.
Save the color for headings and buttons. Your hierarchy stays clear, and your copy stays readable.
Thanks for reading,
