Cloudinary Blog
Making Images Accessible for the Color Blind

“For those of you who are watching in black and white, the pink is next to the green.” (Ted Lowe)

We often laugh about snooker (think billiards if you’ve never heard of snooker) commentaries back in the days of black and white television, but for approximately 300 million people worldwide, the seemingly simple task of distinguishing colors is a daily challenge. Color blindness, or Color Vision Deficiency (CVD), affects roughly one in twelve men, and one in two hundred women. That's over 8% of the population - a significant percentage of your potential customers who may be missing vital information or unable to engage fully with your site. Couple that with increasing legislation promoting accessibility and it's easy to see why you should care about color.

Cloudinary has a number of features that can help you to choose the best images as well as to transform problematic images to ones that are more accessible to color blind people. You can use Cloudinary to:

  • Simulate how an image would look to people with different color blind conditions.
  • Apply effects to images to help differentiate problematic colors.
  • Analyze images to provide color blind accessibility scores and information on which colors are the hardest to differentiate.

Sign up for Cloudinary free today!


Look Through a Different Lens

To help you see your images through the eyes of a color blind person, you can transform the images to simulate seven different conditions: deuteranopia, protanopia, tritanopia, tritanomaly, deuteranomaly, cone monochromacy and rod monochromacy. If you’re familiar with Cloudinary transformations, you’ll know that you can apply these effects just by adding a parameter to the URL of the image. In this case it’s the simulate_colorblind effect: e_simulate_colorblind:<condition>. If you don’t specify a condition, then deuteranopia is the condition that is simulated. This is the most common form of color blindness and is a reduced sensitivity to green light, so reds and greens are hard to tell apart.

Take, for example, this image of a paint palette. If you’re not color blind you’ll see fourteen different colors. Compare that with the transformed images below. They are the same image as seen by someone with deuteranopia, and someone with cone monochromacy.

Paint palette

Ruby:
Copy to clipboard
cl_image_tag("docs/palette.png", :effect=>"simulate_colorblind:cone_monochromacy")
PHP v1:
Copy to clipboard
cl_image_tag("docs/palette.png", array("effect"=>"simulate_colorblind:cone_monochromacy"))
PHP v2:
Copy to clipboard
(new ImageTag('docs/palette.png'))
  ->effect(Effect::simulateColorBlind()
    ->condition(SimulateColorBlind::coneMonochromacy()));
Python:
Copy to clipboard
CloudinaryImage("docs/palette.png").image(effect="simulate_colorblind:cone_monochromacy")
Node.js:
Copy to clipboard
cloudinary.image("docs/palette.png", {effect: "simulate_colorblind:cone_monochromacy"})
Java:
Copy to clipboard
cloudinary.url().transformation(new Transformation().effect("simulate_colorblind:cone_monochromacy")).imageTag("docs/palette.png");
JS:
Copy to clipboard
cloudinary.imageTag('docs/palette.png', {effect: "simulate_colorblind:cone_monochromacy"}).toHtml();
jQuery:
Copy to clipboard
$.cloudinary.image("docs/palette.png", {effect: "simulate_colorblind:cone_monochromacy"})
React:
Copy to clipboard
<Image publicId="docs/palette.png" >
  <Transformation effect="simulate_colorblind:cone_monochromacy" />
</Image>
Vue.js:
Copy to clipboard
<cld-image publicId="docs/palette.png" >
  <cld-transformation effect="simulate_colorblind:cone_monochromacy" />
</cld-image>
Angular:
Copy to clipboard
<cl-image public-id="docs/palette.png" >
  <cl-transformation effect="simulate_colorblind:cone_monochromacy">
  </cl-transformation>
</cl-image>
.NET:
Copy to clipboard
cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect("simulate_colorblind:cone_monochromacy")).BuildImageTag("docs/palette.png")
Android:
Copy to clipboard
MediaManager.get().url().transformation(new Transformation().effect("simulate_colorblind:cone_monochromacy")).generate("docs/palette.png");
iOS:
Copy to clipboard
imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect("simulate_colorblind:cone_monochromacy")).generate("docs/palette.png")!, cloudinary: cloudinary)

Paint palette as seen by someone with deuteranopia deuteranopia Paint palette as seen by someone with cone monochromacy cone_monochromacy

