I have seen that some web designs implement an almost black font color (hex #001c00) in their designs instead of a pure black color (hex #000).
Does the design actually benefit from this or is this practically the same as using a black color?
I am a hobbyist web designer and developer and can’t seem to grasp the difference.
Thank you for visiting the Q&A section on Magenaut. Please note that all the answers may not help you solve the issue immediately. So please treat them as advisements. If you found the post helpful (or not), leave a comment & I’ll get back to you as soon as possible.
I always prefer a very dark grey to pure #000. The choice might look personal, but here’s the theory behind it:
There are very little 100% black things in nature. All black objects you see have some for of light reflected on them, shadows are never completely black.
When you #000 in a design, it overpowers the other colors. It attracts too much attention, because it is not natural. Of course a website is not natural, but the brain reacts in a similar way nonetheless.
That’s why lots of designers go for dark grey instead. You can do a search by color in sites like Dribbble. The difference is small, but noticeable: Dark grey is more frequent and looks better in lots of cases.
For example: Designing in the Dark: 10 Dark Sites and Their Color Schemes (none of them, I think, use #000 as part of their palette)
These are all interesting answers, but a tad esoteric. The reason is rather simple. Contrast is good for readability, but too much can be considered unnecessary at best, and detrimental at worst.
Nearly all printed text is black on white paper…but rarely is it pure white paper. It’s often an off-white. And even then, because it’s printed, it’s using reflective light.
On screen, where it’s projected light, 100% black with 100% white is the maximum possible contrast. This can be overpowering, hence the preference by many to use a dark gray on white, or black on light gray.
There are minimum contrast requirements to meet accessibility and general legibility standards. You definitely want to meet those, but that also doesn’t mean you need to max the contrast out at 100%, either.
Plus, a lot of designers feel that it looks better. To relate back to print, dark gray text can be seen as a more luxurious look, as it’s more expensive to print gray text on paper than black. (Gray text at small sizes typically requires a gray spot color).
Bottom line: using less than pure black black on white when on screen better emulates what we read offline, meets contrast requirements, and, for a lot of designers, just looks better.
Normally I wouldn’t post in a question that has been answered as succinctly as this one, but I do think there is a bit of information to add here.
Coming from a graphic design background, there is also the concept of “warm” and “cool” grays. These are grays that have a higher presence of warm or cool colours in their mix respectively.
#221111 – an example of a warm gray
#111122 – an example of a cool gray
The gray that you specified: #001c00 is a cool gray tinted slightly with green.
As Vincent mentions, these slight sheens are not immediately picked up, but instead lend to the greater overall picture and feel.
People subconsciously perceive details they do not consciously notice. A very slight sheen of a certain colour is perceived and can reinforce a colour scheme and thus a ‘feel’, a message or a mood.
You could ask the same question for why some papers are off-white, or for the use of different ‘rich blacks‘ in print, and my answer would be similar.
There are several reasons why this could be so
• To create atmosphere by looking more natural to the eye
• To be consistent with brand colours, perhaps this shade of black is used elsewhere across the design
• To look closer to print (slightly paler blacks are more reminiscent of the way black looks on a printed page)
• A mistake, the creator intended to use the darkest black but eyedroppered the colour from a region that was not actually true black
• In print, designers may use 99% black as it automatically knocks out ink areas below it