color-psychology-principles-to-bolster-your-brand

When you’re looking at a jacket, sofa or something else, the first thing you look at is COLOR. 

You either attracted to it or it repels you so, think of the color that your brand has. 

30kstrategy-alex-gilev-ux-design-saas-strategy-uxstrategy-color-branding-logo-design-identity.jpg

That’s why, I pay closer attention to color choices when it comes to branding. It matters a lot and has cognitive implications on your customers.

Let’s dive in!

IMPORTANT: The right color palette will evoke the right emotions and build positive associations with your brand!

Below, I’ve listed a few screenshots from the color discovery that is a part of a branding strategy:

color exploration.jpg

Emnify color exploration_Page_02.jpg

In my work, I don’t simply rely on my personal judgement, but rather I prefer to supplement it with a cognitive psychology principles for a maximum impact.

To develop a color palette that supports many design goals, you’ll need to know which colors attract the eye more than others.

Take a look at this ‘Visual salience of colors chart’

color-exploration.jpg

Visual salience of colors chart explains how your brand color stacks up against other dominant (salient) colors. It can also help you pick the color tint that will draw more attention to your logo/identity,rather than your competitors.

It’s advised to stick to only 1 primary salient color to avoid a.k.a. ’Las Vegas’ strip design gutter where everything seems important and calling for your attention.

Emnify color exploration_Page_28.jpg

Another important factor to be aware of – Arousal level. 

Arousal is the level of physical and cognitive energy experienced. When someone’s arousal is they’ll feel energized, focused, and experience a strong sense of cognitive energy.

In behavioral psychology, high-arousal colors evoke pleasurable emotions to motivate users complete certain actions.

At the end of the discovery, I give my recommendations on the best color variations as well as explaining the strengths and weaknesses of each color option. One of my principles is I never push clients to certain options because I believe that my job as a consultant is to give recommendations and then the company should choose what they feel would fit their needs better. That’s how relationships are built.

If you need help in solidifying your brand as well as establishing a bold visual language, feel free to get in touch.

Thank you for reading!

Till next time.

Alex

Alex Gilev is a UX/Brand consultant with a background in behavioral psychology, neuroscience, who helps SaaS companies to large Fortune 500 innovate in UX to maximize their competitive advantage.

RGB to HEX converter to instantly convert RGB color codes to Hexadecimal triplets, see result and copy to clipboard with one click! A RGBA and Hex Color CSS generator that helps you quickly convert and generate RGBA and Hex Color CSS declarations for your website. It comes with many options and it demonstrates instantly. What does this RGB to Hex converter do? It takes input in the form of values for Red, Green and Blue ranging from 0 to 255 and then converts those values to a hexadecimal string that can be used to specify color in HTML5/CSS3 code. Free online RGB color to hexadecimal color converter. Just load your RGB color and it will automatically get converted to a hex color. There are no popups or nonsense, just an awesome decimal RGB to hex converter. Load RGB, get hexadecimal.

How do I convert RGB values of a color to a hexadecimal string?

The RGB-to-hexadecimal converter algorithm is simple: make sure that your R, G, B (red, green, blue) values are in the range 0…255, convert R, G, B to hex strings, and then concatenate the three hex strings together. Convert RGB to Hex color values here:

RGB Input – it works both for upper and lowercase rgb or rgba codes, but you can ignore the starting rgb mark and the brackets. Make sure you add three numbers in the 0-255 range separated by commas.

HEX Input – the first field accepts values with or without the hash sign. It works for both 3 and 6 character long codes. The calculator can handle some typos too, for example when the second digit of a component is an invalid character, not in the hexadecimal range (0-F).

20+-color-tools-for-web-designers

Setting a basic color theme for your web design project might be an easy task, however, deciding upon the right combinations or coming up with a color scheme may get tricky, especially when you don’t know which color tool would work best for you.

So to help determine the best color schemes for your projects, here are some of the best color tools for webs designers. Let’s check out the list.

Read Also: Open Color – UI-Optimized color scheme for designers

Adobe Color CC

You may know this tool by its previous name Adobe Kuler. It’s one of the most popular features by Adobe allowing you to combine colors.

Adobe Color CC
ColourLovers

ColourLovers is an online community of color lovers. It contains images and their color palettes, so you can use them for your own work.

ColourLovers
Coolors

Coolors is a quick color scheme generator. It allows users to create and share color palettes in no time. It chooses the main color of the images and finds perfect color combinations.

Coolors
Color Snapper 2

Color Snapper 2 is a tool created for OS X Yosemite. It was made for graphic designers so they can play, modify, adjust, organize, save, and export colors on the screen.

Color Snapper 2
Colordot

Colordot is a great website and iOS app allowing you to create and share color schemes. You can choose color with a finger or a camera.

Colordot
Adobe Capture CC

Adobe Capture CC allows you to take a picture of anything you like and turn it into a color palette, create a brush, and pattern. It’s available on desktop and mobile.

Adobe Capture CC
LOL Colors

LOL Colors is one of the services created by Mackenzie Child. It’s a website with curated color palettes. Every colorful teardrop is clickable with ready-to-copy hex codes.

LOL Colors
Gradients.io

Gradients.io lets visitors use gradient fills for their images. The website contains a page full of squares in different color palettes with their hex codes for easier usage.

Gradients.io
CheckMyColours

CheckMyColours helps you combine foreground and background colors of all DOM elements. It’s created to check if the colors pairing create a proper contrast for people with color deficits.

CheckMyColours
Color Hunter

Color Hunter is a useful tool for designers. Just find an image you like and upload it (or enter image URL) to the website. The service will create a color palette from your chosen image.

Color Hunter
TinEye

TinEye allows you to extract color from over 20 million Creative Common images from Flickr. Just select a color, slide dividers to adjust the color and add tags to your search.

TinEye
Paletton

Paletton is made to help graphic designers create websites with proper color combinations. You can also use pre-made color palettes in a chosen color.

