Contrast Ratio

Definition

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



Explanation

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 over come their disability every month. Make your contribution to the society.

Try For Free
  • Free 3-day trial
  • No credit card required
  • Easy setup