Accessibility
Elements must have sufficient color contrast
Sufficient color contrast is crucial in accessibility to make sure that text and elements on a web page can be easily distinguished by individuals with varying degrees of color vision impairment, enabling them to access and understand the content effectively.
Some people with low vision experience low contrast, meaning that there aren't very many bright or dark areas. Everything tends to appear about the same brightness, which makes it hard to distinguish outlines, borders, edges, and details. Text that is too close in luminance (brightness) to the background can be hard to read.
There are nearly three times more individuals with low vision than those with total blindness. One in twelve people cannot see the average full spectrum of colors - about 8% of men and 0.4% of women in the US. A person with low vision or color blindness is unable to distinguish text against a background without sufficient contrast.
Color transparency and opacity is taken into account in the background.
Color transparency and opacity in the foreground is more difficult to detect and account for due to:
Fixing the problem
Ensure all text elements have sufficient color contrast between the text in the foreground and background color behind it.
Success Criterion: Ensure color contrast of at least 4.5:1 for small text or 3:1 for large text, even if text is part of an image. Large text has been defined in the requirements as 18pt (24 CSS pixels) or 14pt bold (19 CSS pixels). Note: Elements found to have a 1:1 ratio are considered "incomplete" and require a manual review.
Use the color contrast analyzer below to find colors that pass the guidelines.