Tag Archives: contrast

In Plain Sight — Shopify UX — 1

In Plain Sight: Text, Contrast, and Accessibility

This is the first post in a series on accessibility from Shopify UX’s team. We’re publishing posts every two weeks. You can check out the introduction here.

Contrast is one of the basic elements of graphic design. It lets us tell things apart. Yet in UI design, at least for the web, there is a perpetual temptation to skimp. Things tend towards gray-on-gray.

Especially when it comes to text, having enough contrast is essential. This isn’t just an aesthetic matter. We want everyone to be able to comfortably read the text on our sites and apps. It’s also worth remembering the world isn’t divided into those with perfect vision and those with disabilities. Eyesight differs across a wide range among the general population. Many of us wear glasses, and everyone’s vision worsens as we age. (That reminds me: I probably need a new prescription.)

Now that I’ve reminded you it’s important, what is contrast, exactly? Essentially, it’s the perceived difference between two colors. Mind blown, right? Okay, bear with me, because there are several aspects of color that contribute to this perception. The main one is the difference in lightness (also known as luminance) between those colors. In addition to luminance, other aspects of color also make a difference to contrast. Keep this in mind, as I’ll explore this in greater detail later.

Practically then, how do we ensure our text has enough contrast on screens? It might seem simple: use dark enough text. End of story. But that’s only true if contrast is our only consideration: there are cases where other solid, usability-based concerns conflict with ideal contrast requirements. Getting text contrast right is harder than it seems. The good news is that a few simple rules of thumb can take us a long way. When we run into more complex scenarios, a deeper understanding of the issues can help point us in the right direction.

Source: In Plain Sight — Shopify UX — Medium

How to Measure Color Contrast, for Web Accessibility …

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

Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!

The simplest, easiest tool for quickly finding good contrast:



As you type, the contrast ratio indicated will update. Hover over the circle to get more detailed information. When semi-transparent colors are involved as backgrounds, the contrast ratio will have an error margin, to account for the different colors they may be over.

Curated by (Lifekludger)
Read full article at Source: Contrast Ratio: Easily calculate color contrast ratios. Passing WCAG was never this easy!

Designing a landing page for color-blind people – Elokenz Blog

One thing you should know about color-blind people, is that while most of them see blue they can’t distinguish green from red. So, having a blue logo is fine, while having a red or green logo is bad, because these colors are really different for color-blind people and they might be used by your partners or clients in a context that you don’t control.

Here you see that blue is not easily confused. This is the reason why hyperlinks are blue. I’ve also read a rumor stating that it is the reason Mark Zuckerberg plumped on blue for the dominant color in Facebook’s design because of his color blindness.

Now you understand why so many logos are blue-ish.3 Pro tips to enhance your designs for color-blind peopleUse tools to help youIf you ever want to design something for color-blind people, you should know that there is few software out there to simulate that on your own computer. Personally I used ColorOracle to get a quick feeling about my layouts. However, I discovered later that the option is available in Photoshop (under ‘view’ > ‘proof setup’ > ‘color blindness’). This allows professional designers to quickly check their work.

Curated by (Lifekludger)
Read full article at Source: Designing a landing page for color-blind people – Elokenz Blog

Designing with Contrast ◆ 24 ways

When an appetite for aesthetics over usability becomes the bellwether of user interface design, it’s time to reconsider who we’re designing for.

Over the last few years, we have questioned the signifiers that gave obvious meaning to the function of interface elements. Strong textures, deep shadows, gradients — imitations of physical objects — were discarded.

And many, rightfully so. Our audiences are now more comfortable with an experience that feels native to the technology, so we should respond in kind.

Again and again, we place the burden of responsibility to participate in a usable experience on others. We view accessibility and good design as mutually exclusive. Taking for granted what users will tolerate is usually the forte of monopolistic services, but increasingly we apply the same arrogance to our new products and services.

Curated by (Lifekludger)
Read full article at Source: Designing with Contrast ◆ 24 ways

Ensure High Contrast for Text Over Images – Nielsen Norman Group

Summary: If you place text over a background image, make sure it’s readable by providing adequate contrast. Subtle tweaks can increase the contrast without affecting the overall aesthetic of the site.

A well-chosen visual adds interest and can set the tone of a website, in addition to (hopefully) conveying some meaning. Eyetracking research has shown that people are attracted to information-carrying photos, when the images are related to the user’s current task. (If instead the images appear to be purely decorative, they will likely be completely ignored.) Images can quickly prompt an emotional response in viewers and can spur them into taking some type of action. This ability of an image to elicit a positive visceral response has caused many designers to create interfaces that are highly visual, downplay text, and often contain large background images or videos. (Large pictures are frequently encountered in conjunction with minimalism, although they do not quite define this design trend.)

Because images play such an important role, often designers end up placing text over an image to leverage the attention-grabbing aspect of the photo while providing text-based content to communicate actual information. However, these endeavors commonly backfire, usually when the contrast between the text and the background is too low. According to accessibility requirements for color contrast, text that is not purely decorative or part of a logo should have a contrast ratio of at least 4.5:1 (or 3:1 for large characters, defined as an 18-point font, or a 14-point bold font).

Curated by (Lifekludger)
Read full article at Source: Ensure High Contrast for Text Over Images