Paletton
Colorspire

Colorspire is a 3-steps color palette builder. You can choose a base color, then create a color scheme, and see huge colors preview.

Colorspire
Color Explorer

Color Explorer is one of the most in-depth color tools available out there. With its help, you can create, analyze, and customize your color schemes. It’s absolutely free.

Color Explorer
0to255

0to255 will help you to find darker and lighter shades of one color. It can be used to find a range of shades for one particular color.

0to255
ColorRotate

ColorRotate is a helpful color editing app for tablets. WIth 3D color scope, you can take a full control of colors of a subject.

ColorRotate
SpyColor.com

SpyColor.com is a free app that provides information about any color, including conversions to many color models, such as RGB, CMYK, HSL, HSV, and much more. You can create various color schemes, for example, complementary, split-complementary, triadic, tetradic, five-tone, clash and more.

SpyColor.com

Read Also: Find Awesome User-curated Color Palettes with Color Hunt

Designspiration

On this site, you can select up to five hues from a full-page palette. Then, it will generate a display of all the images in its database with this color combination.

Designspiration
ColorMunki

ColorMunki lets you create your own colors. You can create color palettes, find similar colors, and properly match them.

ColorMunki
Pantone

This service created for Apple users will help you to explore the world of colors and find new shades. You can discover color harmonies, values, and cross-references.

Pantone
ColorZilla

ColorZilla is Firefox and Google Chrome plugin extension that includes a color picker, eye-dropper, CSS gradient generator and palette browser.

ColorZilla
Color Hunt

Color Hunt is a new social media channel for color lovers. You can discover carefully picked color palettes, and choose some Hot, Popular or Random color schemes to use in your future designs.

Color Hunt
Material UI Colors

Material UI Colors is an amazing service to choose contrasting colors for material design.

Material UI Colors
ColorDrop

ColorDrop showcases hundreds of amazing color palettes you can use. For easier navigation, use sections “Favourites” and “Flat Colors”.

ColorDrop

how-to-use-color-blind-friendly-palettes-to-make-your-charts-accessible

Color blind friendly palette

Colors play a central role in data visualization. But what if your readers are color blind?

According to Color Blind Awareness, color blindness affects 1 in 12 men (8%) and 1 in 200 women (0.5%). There are an estimated 300 million color blind people worldwide, including Mark Zuckerberg, Bill Clinton and Prince William!

Color blind friendly palette - famous color blind people



Optimizing your graphics can help make them more accessible—and that doesn’t mean banishing color from your charts and graphs either. Contrary to popular belief, more than 99% of color blind people can, in fact, see color—just not in the same way as someone who isn’t impacted by color blindness.

In this guide, we’ll break down the different types of color blindness and their special considerations with respect to data visualization. We’ll also show you how to effectively use color blind friendly palettes to make your graphics available to a wider range of people.

We’ve put together some ready-made color blind friendly palettes to inspire you. Scroll down to the section 4 for that.

Table of Contents

  1. What is color blindness?
  2. What are the 3 types of color blindness?
  3. Why color is important to data visualization
  4. How to design charts with a color blind friendly palette
  5. Key takeaways

First thing’s first…

What is color blindness?

Color blindness—also known as color vision deficiency (CVD)—is a deficiency in distinguishing between different colors. It occurs when light-sensitive tissue in the back of the eye—the retina–fails to properly respond to variations in wavelengths of light, which enable people to see different colors.

Color blind friendly color palette - retina

IMAGE SOURCE

Although color blindness is primarily an inherited condition, it can also result from cataracts or trauma to the eye, as well as a number of diseases, including Parkinson’s, Kallman’s Syndrome and diabetes. Damage to the retina caused by aging can additionally cause color blindness.

What are the 3 types of color blindness?

Color spectrums of the 3 types of color blindness

IMAGE SOURCE

There are three distinct types of color blindness:

Red/Green Color Blindness

According to Colblindor, 99% of all color blind people suffer from red/green color blindness. This is further broken down into two distinct categories:

  • Protanopia: Also referred to as “red weakness”, individuals who suffer with this variation of red/green color blindness are unable to perceive red light.

Normal vision compared with protanopia

Left: Normal vision, Right: Protanopia

IMAGE SOURCE

The protanopia color spectrum looks like this:

Protanopia color spectrum

SOURCE

  • Deuteranopia / Deuteranomaly: Also known as “green weakness”, this type of red/green color blindness renders people insensitive to green light (deuteranomaly) or unable to perceive any green light at all (deuteranopia).

Normal color vision compared to color blindness

Left: Normal vision, Right: Deuteranopia

IMAGE SOURCE

The deuteranopia color spectrum looks like this:

Color blind spectrum - Deuteranopia

SOURCE

Red/green color blindness is inherited, and affects males more than females. The reason for this is because the genes responsible for this condition are contained within the X chromosome.

Color blind friendly palette - statistic

Because women have two X chromosomes, any deficiencies in one will typically be compensated by the other. Men, however, only have one X chromosome, and don’t have a “spare” to fall back on.

Color blind friendly palette - statistic



Blue/Yellow Color Blindness

People who suffer from blue/yellow color blindness have difficulty distinguishing between blue and yellow colors.

This particular form of color blindness–also known as Tritanopia–is far less common than its red/green counterpart. In fact, according to the U.S. National Library of Medicine, blue/yellow color blindness affects fewer than 1 in 10,000 people worldwide.

Because Tritanopia isn’t caused by a genetic trait linked to the X chromosome, it is equally present in both men and women.

Color blind friendly palette - Tritanopia

Left: Normal vision, Right: Tritanopia

IMAGE SOURCE

The Tritanopia color spectrum looks like this:

Tritanopia color spectrum

SOURCE

Complete Color Blindness

People who suffer from complete color blindness—also known as Monochromacy—are unable to distinguish between any colors at all. Monochromacy is extremely rare, occurring in 1 in 33,000 people, according to Colour Blind Awareness.

