Skip to main content

Check, adjust, and convert foreground and background colour combinations for compliance with W3C accessibility guidelines.

- (incept: )

Colour contrast check, amendment and Hex to RGB conversion

Example: 16px normal copy, 19px bold, 24px large.

This text sample attempts to visually demonstrate how readable this colour combination is, for normal or bold text.

Chunky 14pt bold text. Large 18pt text.

Original colours for comparison.
? Show details

Why colour contrast is important

The crux of it is readability.

  • High contrast allows everyone to read text at greater speed.
  • As contrast sensitivity declines with age, older people require more.
  • Old washed-out monitors have very poor contrast.
  • High contrast helps combat screen glare on mobiles.

With good colour contrast you reach more users!

Further information: Contrast Rebellion and Low-contrast text is not the answer.

So another colour contrast test tool?

On the day-to-day I required a simple tool which would give me the nearest AA match to a colour pair. It appeared the other tools only resulted in a pass or fail.

This tool allows me to quickly bounce back to the designers a colour which passes, allowing them to make an informed decision over appropriateness.

That and it makes for a handy Hex to RGB converter. Actually it'll convert colour keywords, HSL, HSLa or RGB into either Hex or RGB.

A third of your visitors need glasses

In fact some two-thirds of your audience need help to view websites. Amazingly, half of them don't wear their glasses or contacts when browsing online.

Please bear this in mind when choosing colour combinations. Remember, poor colour contrast and font size choices, may make text too difficult to read.