Ensuring Sufficient Contrast Ratio Between Text and Background on the Web

What Is Minimum Contrast? 

Whenever your website displays text on top of a color or an image, there needs to be enough contrast between the text and the background for it to be easily readable. 

Contrast is expressed as a ratio — for example, white and black have the highest-possible contrast ratio of 21:1, while white and yellow have a ratio of just 1.07:1. 

The Web Content Accessibility Guidelines (WCAG) of the World Wide Web Consortium (W3C) address the contrast issue in guideline 1.4.3. For a website to achieve level-AA conformance, a widely accepted accessibility benchmark, the contrast ratio between text and background must be at least 4.5:1. 

Why Is Minimum Contrast Important? 

If your website doesn’t achieve fully accessible color contrast, you’re potentially failing to serve the needs of many users. 

For people with visual disabilities, color contrast makes an enormous difference to website legibility and usability. Almost all types of visual impairment, from myopia and hypermetropia to diabetic retinopathy and macular degeneration, make it more difficult to read text when the color contrast is low. 

Low contrast can also create problems for people who are color-blind, even if their eyesight is otherwise perfect. Equally, many senior citizens — who make up around 15% of the U.S. population — have low contrast sensitivity. 

Insufficient contrast doesn’t just mean leaving potential customers out in the cold. It could also put you at risk of a lawsuit under the Americans With Disabilities Act (ADA). 

What Can I Do to Fix the Issue? 

There are some subtleties in the details (because readability also depends on factors such as font size and weight) but fixing a single contrast issue is a relatively easy task.  

For normal-size text, the AA requirements stipulate a ratio of 4.5:1 between foreground and background colors, while for large text and non-text elements such as form fields, it’s 3:1. So you can simply use a color contrast analyzer tool (for example, AudioEye's free Color Contrast Checker), plug in your color values pair by pair, read off the ratio, and check that you conform. In fact, some tools include immediate feedback on conformance to different levels of WCAG. 

However, even with a color contrast analyzer tool, finding and correcting all contrast problems across a large and frequently changing site is far more challenging. 

AudioEye combines automated scanning and remediation technology with human-led testing and correction, providing a unique hybrid service that resolves accessibility complications on an ongoing basis. By subscribing to the AudioEye service, you get the benefit of rapid identification and remediation of text contrast and other key accessibility issues. You also gain access to a team of human experts who can support your web designers in adopting universal design practices for the longer term. 

Don’t delay — subscribe today and maximize your digital accessibility with AudioEye.