Complete color blindness

IMAGE SOURCE

Why is color so important in data visualization?

Color plays a significant role in data visualization. For starters, colors are used to highlight important information, as well as illustrate relationships between various types of data. Color also plays an instrumental role in guiding the viewer’s eye. It can even be used to stimulate emotion through color psychology.

Disney color wheel



You can even argue that the colors used in charts and infographics actually tell the story of the data they represent. As Eva Murray writes in Forbes:

In data visualization, color sets the tone and enforces a message for the underlying visual display. It creates a certain atmosphere and can turn an unassuming visualization into an emotion-filled data story.

WATCH: Everything you need to know about COLOR… in under 3 minutes

Knowing how to pick colors is important, but when you’re optimizing for accessibility, there’s more to consider than color theory and composition.

HOT TIP: Venngage’s Brand Kit feature makes it easy to automatically import your brand colors and brand fonts into your designs.

You can also use Venngage’s color picker tool to easily switch out different colors, a particularly useful tool for working with color blind friendly palettes.

Color blind friendly palette - editor

How to design charts with a color blind friendly palette

1.) Plan out your color scheme beforehand

Using a color blind friendly palette doesn’t mean you need to compromise on aesthetics or strip out all the color from your charts. By planning ahead, you can ensure a color blind friendly palette compliments your design, rather than clashes.

Color blind friendly color palette

IMAGE SOURCE

Even with a tool like Venngage, which can drastically scale back the number of hours required to create an infographic, it’s still ideal to flesh out your color scheme before you dive in and start a new project.

After all, if it turns out your colors aren’t particularly suited to color blind people—and accessibility is important to you—it’s better to find this out before you’ve invested considerable time and effort in the design.

If you’re not sure where to start, these color blind color wheels can be a useful reference to quickly determine how your colors will translate across different forms of color blindness:

Color blind friendly color palette

IMAGE SOURCE

Better yet, we’ve put together some versatile color blind friendly palettes:

Color blind friendly color palette



HOT TIP: If you’re stuck, try using a tool like Coblis, a free color blind simulator which will give you a better sense of how your images will appear to people with color blindness.

2.) Avoid problematic color combinations

Another reason you should plan out your color scheme beforehand is so you can avoid using problematic color combinations, some of which can make your charts or infographics completely inaccessible to color blind people.

Color combinations to avoid for people with color blindness include:

  • Red & green
  • Green & brown
  • Green & blue
  • Blue & gray
  • Blue & purple
  • Green & gray
  • Green & black

If you’re stuck and absolutely must use one of these combinations, try making adjusting the shades so one is extremely dark, and the other extremely light—most color blind people can detect contrast, so this likely will make things easier.

Color blind friendly palette - Problematic colors



3.) Use highly contrasting colors

As previously mentioned, contrast isn’t an issue for most people who are color blind. Darken and lighten your colors, respectively, to make the contrast more pronounced. You can also play with different hues, as well as levels of brightness and saturation.

Color blind friendly palette - template



4.) Use patterns and textures

Using patterns and textures in your design is a great way to incorporate visual elements into your design which don’t rely on color.

Color blind friendly palette - bar chart

IMAGE SOURCE

Venngage’s drag-and-drop design editor features a library of patterns you can use to enhance your design and make it more accessible.

Venngage editor - patterns

5.) Use symbols

Symbols and icons are a great way to make your designs more accessible because they can visually punctuate a message, without relying on color.

Color blind friendly palette - icons



Hot Tip: Venngage’s library includes over 4,000 icons you can use to make your infographics and charts more accessible.

Color blind friendly palette - icons

6.) Make your chart monochromatic

Because color blindness doesn’t impact the ability to distinguish between different shades, consider making your charts monochromatic. Using a restricted color palette will naturally mean there are fewer opportunities to use problematic colors or combinations.

Color blind friendly palette - template



Color blind friendly palette - template



7.) Keep your design clean and simple

When you’re designing for accessibility, it’s important to keep your infographics as simple and streamlined as possible. Adopting a minimalistic approach will help ensure your presentations are more easily understood, whether or not your audience is color blind.

Key takeaways for using color blind friendly palettes

Optimizing your infographics and charts for people affected by color blindness is important for both accessibility and inclusivity. It’s also possible to do without compromising the aesthetic quality in the process.

The following measures can help ensure color blind people are actually able to engage with your designs:

  • Selecting color blind friendly palettes
  • Avoiding problematic color combinations
  • Using different textures and patterns to highlight important information–not just color
  • Using symbols and icons to supplement color-coded messages, warnings and alerts
  • Using highly contrasted color combinations
  • Adopting minimalistic design to help avoid unnecessary confusion.

Combining all these elements will help make your designs more accessible to color blind people. After all, the more people you can engage with, the more impactful your work will be.

Related blog posts:

6 Ways to Use Infographic Icons Like a Pro

The Do’s And Don’ts of Infographic Color Selection

How to Pick Colors to Captivate Readers and Communicate Effectively

what’s-the-2020-color-of-the-year?-there-are-three-so-far

Twenty years ago, the Pantone Color Institute began a tradition that’s become ubiquitous across the paint industry: The Color of the Year. Equal parts trend forecasting and marketing craze, the Color of the Year program elevates a single color to demigod status. The company’s first selection, in 1999, was Cerulean. “Lifestyle movements suggest that consumers will be seeking inner peace and spiritual fulfillment in the new millennium,” the company announced.

Over the past two decades, many other color and paint companies have followed Pantone’s lead, naming a Color of the Year they feel encapsulates not only where the world is, but where it’s going. “We view the Pantone Color of the Year as an educational program that is intended to highlight the relationship between what is taking place in our global culture and how it manifests itself in color,” says Laurie Pressman, VP of the Pantone Color Institute.”With color and context so intertwined, there really are reasons why a color family or individual color comes into prominence when it does, and for the most part the popularity of a color is symbolic of the age we are living in.”

