The essence of accessible color contrast is simple. Given a foreground color and a background color, the contrast between those two must be distinguishable in a wide variety of environments, by individuals with different color perception abilities. Using the Web Content Accessibility Guidelines – WCAG — version 2.0, these contrasts are measured using an algorithm that compares the relative luminosity of the two colors and returns a ratio, which is to exceed WCAG’s recommended minimum.But the reality of color contrast is more complicated. There are a lot of assumptions to work out before you can be confident that visually impaired shoppers can use your ecommerce site.
…
What Are ‘Foreground’ and ‘Background’ Colors?
…This clearly applies when text needs to be distinguished from the background color. White text on a white background may as well be absent entirely. But it also applies to neighboring text, such as a link within a paragraph. If that link looks the same as the text surrounding it, there will be no way of identifying visually which text is linked.
If your links are underlined, this becomes a non-issue.
What Two Colors Are We Comparing?
The simple case of text in a single color and a background in another is easy. When assessing contrast, automated tools will reliably identify the two different colors.
But that is not true with other common cases:
- Text with text-shadow;
- Background gradients;
- Image backgrounds;
- Transparency in one or more colors.
…
Adding a thin black outline with a minimum width of one pixel is a WCAG recommendation to maintain a contrast ratio between the letter and its background. While this doesn’t directly correlate to text shadow, it’s reasonable to extrapolate that adding a text shadow to darken the boundary of your text allows you to use it for measuring contrast, rather than depending on the background color.
Challenges with Transparency…
What Are the Contrast Requirements?…
Resources for Color Contrast Testing…
…
Curated by (Lifekludger)
Read full article at Source: How to Measure Color Contrast, for Web Accessibility | Practical Ecommerce
life tools 