Here’s the full range of simulated conditions:

Paint palette with simulated color blind conditions

See What You’re Missing

Being color blind doesn’t just mean seeing colors differently. You can actually miss vital information depending on the composition of the image. Some objects can be totally camouflaged. Take this image of a flower, as seen by someone with deuteranopia:

Red flower as seen by someone with deuteranopia

It’s not easy to spot the green grasshopper lurking there due to the redness of the petals. Did you see it?

Red flower with green grasshopper

Even if colors and shapes are well separated, images that convey meaning by color can be problematic. Note how difficult it is for someone with deuteranopia to match the key to segments of this pie chart:

Pie chart Original image Pie chart as seen by someone with deuteranopia Simulated deuteranopia

You can help your color blind customers by using the assist_colorblind effect (e_assist_colorblind). There are two ways to help:

  • Add vertical and horizontal stripes to problematic colors, specifying the intensity of the stripes with a number between 1 and 100, for example, e_assist_colorblind:20:
Pie chart e_assist_colorblind:20 Pie chart as seen by someone with deuteranopia e_assist_colorblind:20/e_simulate_colorblind
  • Change the colors to ones that are less problematic, using the xray option, e_assist_colorblind:xray:
Red flower with xray effect e_assist_colorblind:xray Red flower with xray effect as seen by someone with deuteranopia e_assist_colorblind:xray/e_simulate_colorblind

In each of the above examples, the image on the left is how a normal sighted person would see the image with the assist_colorblind effect. On the right, we’ve chained the simulate_colorblind effect to show how the transformed image would look to a color blind person. The segments of the pie chart are now distinguishable due to the striping, and the grasshopper is now visible due to the change of colors.

How Accessible are your Images?

With disability awareness being at an all time high, and more and more legislation coming in regarding accessibility, you need to make sure that the shopping experience that you provide caters to everyone.

Having the means to analyze your images objectively and search for the ones with the best scores would allow you to select the most appropriate images, confident that they conform to the expected standards.

Introducing Cloudinary’s color blind accessibility analysis scores.

Now’s your chance to take part in the color blind accessibility analysis Beta trial. With this feature activated on your account, the response to an upload or explicit request with accessibility_analysis set to true includes scores for different visual accessibility factors, as follows:

Copy to clipboard
"accessibility_analysis": {
    "colorblind_accessibility_analysis": {
      "distinct_edges": 0.93,
      "distinct_colors": 0.33,
      "most_indistinct_pair": [
        "#BCB0AA",
        "#B2BEC9"
      ]
    },
    "colorblind_accessibility_score": 0.63
  },

Check out the documentation for further details about each of the scores. On upload, the accessibility_analysis.colorblind_accessibility_score field is indexed for search so you can easily find images that meet your organization’s requirements.

If you want to be able to track the accessibility scores of all images being uploaded to your account, the easiest way to do this is through an upload preset. Just activate the Accessibility analysis option when creating your upload preset.

Here are the scores for the images used in this blog post:

Paint palette Flower Pie chart
"distinct_edges": 1.0 "distinct_edges": 0 "distinct_edges": 1.0
"distinct_colors": 0.08 "distinct_colors": 0.12 "distinct_colors": 0.77
"most_indistinct_pair": [
"#FA3300",
"#00FD20"
]
"most_indistinct_pair": [
"#F54802",
"#4D6602"
]
"most_indistinct_pair": [
"#FE0000",
"#00AF50"
]
"colorblind_accessibility_score": 0.54 "colorblind_accessibility_score": 0.06 "colorblind_accessibility_score": 0.89

At present, only the accessibility_analysis.colorblind_accessibility_score is indexed for search, but it may be more meaningful to identify images that score low for either distinct_edges or distinct_colors. One way to do this is to evaluate the score on upload using the eval parameter and tag those images that don't meet a certain threshold. The JavaScript assigned to the eval parameter might look like this:

Copy to clipboard
if (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_edges < 0.8)
{
   upload_options["tags"] = "distinct_edges_issue";
} 
if (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_colors < 0.8) 
{
   if (upload_options["tags"]) 
   {
      upload_options["tags"] += ",distinct_colors_issue";
   } 
   else 
   {
      upload_options["tags"] = "distinct_colors_issue";
   }
}