Announcing a color of the year also helps these brands speak directly to consumers, whether they’re people buying paint at Home Depot or designers looking for trend forecasting as they develop new products. The latter is more important than you might imagine, in the $24 billion paint market. In a New York Times piece on color’s significance in culture, Bruce Falconer offers a glimpse at the influence of Pantone’s research. “Color forecasters like Shah and his team at Pantone have tremendous influence over the visible elements of the global economy—the parts of it that are designed, manufactured, and purchased—though their profession itself is all but invisible,” he writes.

[Photo: Behr]

Most companies begin researching a couple years in advance, visiting trade shows to see what’s happening in retail and following the lifestyle trends of trusted influencers on social media. But they also depend on intuition and experience to make their forecasts. Pressman says the Pantone team stays “on the lookout for the color we see as ascending, and seems to be building in importance across all areas of design—the one color that is really pushing through, and the single shade we think can communicate the color message that best reflects what is taking place in our culture at this moment in time.” Ideas can emerge from expected places, like fashion and design, but also sources more far afield. “Areas we look to can include the entertainment industry and films in production, traveling art collections and new artists, fashion, all areas of design, popular travel destinations, as well as new lifestyles, play styles, and socio-economic conditions. Influences may also stem from new technologies, materials, textures, and effects that impact color, relevant social media platforms and even upcoming sporting events that capture worldwide attention.”

While Pantone won’t announce its hotly anticipated hue until later this year, paint companies like Behr, Benjamin Moore, and Sherwin Williams have already released their picks for the new decade, along with what they believe those colors reflect about the year ahead. And, perhaps unsurprisingly, they’re all different.

[Photo: Behr]

Behr’s selection, a soft and grassy shade of green called “Back to Nature,” is the company’s third official color of the year and was chosen for its association with the great outdoors. Emphasizing the preciousness—and precariousness—of the natural world, it taps into growing concerns about plastic and other sustainability issues, the rise of biophilic design, and the booming indoor plant industry. “It goes back to lifestyle and how we’re living, there’s kind of a social movement to get out there and engage with nature,” Erika Woelfel, Behr VP of Color and Creative Services, says. “We know that people are very aware that getting outside is really important.”

All kinds of green are trending at the moment, especially in the world of home decor. “There’s a huge trend of people bringing plants into their home, which cleans the air and has all these health benefits; that’s why we’re seeing jungle greens and desert greens,” Woelfel explains. ” ‘Back to Nature’ is a sweet spot: it’s not too dark and not too light, it’s fashion-forward in these sense that it’s not too dated, [and it can] create a sanctuary in your home. It really has that indoor, outdoor appeal.”

[Photo: Benjamin Moore]

Benjamin Moore’s 2020 selection, a soft, rosy pink called “First Light,” was selected, in part, because the company’s forecasters kept seeing it pop up in their travels.

“One of our team members saw it during Dutch Design Week,” says Andrea Magno, Benjamin Moore’s director of Color Marketing & Development. “There was a sophistication, it wasn’t overly sweet but the soft, blush color has been around for a number of years and we’ve been tracking it.”

In this sense, paint companies become curators; they seek out popular design aesthetics and distill them for consumers. Annual colors of the year not only provide inspiration for interiors, but also help guide homeowners toward living amongst a fresh palette of colors that may not be in their immediate field of view.

[Photo: Benjamin Moore]

“[First Light] is one of those colors that can live in a lot of different rooms, you can see how it becomes this really beautiful backdrop. It can almost serve as a neutral and give a warm glow to the room,” Magno says. “We thought it was really indicative of fresh thinking. We’re on the dawn of a new decade and we thought: ‘How do we want to embody that?’” While this rosy shade is certainly fresh, it’s not so dissimilar from the ubiquitous whisper of Millennial Pink, a color that has been exhausted to the point of polite mockery. Perhaps First Light’s slightly softer tone will situate it more as a delicate accent color, rather than its dominant and highly branded millennial cousin.

Meanwhile, Sherwin Williams’s 2020 Color of the Year conjures no feelings of a verdant meadow or a fresh morning. The company’s pick, “Naval,” is a rich and brooding navy shade—and is a refreshing departure from the more cheery colors that have dominated the past couple years.

[Photo: Sherwin-Williams]

“We knew navy was going to be a big color, [because] we could see black and white and monochromatic was a big trend,” says Sue Wadden, director of color marketing at Sherwin-Williams. “Our 2020 forecast is about taking wellness into the next decade, and [navy] was a great design trend. A really calming, timeless hue that’s always going to look good.”

Naval is Sherwin Williams’s tenth color of the year, and was selected in February during the company’s annual forecast meeting. “We have 12 team members and we all get together and hash this out,” Wadden says. “It’s like a three-day process, and by the end of it one color usually rises to the top.”

[Photo: Sherwin-Williams]

While companies are concerned with being on trend, they also need to make selections that are distinct from the colors they celebrated the year prior, which may help explain why these companies don’t often land on similar colors. Ultimately, it comes down to the instincts of each particular team of palette creators. In the case of Wadden and her team at Sherwin-Williams, a deep, bold hue felt right.

[Photo: Sherwin-Williams]

These teams of designers and marketers are tasked not only with responding to culture, but attempting to participate in it, too.

Take “Living Coral,” Pantone’s 2019 pick. The company wanted to select a color reflecting critical global trends, and chose a hue that was meant to carry symbolic meaning. “Just as coral reefs provide sustenance and shelter to sea life, vibrant yet mellow Living Coral embraces us with warmth and nourishment to provide comfort and buoyancy in our continually shifting environment,” Pressman says. Some felt the color didn’t place enough emphasis on the environmental issue of coral bleaching, even offering alternatives like a grey “Dead Coral” or all-white “Bleached Coral.”

Color touches nearly every object and industry; far from superficial, it plays an essential role in shaping the world and how we see it. But the public’s interest in color forecasting may also reflect confusion about an ambiguous future, whether in terms of climate change or polarizing politics. A single color that serves to explain the coming year seems like a balm for the confusion.

