Color Contrast Crash Course for Interface Design

There are an estimated 285 million people in the world who are visually impaired. This number includes anyone from legally blind, to those with less than 20/20 vision. This short guide, written during the creation of the Contrast MacOS app, will help you achieve the accessibility standards outlined in the WCAG 2.0, specifically with foreground and background color when it comes

OS: High Contrast versus Inverted Colors

There are different ways to make a web page more easy to read, but there are two options that come directly from the operating system that many developers and designers seem to confuse — high contrast and inverted colors. While the confusion may not be a big deal in most contexts, when talking about implementing

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

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

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

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

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

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

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.

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