Icons and images

Icons

I cons should only be used if they can clearly add value. Where used, ensure they are clear, simple and accompanied by supporting text. While DCC does use icons in many places, we do not specify a standard set to be used across the board.

We would however prefer that Font Awesome is used for function icons such as:

  • Sharing or connecting to social media
  • Chevrons or arrows
  • Information or error indicators
  • To highlight contact information such as phone numbers, web addresses and email addresses

Responsive images

It is preferred that responsive images using ‘srcset’ for content and media queries for backgrounds are used throughout.

Images formats

All images added to a DCC website should be appropriately optimised. Avoid using PNG 24 unless needed for transparency.

Text on images

Text should never be part of an image.

Where text does overlay an image, a solid or semi-transparent background should be applied to improve accessibility. If considering a transparent background, then the transparency ratio used should ensure that colour contrast values are not compromised.

Avoid images scrolling or moving behind text that does not have a solid background.

This Chrome extension can help test if your colour contrast values conform to W3C guidelines.

https://accessibility.oit.ncsu.edu/tools/color-contrast-chrome/