“There’s been this neutral mania, so it’s exciting to see things ripening . . . I think people are excited to bring color back [into the home], I like the arc we’re on,” Wadden says. “We’re here to inspire, we know what color can do and how it affects mood . . . that’s my goal moving into 2020, is to get people excited about color.”

scandinavian-color-trends

Muzli – Design Inspiration

All the design inspiration you need. It’s like crack for designers. And good for you too! #design #ux #ui #inspiration #creativity #art #startup

Eyal Zuri

Written by

Co-Founder and Creative Director at @usemuzli (acquired by InVision Inc.) | @awwwards judge | https://dribbble.com/eyalz

Muzli - Design Inspiration

All the design inspiration you need. It’s like crack for designers. And good for you too! #design #ux #ui #inspiration #creativity #art #startup

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage – with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

the-myths-of-color-contrast-accessibility

There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people.

They often parrot these myths to discredit a design without understanding which situations a color contrast standard applies. Not only that, but they assume an interface is inaccessible whenever color contrast is used to convey information.

Designers often feel the need to obsess over accessibility because of this. They’re misled into believing their interface isn’t accessible when it actually is. This article debunks common color contrast accessibility myths and sets the record straight.

Myth 1: The WCAG requirements are always optimal.

The Web Content Accessibility Guidelines (WCAG) is used as the standard for determining accessible color contrast. However, these guidelines do not always measure up in practical application. Instead of following them dogmatically, you should use the guidelines to guide your design decisions, not dictate them.

One case where the WCAG standards aren’t applicable is with the brightness contrast of white text. Both buttons below have a blue background, but one has white text, and the other has black. When you survey users on which button is easier to read, the majority will tell you the button with the white text is more readable (source). But the accessibility color contrast ratios tell a different story.

cca-bluebuttons

The contrast ratio for the black text is 5.41, which passes the requirement. However, the contrast ratio for the white text is 2.94, which fails it. According to the contrast requirements, the button with white text should be less readable, but it’s more readable.

A similar study comparing white and black button text confirms this finding. Not only did normal visioned users find the white text easier to read, but color blind users did as well (source).

cca-orangebuttons

This contrast inaccuracy seems to occur with white text on blue and orange backgrounds. The WCAG contrast ratios don’t always account for the high brightness contrast of white text. White is pure brightness with no hue or saturation, and brightness is the strongest form of contrast. Therefore, it makes sense why the button with white text is easier to read.

The reason the contrast ratios failed with the white text is that it has high brightness and is on a background with high brightness. Bright text on a bright background is rendered low contrast computationally. Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation.

The WCAG are guidelines to help designers choose the right color contrasts. The adage, “The map is not the territory,” applies here. Don’t confuse models of reality with reality itself.

Myth 2: Text needs to meet the AAA requirement, or it’s inaccessible.

WCAG has different levels of conformance for accessibility. Some believe that all text must conform to the highest level of requirements (AAA), or it’ll be inaccessible to a large portion of their users. This notion is false and is evident when you understand how the AAA requirement was made.

The AAA requirement constitutes a contrast ratio of 7:1 to compensate for contrast sensitivity loss by low-vision users with a vision loss of 20/80 or more. Many of these users use assistive technologies that have contrast-enhancing features. They need this technology because they aren’t just viewing content on a single interface, but multiple. The AAA requirement only applies to 20/80 vision loss users who don’t use assistive technologies, which is few and far between (source).

cca-compliance

A vision loss of 20/80 is rare among the general population and mostly affects the elderly suffering from age-related eye diseases. A study found that most low vision is related to aging (source). If the majority of your user base is 70 or older, meeting the AAA requirement is beneficial. The standard is 70 or older because visual acuity starts to decline among users with healthy eyes at that age (source).

Meeting the AA requirement is sufficient for the majority of users. The AA requirement constitutes a contrast ratio of 4.5:1 to compensate for the loss of contrast sensitivity by users with a 20/40 vision loss. A study found the “majority of persons maintain at least fair acuity (20/40 or better) into their 80’s” (source). This finding means that meeting the AA requirement will make your text accessible to the majority of users.

Myth 3: Interface components have the same contrast ratio standard as text.

Many make the mistake of holding interface components to the same contrast ratio standard as text when they are different. Interface components have a contrast ratio of 3:1, while text is 4.5:1. Text requires a higher contrast because users need to read it. Interface components don’t require reading and have a lower standard (source).

cca-componenttext

Many nuances affect text contrast, such as font size and weight. Large text sizes (18 pt) and text with heavier font weights (14 pt bold) require lower contrast ratios (source). Not only that, but certain interface components are exempt from the requirement. Before you hold an interface component or text to a contrast ratio standard, make sure you’re applying it correctly in the right situations.

Myth 4: Gray text and buttons are inaccessible and look disabled.

Another common myth is that gray text is inaccessible. Many assume users can’t read gray text because it looks low contrast. Sometimes this may be true, but other times it’s a false assumption. For example, the button below has gray text and some would assume it’s inaccessible. However, running it through a contrast checker shows that it’s not only AA compliant, but the ratio is well above the standard.

The other myth you might hear is that a gray button is inaccessible because it doesn’t meet the contrast ratio standard. It turns out the success criteria for buttons doesn’t require a visual boundary indicating the hit area. If a button with text has a border, there is no contrast requirement beyond the text contrast (source). Therefore, the gray button that most would assume is inaccessible passes the contrast requirement.

cca-buttonborder

This success criteria also means that icons next to buttons don’t have a contrast requirement as long as the text label meets the 4.5:1 contrast ratio. However, if an icon is without a text label, the 3:1 contrast ratio requirement applies to the icon.

cca-iconcontrast

