Tag Archives: colour

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

Accessibility Design: Color Blindness – Alan Zucconi

This tutorial will teach you how to create and use post-processing effects which simulate how colour blind players might experience your Unity game. One of my most anticipated games is The Witness; since it uses so many vibrant colours, it will be used as an example in this tutorial.

Curated by (Lifekludger)
Read full article at Source: Accessibility Design: Color Blindness – Alan Zucconi

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.

SOLUTIONS

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

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

Using Color Theory to Improve Website Accessibility

The very first step in creating a color blind-safe website is choosing legible and well-matching colors for your color palette. Your task is setting aside color meaning and psychology and focusing on good color combinations and contrasts for creating legible website pages with strong hierarchy and accents.You can use the following techniques and approaches to avoid possible pitfalls and have an accessible website design:

Curated by (Lifekludger)
Read full article at Source: Using Color Theory to Improve Website Accessibility