Is it a good practice to give H1 headings the website's primary color?

Design & UX
1

I would suggest that a website should have four basic colors besides Black color, Gray colors, and White color (all by CSS variables).

  • Primary color like Blue.
  • Secondary color like Linen.
  • Action color like Orange.
  • Exception color like Green, reserved for special cases like the background of some text structures.

Is it a good practice to give H1 headings the website’s primary color?

2
  • Does it have any significant advantage to users?
  • Does it make the website seem more “official” or “invested”?
3

Those proposals seem very limiting and could cause more harm than good. A site should be a representation of that person/organization’s “brand”. It needs to be consistent and complimentary to itself.

A brand can have more than four colors (and I do want to mention that black and white ARE colors). Most branding information I’ve read say that there can be anywhere from 3-8 in a branding palette, but even that gets a little hairy because you can also get into shades of colors, which expands that palette exponentially.

You also seem to be relying on a bit of an outdated implementation of H1. Best practice USED to be a limit of one H1 per page. But with the advent of the headers, footers, sections and articles elements, there can easily be more than one H1 per page now.

I’ll repeat it because it’s important - consistent and appropriate delivery is the important factor. Which color is chosen doesn’t matter.

1 Like
4

Further to what @DaveMaxwell has pointed out,
here is some essential reading…

Contrast and Color Accessibility

…plus a useful tool with which to practice and
hone your skills…

Contrast Checker

1 Like
5

In webaim.org itself posts have an H1 with some Blueish Black or dark color and not mere Black color.

6

I meant to Black and White as colors which are not “basic colors” but maybe I should have said not “colorful colors”.

7

looks at the forum’s header