There’s also the myth that gray buttons look disabled, which is often parroted by biased observers who don’t understand the proper signifier for inactive components. Disabled buttons are signified by the lack of contrast to the text label. When a button is hard to read, users don’t bother with it, which is the intent of a disabled button. Not to mention, the contrast requirement does not apply to inactive components.

cca-disabled

Myth 5: Color blind users can’t tell the difference between contrasting colors.

A common assumption is that if a design uses color contrast to convey information, color blind users won’t notice the difference. Color hue and color contrast are two different dimensions. Color blind users have trouble distinguishing specific color hues. They don’t have difficulty perceiving differences in color contrasts (source).

For example, many would assume the buttons below aren’t accessible to the color blind because it’s using color contrast to indicate different states. But the truth is that color blind users can differentiate the contrasting colors quite clearly. The buttons only use one color hue with no other competing and have sufficient contrast disparity.

cca-colorblind

By using a color blindness simulator, you can simulate what color blind users see. Users with a red-green color deficiency and blue-yellow deficiency have no trouble seeing the difference in color contrast.

Color blind users only have a hard time noticing color contrast when the colors are green and red, with nearly the same darkness (source). The example below shows what color blind users would see if the buttons were red and green with similar darkness.

cca-greenred

If you’re using competing color hues to differentiate states, you need another visual cue besides color. But if you’re only using color contrast to differentiate states, it’s likely accessible to color blind users.

There are various types of color blindness, but the ones you should focus on the most are red-green deficiencies. Red-green color blindness affects more than 99% of all color blind people (source). There are several color blindness simulators you can choose from on Chrome extensions, such as Colorblindly.

Myth 6: Using a color cue alone isn’t sufficient in conveying information.

This last myth is probably the one that people get wrong the most. They’ll often cite the “Use of Color” requirement without recognizing when this standard applies. There are nuances to these standards you need to understand before you start using them willy nilly.

The accessibility requirement states that “color should not be used as the only visual means to convey information, indicate an action, or distinguish an element.” However, this standard only applies to cases where different colors are assigned specific meanings to inform the user (source). In other words, if you’re using color differences to convey information you need an extra cue. But if you’re using lightness and darkness to convey information, you don’t need an extra cue as long as the contrast difference is high enough.

For example, the toggle tokens below use a blue color to indicate the active state. But there is no specific meaning assigned to blue. The active state is conveyed through the color contrast, not the color hue.

cca-colorcontrast

The color hue for the active state is arbitrary. You could use any other color hue, and it would suffice as long as it maintains a high contrast level to the inactive state. As such, the “Use of Color” requirement does not apply to this scenario.

An example where color is assigned meaning is error states on form fields. Red is often used to indicate an error in a text field. In this case, red is not enough to indicate the error state because color blind users won’t see it. The red would appear black to them. Therefore, you need an extra cue, such as text or an icon, to indicate the error state.

cca-errorstate

Another example is using color to indicate system status on a page. The color hues green and red are often used to indicate the severity of system issues. In this case, the “use of color” requirement applies because specific meaning is assigned to the color hues. Icons are needed to help color blind users distinguish each system status.

cca-status

Color contrast isn’t always the only cue at play when it comes to states. Visual depth is also a cue that users experience. It occurs when objects contrasting with the background appear closer and dominant, while objects that lack contrast appear further away and subdued. The blue button in this example seems closest to users. As a result, the emphasis and prominence signify the active state.

cca-depth

It’s from this play of contrast with the background that creates depth in the buttons and allows users to distinguish the active state. If both buttons had the same contrast level, users wouldn’t be able to perceive depth as a visual cue.

The Nuances of Color Contrast Accessibility

Accessibility should always be a priority when designing for users. The WCAG guidelines are an effective tool to help you achieve an accessible design of the highest standard. These myths are not caused by the WCAG guidelines. They are caused by people who misinterpret, misrepresent, and misuse the guidelines. It’s time to put these myths to rest.

Understanding the nuances of color contrast accessibility will help you meet the WCAG standards accurately. When others project color contrast accessibility myths onto your design, you can correct them. You’ll stay true to visual simplicity and aesthetics while balancing it with accessibility at the same time. The result is an inclusive interface that satisfies everyone.

site-flows-kit

user-personas-kit

variable-color-fonts,-how-do-they-work?

Variable color fonts: How do they work?

A tiny guide to Variable Color Fonts

Variable color fonts, how do they work? What can you do with them? Are they going to change the web? Well I don’t know all answers, but I’ll give you an initiation. I hope this tiny guide, combined with links to pieces written by people much smarter than me, will clear up some things!

As variable color fonts are fairly new, there is much to explore. What are the limits, how do browsers handle them? And as fonts can become much more than just letters, the adventure doesn’t end at the ‘A to Z’. So scroll along, and if you want to give it a go yourself, at the end you find an asset pack which includes font files and an example webpage!

Need some inspiration?

Have a look at my Variable Color Font Experiments

Want to create typefaces? Glyphs offers a free trail and many tutorials:

www.glyphsapp.com

Letters or Illustrations

About fonts

In basic terms, fonts are little else than vector drawings, drawn on small artboards, each assigned to unicodes (universal markers). It’s this which allows you to type a letter with your keyboard! Of course there are other things included in a font such as the spacing, but it’s the vectors that makes it exciting. This way a typeface can be scaled indefinitely, but it also allows you to draw anything you would like!

So drawing the paths, I created illustrations instead of letters, which made the perfect subjects for variable color font experiments.

Variable fonts and illustrations

About variable fonts

To be able to transform, variable fonts use a method called interpolation, which automatically creates new instances of a letter between two existing drawings. For this, both drawings have to consist of exactly the same amount of points and handles, as you can’t interpolate into the void!

Normally, the designer chooses a certain weight or position to interpolate into a final (static) design, but with a variable font, this interpolation becomes fluid, which the user can adjust. With a variable font both you will be able to change shape in static and dynamic media, opening up possibilities for dynamic typography.

Rainer Erich Scheichelbauer has written an step-by-step tutorial on how to use Glyphs to create variable fonts:

