Contrast Ratio is the measurement of the visual difference between background and foreground colors. This difference is expressed mathematically.
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.
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.