Using the CLI as an example, the full upload command would be as follows (you can, of course, adapt this for different SDKs):

Copy to clipboard
cld uploader upload sample.jpg accessibility_analysis=true -O eval 'if (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_edges < 0.8){upload_options["tags"] = "distinct_edges_issue";} if (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_colors < 0.8) {if (upload_options["tags"]){upload_options["tags"] += ",distinct_colors_issue";}else{upload_options["tags"] = "distinct_colors_issue";}}'

You could then use the Admin API to get the resources by tag or the Media Library search to find the images you need to address.

Ideas for Helping your Color Blind Customers

Now you know how to analyze your images to determine which ones may be problematic for your color blind customers, here are a few ideas of what you can do to help.

Firstly, if possible, see if you can replace images that give low accessibility scores with ones that give higher scores. This may be a case of changing the colors used, changing the composition, or selecting an entirely different image.

If you can't change your images, consider putting a toggle on your website or app to display images in a color blind friendly way. Then, you can keep your original images with the original colors for those who can see them, and still provide a way for your color blind customers to see all the details:

  • Apply the colorblind_assist:xray effect to images with low distinct_edges scores.
  • Apply the stripes effect (e.g. colorblind_assist:20) to images with low distinct_colors scores.

If you allow users to upload their own content to your website, you could make them stop and think about color accessibility by:

  • Providing feedback based on the analysis scores on upload.
  • Providing a mechanism for them to view their content through the eyes of someone with a color blind condition (e.g. simulate_colorblind:protanopia).

The Pot of Gold at the End of the Rainbow

Expectations and attitudes regarding accessibility have changed a lot since the days of black and white TV. It’s more important than ever to keep your eye on the ball and make your site as accessible as possible. Helping out your color blind customers is just one consideration, but if you’re trying to broaden your target market and reach out to as many people as possible, you can’t afford to ignore anyone.

Recent Blog Posts

Create Lightweight Sites With Low-Code and No-Code Technology

Consumers expect modern websites to be mainly visual. But, the more compelling and complex the related media is, the more data is involved, compounding the site’s weight. In today’s content-craving world, delivering unoptimized media can cost you because it leads to sluggish page loads, resulting in visitors abandoning your site in search of a faster alternative. In fact, a page load that takes more than three seconds can cause as many as 40% of your visitors to bounce. Given this competitive, digital-first environment, you can’t afford to lose page views, for time is of the essence.

Read more
A Blueprint for AWS-Secured Webhook Listeners for Cloudinary

tl;dr: An AWS-secured and optimized Cloudinary webhook listener for extending the Cloudinary service

Code: Github

A webhook is a communication medium for sending notifications from one platform to another about events that occurred. In place are user-defined HTTP callbacks that are triggered by specific events. When a triggered event takes place on the source site, the webhook listens to the event, collects the data, and sends it to the URL you specified in the form of an HTTP request.

Read more
New Accessibility Features for Cloudinary’s Product Gallery Widget

Cloudinary’s Product Gallery widget, which launched in 2019, has enabled many brands to effectively and efficiently showcase their products in a sleek and captivating manner, saving countless hours of development time and accelerating release cycles. By adding Cloudinary’s Product Gallery widget with its customizable UI to their product page, retailers reap numerous benefits, often turning visitors into customers in short order.

Read more
Why Successful Businesses Engage With and Convert Audiences With Visual Media

Most business buyers prefer to research purchase options online, as do many shoppers. No wonder online retail sales in the U.S. rose by 32.4% in 2020—an impressive gain of $105 billion.

For B2B and B2C businesses, text-heavy websites are no longer adequate in attracting shoppers. Instead, engaging visual media—spin images, videos, 3D models, augmented reality—are becoming a must for conveying eye-catching details and differentiators about products or services.

Read more
Making User-Generated Content (UGC) Shoppable With Cloudinary

User-generated content (UGC) is a powerful marketing tool. Not only does video complement marketing efforts for e-commerce by enabling customers to explore products in greater detail, but UGC also adds an element of trust. As a bonus, user-generated video is an exceptional opportunity for e-businesses to attract website traffic without their marketing team having to create promotional videos from scratch. User-generated content drives conversions and brand loyalty as a direct result of authentic interaction.

Read more