Contrast Ratio


Contrast Ratio is the measurement of the visual difference between background and foreground colors. This difference is expressed mathematically.

Accessibility Enabler Logo

Meet complete Accessibility Solution that is easy to install and highly customizable. With intelligent and breakthrough design for mobile and desktop, it works flawlessly on any website design.


Imagine you have a black background on your computer screen. And there’s some text written on the background in grey colored font. Do you think it is readable? Of course not! It is highly difficult.

That is because of the wrong contrast between the background color and font color. This situation is where the contrast ratio comes into play.

Such a wrong combination of background and font color makes it difficult for a normal human eye itself. Then reading is impossible for partially blind or people with color-blindness. Even dyslexic people or old aged people find it hard to read your website content.

So to make it easy for the disabled, choosing the right contrast ratio for designing your webpage is very important. By doing this right you will be making reading easy for the disabled. You will also be improving your website’s usability.

More Information

Recommendations by Web Content Accessibility Guidelines or WCAG s for text contrast on the web:

  • The ratio of 1:1 for white text on a white background.
  • The ratio 21:1 describes black text on a white background.
  • The ratio 4.5:1 represents the minimum legibility on the web.
  • 7:1 is the contrast ratio which offers full accessibility.
  • The ratio of 4.5:1 for normal text and 3:1 for larger text.

Make your website a better place for everyone

Accessibility Enabler helps thousands of people to overcome their disability every month. Add an accessibility toolbar to your website and build a better society around yourself. Start making your contribution from today.

Try For Free