Tag Archives: color

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

On Smells and Colors — Medium

When I was six years old, or so, I told someone that I didn’t have a sense of smell. It was my mother, and she didn’t believe me. I don’t hold this against her in the least. It was the 1970s, and we had a different attitude toward those sorts of things.

Also, I was six, and made a lot of stuff up.

It’s not that hard to live without a sense of smell, but not a day goes by when I don’t think about it. Living with two little boys, I’m bombarded with fart jokes, and that’s the least of it. If you think it’s

easy, though, you’ve probably never imagined being anosmic. That is, not having a sense of smell. The truth is that anosmics know we’re missing out on something, but haven’t the foggiest idea of what it is.

Lacking one of the five senses as a kid, I had to come up with coping strategies.

Curated by (Lifekludger)
Read full article at Source: On Smells and Colors — Medium

Games reveal the contrasting colors of accessibility

I had to hear it from Wil Wheaton.

Talking to the creators of open-world hit game Uncharted on his show,Conversations with Creators, the geek legend praised a feature that helps you guide protagonist Nathan Drake around its vast, sprawling environment: “And I love there’s that subtle yellow path,” he said. “I never got lost!”

When I heard him, my eyes widened. …

Why didn’t I know about the yellow path? Because I never saw it. I was born with an extremely rare eye condition known as achromatopsia nystagmus.


I know what you’re thinking. “Okay, Anton. We get it. Gaming while achromat is tough. Did you have any solutions?” Yes. Yes, I do. And the cool thing is that some solutions are so easy, AAA developers will facepalm for having not considered them before.

Curated by (Lifekludger)
Read full article at Source: Games reveal the contrasting colors of accessibility

The designer’s guide to digital accessibility | Web design | Creative Bloq

How to create accessible designs that work across print and digital.

The notion of accessibility may bring to mind ideas of screen readers and voice control, but it’s about much more. Some impairments, for example, often go unnoticed. Take colour blindness: one in 12 suffer from the condition, so a design that uses only colour to convey information is useless to a large number of users.

Then there are those who aren’t technically blind but do have some level of visual impairment. Designing with these users in mind not only helps them, but makes your work easier on everyone’s eyes.

Curated by (Lifekludger)
Read full article at Source: The designer’s guide to digital accessibility | Web design | Creative Bloq

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

Color Is Relative: Designing for Accessbility

In “Color Is Relative: Designing for Accessbility”, web designer and illustrator Geri Coady opened our eyes to the prevalence of colorblindness as well as the usability issues our design decisions can pose for those readers. Afterwards, she fielded questions about starting points, creating accessible palettes, navigating brand guidelines and more. Here’s what she had to say.

curated by (Lifekludger)
Read full article at Source

A Guide to Color, UX, and Conversion Rates

Color is one of the most powerful tools in the designer’s toolkit. You can use color to impact users’ emotions, draw their attention, and put them in the right frame of mind to make a purchase. It’s also one of the main factors in customers’ perception of a brand. With an infinite number of possible color combinations out there, it can be hard to decide what colors will make the biggest impact on your site or app. It would be impossible to test everything, but we’ve picked up a few tricks and trends about how color affects users’ attitudes and behavior.

In this article, we’ll cover basic color theory, psychology, accessibility issues, and impact on conversion rate. We’ll also share some of the findings from a recent 50-person study we ran to find out how men and women perceive color schemes differently and how color can attract attention and make a website memorable.

Curated by (Lifekludger)
Read full article at Source: A Guide to Color, UX, and Conversion Rates

Designing For (and With) Color Blindness — INTREPID INSIGHTS — Medium

Every time someone finds out I’m color blind, I’m always hit with the same question: “So, what color is this?” 95% of the time I’ll answer correctly, which is always followed by, “Wait, so if you can tell this is {insert color}, then how are you color blind? What do you see?”.

This is where the joy of explaining how colorblindness works, and how it affects me comes into play.

As designers, we constantly worry about legibility, how engaging content is, whether hit targets are big enough, or if a user can navigate through a workflow. But we often forget about the one in ten people that are colorblind. Too many times have I downloaded an app or game only to realize that using it was a huge pain. I’m often unable to distinguish one object from another or determine how something is labeled.

If 1 out of every 10 users finds your app to be difficult or even impossible to use, your ratings and reviews will drop drastically. So, how do we test for this? How do we fix any issues? And how can we prevent issues from popping up to begin with?

Curated by (Lifekludger)
Read full article at Source: Designing For (and With) Color Blindness — INTREPID INSIGHTS — Medium