Learn how to make variable fonts using Glyphs

Color fonts

About color fonts

Color fonts merge layers into a single font file, and allows you to assign a color to each layer. There are various techniques and formats for color fonts, as each operating systems and brower has a preference. But for a variable color font, Microsoft’s CPAL/COLR system is required, as the other formats are incompatible with the interpolation. You can tweak each color layer, giving them the RGB value you would like and even assign alpha values. One of the most useful things is the ability for layers to overlay, allowing you to mask elements of the illustration/letter.

Rainer Erich Scheichelbauer has written an step-by-step tutorial on how to use Glyphs to create CPAL/COLR color fonts:

Learn how to make color fonts using Glyphs

Combining variable and color fonts

Combining variables and color

With your variable font transformed to CPAL/COLR layers, You can assign your variables to an axis (such as width, weight, or your own invention), and can add a value to these axis, allowing you to have control over each transformation, up to the decimal.

Now you just have to export it! Glyphs can’t export variable color fonts into webfonts, so you will have to export it as a normal variable font first, and afterwards convert it into a WOFF2 file. For this you can use one of the many online converters.

Variable color fonts on the web

Letting your browser do the moving

Only usable (currently) for the web, variable color fonts can be added to on your pages with just a few lines of css and a woff2 font file. Compared to SVG’s, variable color fonts allow little customisation, but are easier to implement. When loaded on your page as a variable font, you are able to animate the font, or use other input, such as browser size, microphone, camera or gyroscope to adjust the variables.

Want to animate variable fonts in your browser? The Etcetera Type Company has made an excellent tutorial:

Learn how to use CSS to animate your variable fonts

Want to find out how variable fonts can interact with your browser? Mandy Michael has made many great experiments and open codepens:

View examples & code on how to make your variable font interactive

Variable color font support

Variable color fonts and browsers

Not all browsers support variable color fonts in the same way: Some may render the characters incomplete, or create a pixelized preview. Currently Safari has the best support, keeping the visuals sharp while also allowing it to animate without errors. (other known browser errors include visual cut-offs or not loading the font’s color palette).

While color fonts and variable fonts are supported by program’s such as Adobe Illustrator and Photoshop, variable color fonts are not. These programs will only show a placeholder character when loaded. Although this character will be variable, the color table will be inactive.

Variable fonts trucks

What the future will bring

The tech is new, the adventure big! The surface of what’s possible hasn’t been scraped yet, so let’s continue this adventure together! Have a go with the asset pack, and hope this condensed writeup was of help! If you have questions, feel free to reach out by mail, or contact me on twitter.

For a look under the hood

Download the assets for my variable color present

And of course some thanks

I would have never been able to make headway into the world of Variable Color Fonts without the great tutorials by Rainer Erich Scheichelbauer.

And my Variable Color Fonts would never have seen any real use if it wasn’t for Mandy Michael’s cool experiments, which showcase variable fonts interacting with browsers, and other output/input.

debunking-color-contrast-accessibility-myths

There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people.

They often parrot these myths to discredit a design without understanding which situations a color contrast standard applies. Not only that, but they assume an interface is inaccessible whenever color contrast is used to convey information.

Designers often feel the need to obsess over accessibility because of this. They’re misled into believing their interface isn’t accessible when it actually is. This article debunks common color contrast accessibility myths and sets the record straight.

Myth 1: The WCAG requirements are always optimal.

The Web Content Accessibility Guidelines (WCAG) is used as the standard for determining accessible color contrast. However, these guidelines are not always optimal and applicable. Instead of following them blindly, you should examine how the color contrast standards measure up in practical application.

One case where the WCAG standards aren’t applicable is with the brightness contrast of white text. Both buttons below have a blue background, but one has white text, and the other has black. When you survey users on which button is easier to read, the majority will tell you the button with the white text is more readable (source). But the accessibility color contrast ratios tell a different story.

cca-bluebuttons

The contrast ratio for the black text is 5.41, which passes the requirement. However, the contrast ratio for the white text is 2.94, which fails it. According to the contrast requirements, the button with white text should be less readable, but it’s more readable.

A similar study comparing white and black button text confirms this finding. Not only did normal visioned users find the white text easier to read, but color blind users did as well (source).

cca-orangebuttons

This contrast inaccuracy seems to occur with white text on blue and orange backgrounds. The WCAG contrast ratios don’t always account for the high brightness contrast of white text. White is pure brightness with no hue or saturation, and brightness is the strongest form of contrast. Therefore, it makes sense why the button with white text is easier to read.

The reason the contrast ratios failed with the white text is that it has high brightness and is on a background with high brightness. Bright text on a bright background is rendered low contrast computationally. Your design is supposed to satisfy what people see, not computational algorithms. It’s why the designer’s eye should always play a part in the equation.

The WCAG are guidelines to help designers choose the right color contrasts. The adage, “The map is not the territory,” applies here. Don’t confuse models of reality with reality itself.

Myth 2: Text needs to meet the AAA requirement, or it’s inaccessible.

WCAG has different levels of conformance for accessibility. Some believe that all text must conform to the highest level of requirements (AAA), or it’ll be inaccessible to a large portion of their users. This notion is false and is evident when you understand how the AAA requirement was made.

The AAA requirement constitutes a contrast ratio of 7:1 to compensate for contrast sensitivity loss by low-vision users with a vision loss of 20/80 or more. Many of these users use assistive technologies that have contrast-enhancing features. They need this technology because they aren’t just viewing content on a single interface, but multiple. The AAA requirement only applies to 20/80 vision loss users who don’t use assistive technologies, which is few and far between (source).

cca-compliance

A vision loss of 20/80 is rare among the general population and mostly affects the elderly suffering from age-related eye diseases. A study found that most low vision is related to aging (source). If the majority of your user base is 70 or older, meeting the AAA requirement is beneficial. The standard is 70 or older because visual acuity starts to decline among users with healthy eyes at that age (source).

