What is the color contrast?
Contrast is the difference in luminance or colour that makes an object (or its representation in an image, icon or display) distinguishable.
In visual perception of the real world, contrast is determined by the difference in the color and brightness of the object and other objects within the same field of view.
On a web page, the amount of contrast required varies with different parts of the page. You usually want a high contrast between text and its background color. But too high contrast between design elements might give an unsettled and messy impression.
Contrast is important because it allows designers and marketers to actually guide the attention of visitors who come to their websites, and this is done with and without color.
WCAG 2 Level AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text or for user interface components.
WCAG 2 Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text.
Large text is defined as 14 point (18.66px) and bold or larger, or 18 point (24px) or larger.