Use grey for less important text

How to use it

Make less important text a grey or equivalent de-emphasised colour compared to more important text near it.

When to use it

If you have text or other content that is less important than something it sits near, you can de-emphasise it using the colour of the text, as well as other techniques like size. In the example below I've made the text smaller and also changed the colour to a light grey, since the tags of the article probaly don't need as much attention from the user as the title of the article.

What to watch out for

Be careful that your contrast is still high enough. The background and foreground colour for the tags below fail all WCAG accessibility guidelines on text colour contrast.

Examples