Meeting the AA requirement is sufficient for the majority of users. The AA requirement constitutes a contrast ratio of 4.5:1 to compensate for the loss of contrast sensitivity by users with a 20/40 vision loss. A study found the “majority of persons maintain at least fair acuity (20/40 or better) into their 80’s” (source). This finding means that meeting the AA requirement will make your text accessible to the majority of users.

Myth 3: Interface components have the same contrast ratio standard as text.

Many make the mistake of holding interface components to the same contrast ratio standard as text when they are different. Interface components have a contrast ratio of 3:1, while text is 4.5:1. Text requires a higher contrast because users need to read it. Interface components don’t require reading and have a lower standard (source).

cca-componenttext

Many nuances affect text contrast, such as font size and weight. Large text sizes (18 pt) and text with heavier font weights (14 pt bold) require lower contrast ratios (source). Not only that, but certain interface components are exempt from the requirement. Before you hold an interface component or text to a contrast ratio standard, make sure you’re applying it correctly in the right situations.

Myth 4: Gray text and buttons are inaccessible and look disabled.

Another common myth is that gray text is inaccessible. Many assume users can’t read gray text because it looks low contrast. Sometimes this may be true, but other times it’s a false assumption. For example, the button below has gray text and some would assume it’s inaccessible. However, running it through a contrast checker shows that it’s not only AA compliant, but the ratio is well above the standard.

The other myth you might hear is that a gray button is inaccessible because it doesn’t meet the contrast ratio standard. It turns out the success criteria for buttons doesn’t require a visual boundary indicating the hit area. If a button with text has a border, there is no contrast requirement beyond the text contrast (source). Therefore, the gray button that most would assume is inaccessible passes the contrast requirement.

cca-buttonborder

This success criteria also means that icons next to buttons don’t have a contrast requirement as long as the text label meets the 4.5:1 contrast ratio. However, if an icon is without a text label, the 3:1 contrast ratio requirement applies to the icon.

cca-iconcontrast

There’s also the myth that gray buttons look disabled, which is often parroted by biased observers who don’t understand the proper signifier for inactive components. Disabled buttons are signified by the lack of contrast to the text label. When a button is hard to read, users don’t bother with it, which is the intent of a disabled button. Not to mention, the contrast requirement does not apply to inactive components.

cca-disabled

Myth 5: Color blind users can’t tell the difference between contrasting colors.

A common assumption is that if a design uses color contrast to convey information, color blind users won’t notice the difference. Color hue and color contrast are two different dimensions. Color blind users have trouble distinguishing specific color hues. They don’t have difficulty perceiving differences in color contrasts (source).

For example, many would assume the buttons below aren’t accessible to the color blind because it’s using color contrast to indicate different states. But the truth is that color blind users can differentiate the contrasting colors quite clearly. The buttons only use one color hue with no other competing and have sufficient contrast disparity.

cca-colorblind

By using a color blindness simulator, you can simulate what color blind users see. Users with a red-green color deficiency and blue-yellow deficiency have no trouble seeing the difference in color contrast.

Color blind users only have a hard time noticing color contrast when the colors are green and red, with nearly the same darkness (source). The example below shows what color blind users would see if the buttons were red and green with similar darkness.

cca-greenred

If you’re using competing color hues to differentiate states, you need another visual cue besides color. But if you’re only using color contrast to differentiate states, it’s likely accessible to color blind users.

There are various types of color blindness, but the ones you should focus on the most are red-green deficiencies. Red-green color blindness affects more than 99% of all color blind people (source). There are several color blindness simulators you can choose from on Chrome extensions, such as Colorblindly.

Myth 6: Using a color cue alone isn’t sufficient in conveying information.

This last myth is probably the one that people get wrong the most. They’ll often cite the “Use of Color” requirement without recognizing when this standard applies. There are nuances to these standards you need to understand before you start using them willy nilly.

The accessibility requirement states that “color should not be used as the only visual means to convey information, indicate an action, or distinguish an element.” However, this standard only applies to cases where different colors are assigned specific meanings to inform the user (source). In other words, if you’re using color differences to convey information you need an extra cue. But if you’re using lightness and darkness to convey information, you don’t need an extra cue as long as the contrast difference is high enough.

For example, the toggle tokens below use a blue color to indicate the active state. But there is no specific meaning assigned to blue. The active state is conveyed through the color contrast, not the color hue.

cca-colorcontrast

The color hue for the active state is arbitrary. You could use any other color hue, and it would suffice as long as it maintains a high contrast level to the inactive state. As such, the “Use of Color” requirement does not apply to this scenario.

An example where color is assigned meaning is error states on form fields. Red is often used to indicate an error in a text field. In this case, red is not enough to indicate the error state because color blind users won’t see it. The red would appear black to them. Therefore, you need an extra cue, such as text or an icon, to indicate the error state.

cca-errorstate

Another example is using color to indicate system status on a page. The color hues green and red are often used to indicate the severity of system issues. In this case, the “use of color” requirement applies because specific meaning is assigned to the color hues. Icons are needed to help color blind users distinguish each system status.

cca-status

Color contrast isn’t always the only cue at play when it comes to states. Visual depth is also a cue that users experience. It occurs when objects contrasting with the background appear closer and dominant, while objects that lack contrast appear further away and subdued. The blue button in this example seems closest to users. As a result, the emphasis and prominence signify the active state.

cca-depth

It’s from this play of contrast with the background that creates depth in the buttons and allows users to distinguish the active state. If both buttons had the same contrast level, users wouldn’t be able to perceive depth as a visual cue.

The Nuances of Color Contrast Accessibility

Understanding the nuances of color contrast accessibility will help you meet the WCAG standards accurately. When others project color contrast accessibility myths onto your design, you can correct them. You’ll stay true to visual simplicity and aesthetics while balancing accessibility at the same time. The result is an inclusive interface that satisfies everyone.

FP-tout

PP-tout