Colour contrast in websites and documents is an important part of universal design for the web. This article will outline what colour contrast is. In addition, the article will explain how to ensure good colour contrast in websites and documents through use of a colour contrast checker.
Colour Contrast in Websites and Documents
One principle of the Web Content Accessibility Guidelines (WCAG) requires that web content must be perceivable by people with disabilities. For example, people who are visually impaired must be able to clearly tell the difference between text and its background. Likewise, people must be able to see images, as well as links and buttons. As a result, websites and documents must have good colour contrast between the foreground and the background. In other words, there should be a great difference between the colour of a website’s text or images and its background. For instance, black text on a white background provides good colour contrast. On the contrary, yellow text on a white background does not provide good colour contrast.
How to Check Colour Contrast
WCAG includes ratios for good colour contrast. For average-sized text, there should be a ratio of 4.5:1 or more between foreground and background colours. For larger text, the ratio should be 3:1 or more.
People who are not visually impaired may find it difficult to guess the contrast ratios between colours. Therefore, many websites help content creators check the contrast between colours they plan to use for their foregrounds and backgrounds. For example, the Web Aim Contrast Checker has fields where a content creator can select their foreground and background colours. Then, the content creator can learn whether this combination passes or fails colour contrast. If a chosen colour combination fails, the content creator can try to use different colours, until they find a combination with good colour contrast.
In addition to basic contrast between foreground and background, WCAG 2.1 also includes requirements for non-text colour contrast.