Tag Archives: color

Best Color Contrast Checkers for Accessibility Testing

Whether you are designing, developing, testing or auditing, a contrast ratio checker is the best way to ensure your site or app passes accessibility criteria. As a designer you can use a simple value checker to plug in foreground and background color value as you use them. You could also use other tools to check final design designs in their entirety. As a developer or someone conducting a website accessibility audit, you’ll likely want to use tools that can check completed web pages.

Contrast Ratio Requirements for Text in WCAG 2.0 Level AA & AAA

Accessibility Color Contrast Example
When designing or developing accessible websites, web applications or mobile apps, it may be obvious that text should be very legible. After all, the more difficulty user have reading your information, the less likely they are to interact, engage, purchase or take whatever other action you consider key to success. This is doubly so when developing for persons with low-vision.

The Web Content Accessibility Guidelines (WCAG) 2.0 stipulate two minimum contrast ratios between text and its background color on websites, applications or mobile apps.

To meet the level AA success criteria text smaller than 18 point (or 14 point if bold) must have a 4.5:1 contrast ratio. All larger text must have a contrast ratio of 3:1 or greater.

The more stringent AAA criteria the requires text under 18 point (or 14 point if bold) to exceed a contrast ratio of 7:1. All larger text must have a contrast ratio of at least 4.5:1.

Curated by (Lifekludger)
Read full article at Source: Best Color Contrast Checkers for Accessibility Testing – Vance Bell, Philadelphia, PA

How to Make Your Website Accessible to People Who Use a Screen Magnifier

There’s a lot of content out there on how to make your website accessible. But I haven’t seen much on the subject of accessibility to users of screen magnifiers. I’m one of them, and I frequently run into annoying issues on the web.In this article, I’ll give some tips on how you can make your website more accessible to users of screen magnifying software.

Source: How to Make Your Website Accessible to People Who Use a Screen Magnifier

Essential Color Tools for UX Designers

Essential Color Tools for UX Designers

Color is one of the most powerful tools in the designer’s toolkit. At the same time, color is a tricky concept to master — with an infinite number of possible color combinations out there, it can be hard to decide what colors to use on your site or app. To make things easier, I’ve created a list of the best tools for choosing color palettes. I’m sure they will save you a lot of time. In this article you’ll find tools that will help you:

  • Find inspiration
  • Create your own color scheme
  • Make color scheme accessible

Curated by (Lifekludger)
Read full article at Source: Essential Color Tools for UX Designers – UX Planet

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