The first time I put together a color palette, my main focus was accessibility — picking colors with enough contrast to enhance readability. Little did I know accessibility is not the only thing you should have in mind.
Content
- Avoid using pure black
- Match the temperature with your primary color
1. Avoid using pure black
A pure black (#000000) text on white backgrounds. This high level of contrast can cause a few issues. Just to name a few:
- 🥺 Increases eye strain
- 🥺 Weakens reading stamina
Instead, try using a dark grey color, which is much softer on the eyes:
(Reference: Why You Should Never Use Pure Black Text or Backgrounds)
2. Match the temperature with your primary color
Next step is to saturate your greys with a warmer or cooler tone, as if you were adjusting the overall temperature of your website.
(Reference: Steve Schoger | Refactoring UI | CSS Day 2019)
Just like in nature, our eyes perceive colors based on the temperature around us. Picking colors the same way could make your app look more cohesive and natural.
Take a look at this following comparison:
The right example looks a bit unnatural compared to the left, because the warm greys are clashing with the primary blue — a cooler temperature. To make sure your greys are matching your primary color’s tone, it may be a good idea to choose within the same hue.
To give an example, let’s say your primary color is this green color:
One way to pick your greys is by starting with the primary color’s HSL. While not touching the value of the Hue, adjust the Saturation and Lightness. Doing so, you can discover and experiment with greys that have similar tones.
An alternative approach would be to manually choose from the color picker, adjusting the nob — which would be the same as staying within the same hue.
Conclusion
- Avoid using pure black
- Match the hue with your primary color
With these tips you can achieve a more natural, cohesive look without damaging the user’s eyes.
I hope this helped. I am open for feedback and any suggestions. Thank you for reading till the end!
