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

Auto-Tag Videos With Cloudinary: A Tutorial

Video is one of the best ways for capturing audience attention. Product demonstrations, property tours, tutorials, and keynotes all make great content—provided that they’re readily searchable by your team and visitors alike. Even though tagging and categorization help organize videos and make them easy to find, the labeling process is labor intensive, taking time away from key tasks like creating new videos.

Read more
Video Uploads With Cloudinary

Setting up the infrastructure for video uploads can go from straightforward to complex real fast. Why? Because many challenges are involved in building a foolproof service for an efficient and smooth process.

Read more
Optimize Media to Get Ready for Google’s Core Web Vitals

For years, Google has been updating its search algorithm to prioritize end-user experience, displaying the most relevant and helpful content at the top of search results. The latest—and maybe the most significant—update so far is Core Web Vitals (CWVs), which are new metrics announced a year ago that will, starting in June, begin determining search rankings. With this update, Google is being abundantly clear that visual experience of webpages is paramount.

Read more
Compressing, Resizing, and Optimizing Videos in Laravel

Videos are large media files—in most cases, at least four times larger than images—and are often created for ads, marketing campaigns, and instructional content to convey as much information as possible in a short time. Ensuring that videos do not buffer all the time and that the user’s data is protected from rapid consumption due to heavy page weight must be the modus operandi for all website builders and e-business owners.

Read more
Five Ways to Effectively Manage Online Media

The digital economy is driven by highly visual experiences. After all, viewers process images 60,000 times faster than text. Therefore, it’s no surprise that top-notch visual media has been an essential component of a captivating e-commerce experience for years. Nor is it surprising that visual media’s importance only rose during the COVID-19 pandemic, a reality for all retailers, including our client Levi’s.

Read more
Creating an API With Python Flask to Upload Files to Cloudinary

Code

Cloudinary offers SDKs for many programming languages and frameworks. Even though it also offers an Upload API endpoint for both back-end and front-end code, most developers find the SDKs very helpful. If you're working with a powerful back-end framework like Python Flask, you'll be happy to hear that a Python SDK is now available.
This tutorial walks you through the process of building an API to upload images to Cloudinary. You can also upload other file types, including video and even nonmedia files, with the API.

Read more