Pick Better Colors with this Pro tip — Black & white test for designers 🧪
Even though we see color, we understand the world in black and white. Here is one image in 3 formats,
- The first one has no color it is in black and white but we can still understand that there is a flower in the picture
- While the second one has all the colors but it lacks the black and white (Values) of the image and it is quite difficult for someone to understand what it is.
This is why I say that we understand the world in black and white, and knowing this will help us choose better colors.
What is “black and white” in colors?
What I mean by the black & white in colors is the value. The value is a measure of the lightness or the darkness of a color ranging from white to black.
Every color has a value associated with it which decides how light or dark it would be.
How can this help me in choosing colors?
Have you ever been stuck with your design, thinking, “It is just not good enough but I don’t know how to improve or fix it!” well this tip could help you out then.
1. The Black and White Test.
Take this design for example, here is a banner that seems decent, not bad or great but we don’t know exactly is the problem here. The method I use to diagnose these issues is what I call the black & white test.
Like the title says, to do the black & white test we need to change the image to Black &white. But before that.
Here is a good composition, one thing that is common in all delightful compositions is how they have highlights, mid-tones, and dark tones distributed and placed in contrasting ways to grab interest.
Now we can see the banner from above in black & white, and there seem to be no light parts (highlights) in this composition. Even though I have created this as an example it is common to find issues like these.
Sometimes the issue could be that there are not enough highlights or not enough dark tones.
In order to fix the issue in the current design, we are following I need to add more highlights (whites) to make it better, and here is how they compare.
2. Finding Contrast
While in black & white we can also identify parts of an image where there isn’t enough contrast between the colors. When we notice places where the greys are very similar next to each other.
These might not be apparent when we view them with colors. Small changes like this can improve the visual.
We can use this method while creating color palettes as well.
Final Thoughts
When you are unable to find the problems in your design, The black and white test is a good way to diagnose it and see the underlying issues in terms of color.
Overall, if you have a solid grasp of how this method works then we can apply it in more advanced ways such as using this to create color palettes from other designs. Using this to highlight interest areas and so on. More on these in my future articles✏️
