The WCAG contrast ratio is a measure of the difference in luminance between the foreground and background colors of an element on a website. It is used to determine how easy it is to read the text on a website and ensure that it is accessible to people with visual impairments.
To understand the WCAG 2.1 contrast ratio, it is helpful to think of the foreground color (the color of the text) as a light source, and the background color as the surface it is shining on. The WCAG 2.1 contrast ratio is a measure of how much brighter the light source is compared to the surface it is shining on. A higher contrast ratio means that the text is easier to read, because there is a greater difference in luminance between the text and the background.