{"id":22038,"date":"2020-09-08T15:01:07","date_gmt":"2020-09-08T15:01:07","guid":{"rendered":"http:\/\/open_your_eyes_to_color_accessibility"},"modified":"2025-10-20T16:36:17","modified_gmt":"2025-10-20T23:36:17","slug":"open_your_eyes_to_color_accessibility","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility","title":{"rendered":"Open Your Eyes to Color Blindness Accessibility"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p><strong><em>\u201cFor those of you who are watching in black and white, the pink is next to the green.\u201d<\/em><\/strong> (<a href=\"https:\/\/en.wikipedia.org\/wiki\/Ted_Lowe\">Ted Lowe<\/a>)<\/p>\n<p>Back in the days of black and white television, approximately 300 million people worldwide faced the seemingly simple task of distinguishing colors. In general, it wasn\u2019t much of a concern, and audiences were unbothered by black and white. Occasionally, though, color mattered, and in those cases someone would have to tell the audience what they were looking at.<\/p>\n<p>Color blindness, or Color Vision Deficiency (CVD), affects roughly one in 12 men, and one in 200 women. That\u2019s 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 (color blindness accessibility) and it\u2019s easy to understand why you should care about color.<\/p>\n<h2>How Cloudinary Supports Color Blindness Accessibility<\/h2>\n<p>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:<\/p>\n<ul>\n<li>\n<strong>Color blind image converter.<\/strong> Simulate how an image would look to people with different color blind conditions.<\/li>\n<li>\n<strong>Color blind image maker.<\/strong> Apply effects to images to help differentiate problematic colors.<\/li>\n<li>\n<strong>Color blindness accessibility checker.<\/strong> Analyze images to provide color blind accessibility scores and information on which colors are the hardest to differentiate.<\/li>\n<\/ul>\n<blockquote>\n<p>Cloudinary can do lots more than help you with color blindness accessibility \u2013 find out all the ways that <a href=\"https:\/\/cloudinary.com\/platform\">Cloudinary can help you bring your website to life<\/a> and make your life easier along the way. And best of all, it\u2019s free for life!<\/p>\n<\/blockquote>\n<p>One fundamental step in ensuring your content is color blind friendly is choosing appropriate palettes. Blue\/orange, blue\/red, or blue\/brown are classic palettes that usually work well for a wide range of color vision deficiencies. It\u2019s also beneficial to avoid tricky combinations like green and red, green and brown, blue and purple, or green and blue. This precaution reduces potential issues with content visibility for those affected by color blindness.<\/p>\n<p>Additionally, if you\u2019re designing charts or graphs, consider going monochromatic. As color blindness doesn\u2019t generally affect one\u2019s ability to discern between shades, a monochromatic palette can be an effective solution, minimizing chances for problematic color overlaps. There are many tools and software available to aid designers in this endeavor. Online tools like ColorBrewer and Coolors can assist you in finding color-blind-friendly schemes. You can also use an online simulator like Coblis to get a preview of how your content might appear to individuals with color vision deficiencies.<\/p>\n<h2>Look Through a Different Lens<\/h2>\n<p>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\u2019re familiar with Cloudinary <a href=\"https:\/\/cloudinary.com\/documentation\/transformation_reference\">transformations<\/a>, you\u2019ll know that you can apply these effects just by adding a parameter to the URL of the image.  In this case it\u2019s the <code>simulate_colorblind<\/code> effect: <code>e_simulate_colorblind:&lt;condition&gt;<\/code>. If you don\u2019t 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.<\/p>\n<p>Take, for example, this image of a paint palette. If you\u2019re not color blind you\u2019ll 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.<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/palette.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/palette.png\" alt=\"Image of a full color palette that will need help to make image color blind friendly\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"250\" height=\"127.86458333333\"\/><\/a><\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/palette.png\\&quot;, {effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/palette.png\\&quot;, {effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/palette.png\\&quot; &gt; &lt;Transformation effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/palette.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/palette.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/palette.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/palette.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/palette.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/palette.png&#039;, {effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/palette.png&#039;, {effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).image(effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).image(effect=\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/palette.png&#039;))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::coneMonochromacy())\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/palette.png&#039;))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::coneMonochromacy())\\n\\t);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/palette.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:cone_monochromacy\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/palette.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:cone_monochromacy\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).imageTag(\\&quot;docs\\\/palette.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).imageTag(\\&quot;docs\\\/palette.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/palette.png\\&quot;, effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/palette.png\\&quot;, effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).BuildImageTag(\\&quot;docs\\\/palette.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).BuildImageTag(\\&quot;docs\\\/palette.png\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/palette.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.coneMonochromacy())\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/palette.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.coneMonochromacy())\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).generate(\\&quot;docs\\\/palette.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).generate(\\&quot;docs\\\/palette.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).generate(\\&quot;docs\\\/palette.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;simulate_colorblind:cone_monochromacy\\&quot;)).generate(\\&quot;docs\\\/palette.png\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/palette.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.coneMonochromacy())\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/palette.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.coneMonochromacy())\\n\\t));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/palette.png\\&quot;)\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.coneMonochromacy())\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/palette.png\\&quot;)\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.coneMonochromacy())\\n\\t }) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/palette.png\\&quot;, {effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/palette.png\\&quot;, {effect: \\&quot;simulate_colorblind:cone_monochromacy\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/palette.png\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;cone_monochromacy\\&quot;)\\n);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_simulate_colorblind:cone_monochromacy\\\/docs\\\/palette.png&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;simulate_colorblind:cone_monochromacy&quot;}],&quot;transformation_string&quot;:&quot;e_simulate_colorblind:cone_monochromacy&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/palette.png&quot;,&quot;extension&quot;:&quot;png&quot;,&quot;format&quot;:&quot;png&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"true\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind:deuteranopia\/docs\/palette.png\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind:deuteranopia\/w_250\/docs\/palette.png\" alt=\"Paint palette as seen by someone with deuteranopia\" title=\"Paint palette as seen by someone with deuteranopia\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<b style=\"margin-right: 30px;display:block;\">deuteranopia<\/b>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind:cone_monochromacy\/docs\/palette.png\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind:cone_monochromacy\/w_250\/docs\/palette.png\" alt=\"Image of a color palette that a colorblind picture converter demonstrates cone_monochromacy\" title=\"Paint palette as seen by someone with cone monochromacy\" style=\"margin-right: 30px;display:block;\" \/><\/a>\n<b style=\"margin-right: 30px;display:block;\">cone_monochromacy<\/b>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div> \n<p>Here\u2019s the full range of simulated conditions:<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1585664392\/docs\/palette_simulated.gif\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1585664392\/docs\/palette_simulated.gif\" alt=\"GIF image of a color palette that use a colorblind picture converter to switch among many color blind conditions\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"250\" height=\"127.86458333333\"\/><\/a><\/p>\n<h2>See What You\u2019re Missing<\/h2>\n<p>Being color blind doesn\u2019t 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:<\/p>\n<p><cld-code-widget\n      class=\" c-code-widget\"\n      snippets=\"[{&quot;sdkId&quot;:&quot;nodejs&quot;,&quot;framework&quot;:&quot;nodejs&quot;,&quot;language&quot;:&quot;nodejs&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/redflower.jpg\\&quot;, {effect: \\&quot;simulate_colorblind\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;docs\\\/redflower.jpg\\&quot;, {effect: \\&quot;simulate_colorblind\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Node.js&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_2&quot;,&quot;framework&quot;:&quot;react_2&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;react&quot;,&quot;framework&quot;:&quot;react&quot;,&quot;language&quot;:&quot;react&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/redflower.jpg\\&quot; &gt; &lt;Transformation effect=\\&quot;simulate_colorblind\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;docs\\\/redflower.jpg\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;simulate_colorblind\\&quot; \\\/&gt;\\n&lt;\\\/Image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React&quot;,&quot;packageName&quot;:&quot;cloudinary-react&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue_2&quot;,&quot;framework&quot;:&quot;vue_2&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/vue&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;vue&quot;,&quot;framework&quot;:&quot;vue&quot;,&quot;language&quot;:&quot;vue&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/redflower.jpg\\&quot; &gt; &lt;cld-transformation effect=\\&quot;simulate_colorblind\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;docs\\\/redflower.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;simulate_colorblind\\&quot; \\\/&gt;\\n&lt;\\\/cld-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Vue.js&quot;,&quot;packageName&quot;:&quot;cloudinary-vue&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular_2&quot;,&quot;framework&quot;:&quot;angular_2&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/ng&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;angular&quot;,&quot;framework&quot;:&quot;angular&quot;,&quot;language&quot;:&quot;angular&quot;,&quot;rawCodeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/redflower.jpg\\&quot; &gt; &lt;cl-transformation effect=\\&quot;simulate_colorblind\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;docs\\\/redflower.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;simulate_colorblind\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n&lt;\\\/cl-image&gt;&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Angular&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/angular-5.x&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js_2&quot;,&quot;framework&quot;:&quot;js_2&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;@cloudinary\\\/url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;js&quot;,&quot;framework&quot;:&quot;js&quot;,&quot;language&quot;:&quot;js&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/redflower.jpg&#039;, {effect: \\&quot;simulate_colorblind\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;docs\\\/redflower.jpg&#039;, {effect: \\&quot;simulate_colorblind\\&quot;}).toHtml();&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;JS&quot;,&quot;packageName&quot;:&quot;cloudinary-core&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;python&quot;,&quot;framework&quot;:&quot;python&quot;,&quot;language&quot;:&quot;python&quot;,&quot;rawCodeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).image(effect=\\&quot;simulate_colorblind\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).image(effect=\\&quot;simulate_colorblind\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Python&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;php_2&quot;,&quot;framework&quot;:&quot;php_2&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/redflower.jpg&#039;))\\n\\t-&gt;effect(Effect::simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;docs\\\/redflower.jpg&#039;))\\n\\t-&gt;effect(Effect::simulateColorBlind());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;php&quot;,&quot;framework&quot;:&quot;php&quot;,&quot;language&quot;:&quot;php&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/redflower.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/redflower.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind\\&quot;))&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;PHP&quot;,&quot;packageName&quot;:&quot;cloudinary_php&quot;,&quot;packageStatus&quot;:&quot;legacy&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;java&quot;,&quot;framework&quot;:&quot;java&quot;,&quot;language&quot;:&quot;java&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;simulate_colorblind\\&quot;)).imageTag(\\&quot;docs\\\/redflower.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;simulate_colorblind\\&quot;)).imageTag(\\&quot;docs\\\/redflower.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Java&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;ruby&quot;,&quot;framework&quot;:&quot;ruby&quot;,&quot;language&quot;:&quot;ruby&quot;,&quot;rawCodeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/redflower.jpg\\&quot;, effect: \\&quot;simulate_colorblind\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;docs\\\/redflower.jpg\\&quot;, effect: \\&quot;simulate_colorblind\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Ruby&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;csharp&quot;,&quot;framework&quot;:&quot;csharp&quot;,&quot;language&quot;:&quot;csharp&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;simulate_colorblind\\&quot;)).BuildImageTag(\\&quot;docs\\\/redflower.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;simulate_colorblind\\&quot;)).BuildImageTag(\\&quot;docs\\\/redflower.jpg\\&quot;)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;.NET&quot;,&quot;packageName&quot;:&quot;CloudinaryDotNet&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;dart&quot;,&quot;framework&quot;:&quot;dart&quot;,&quot;language&quot;:&quot;dart&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/redflower.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/redflower.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Dart&quot;,&quot;packageName&quot;:&quot;cloudinary_dart&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;swift&quot;,&quot;framework&quot;:&quot;swift&quot;,&quot;language&quot;:&quot;swift&quot;,&quot;rawCodeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;simulate_colorblind\\&quot;)).generate(\\&quot;docs\\\/redflower.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;simulate_colorblind\\&quot;)).generate(\\&quot;docs\\\/redflower.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;iOS&quot;,&quot;packageName&quot;:&quot;cloudinary&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;5.x&quot;},{&quot;sdkId&quot;:&quot;android&quot;,&quot;framework&quot;:&quot;android&quot;,&quot;language&quot;:&quot;android&quot;,&quot;rawCodeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;simulate_colorblind\\&quot;)).generate(\\&quot;docs\\\/redflower.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;simulate_colorblind\\&quot;)).generate(\\&quot;docs\\\/redflower.jpg\\&quot;);&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Android&quot;,&quot;packageName&quot;:&quot;cloudinary-android&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;3.x&quot;},{&quot;sdkId&quot;:&quot;flutter&quot;,&quot;framework&quot;:&quot;flutter&quot;,&quot;language&quot;:&quot;flutter&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/redflower.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;docs\\\/redflower.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()));&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Flutter&quot;,&quot;packageName&quot;:&quot;cloudinary_flutter&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;kotlin&quot;,&quot;framework&quot;:&quot;kotlin&quot;,&quot;language&quot;:&quot;kotlin&quot;,&quot;rawCodeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/redflower.jpg\\&quot;)\\n\\t effect(Effect.simulateColorBlind()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;docs\\\/redflower.jpg\\&quot;)\\n\\t effect(Effect.simulateColorBlind()) \\n}.generate()&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;Kotlin&quot;,&quot;packageName&quot;:&quot;kotlin-url-gen&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;},{&quot;sdkId&quot;:&quot;jquery&quot;,&quot;framework&quot;:&quot;jquery&quot;,&quot;language&quot;:&quot;jquery&quot;,&quot;rawCodeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/redflower.jpg\\&quot;, {effect: \\&quot;simulate_colorblind\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;docs\\\/redflower.jpg\\&quot;, {effect: \\&quot;simulate_colorblind\\&quot;})&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;jQuery&quot;,&quot;packageName&quot;:&quot;cloudinary-jquery&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;2.x&quot;},{&quot;sdkId&quot;:&quot;react_native&quot;,&quot;framework&quot;:&quot;react_native&quot;,&quot;language&quot;:&quot;react_native&quot;,&quot;rawCodeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;docs\\\/redflower.jpg\\&quot;).effect(simulateColorBlind());&quot;,&quot;status&quot;:0,&quot;statusText&quot;:&quot;Ok&quot;,&quot;displayName&quot;:&quot;React Native&quot;,&quot;packageName&quot;:&quot;cloudinary-react-native&quot;,&quot;packageStatus&quot;:&quot;&quot;,&quot;packageVersion&quot;:&quot;1.x&quot;}]\"\n      parsed-url=\"{&quot;url&quot;:&quot;https:\\\/\\\/res.cloudinary.com\\\/demo\\\/image\\\/upload\\\/e_simulate_colorblind\\\/docs\\\/redflower.jpg&quot;,&quot;cloud_name&quot;:&quot;demo&quot;,&quot;host&quot;:&quot;res.cloudinary.com&quot;,&quot;type&quot;:&quot;upload&quot;,&quot;resource_type&quot;:&quot;image&quot;,&quot;transformation&quot;:[{&quot;effect&quot;:&quot;simulate_colorblind&quot;}],&quot;transformation_string&quot;:&quot;e_simulate_colorblind&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:null,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;docs\\\/redflower.jpg&quot;,&quot;extension&quot;:&quot;jpg&quot;,&quot;format&quot;:&quot;jpg&quot;,&quot;format_code&quot;:true,&quot;url_code&quot;:false,&quot;signature&quot;:&quot;&quot;,&quot;private_cdn&quot;:false,&quot;result_asset_type&quot;:&quot;image&quot;}\"\n      with-url=\"false\"\n    >\n      <span class=\"u-visually-hidden\">Loading code examples<\/span>\n    <\/cld-code-widget><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind\/docs\/redflower.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind\/docs\/redflower.jpg\" alt=\"Image of a grasshopper on a flower using a colorblind image converter to show how difficult it is to see the grasshopper\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"300\" height=\"225\"\/><\/a><\/p>\n<p>It\u2019s not easy to spot the green grasshopper lurking there due to the redness of the petals.  Did you see it?<\/p>\n<p><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/redflower.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/docs\/redflower.jpg\" alt=\"Image of a grasshopper on a flower without a colorblind image converter to demonstrate how easy it is to see the grasshopper\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"300\" height=\"225\"\/><\/a><\/p>\n<p>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:<\/p>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/v1585652152\/docs\/piechart.png\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250\/bo_1px_solid_black\/v1585652152\/docs\/piechart.png\" alt=\"Image of a pie chart\" title=\"Pie chart\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b style=\"margin-right: 10px;display:block;\">Original image<\/b>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind\/v1585652152\/docs\/piechart.png\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind\/w_250\/bo_1px_solid_black\/v1585652152\/docs\/piechart.png\" alt=\"Image of a pie chart using a colorblind image converter to demonstrate how it looks to a user with deuteranopia\" title=\"Pie chart\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b style=\"margin-right: 10px;display:block;\">Simulated deuteranopia<\/b>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p>You can help your color blind customers by using the <code>assist_colorblind<\/code> effect (<code>e_assist_colorblind<\/code>).  There are two ways to help:<\/p>\n<ul>\n<li>Add vertical and horizontal stripes to problematic colors, specifying the intensity of the stripes with a number between 1 and 100, for example, <code>e_assist_colorblind:20<\/code>:<\/li>\n<\/ul>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:20\/v1585652152\/docs\/piechart.png\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:20\/w_250\/bo_1px_solid_black\/v1585652152\/docs\/piechart.png\" alt=\"Image of a pie chart using a colorblind image converter to enhance the original image for better color blind accessibility\" title=\"Pie chart\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b style=\"margin-right: 10px;display:block;\">e_assist_colorblind:20<\/b>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:20\/e_simulate_colorblind\/v1585652152\/docs\/piechart.png\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:20\/e_simulate_colorblind\/w_250\/bo_1px_solid_black\/v1585652152\/docs\/piechart.png\" alt=\"Image of a pie chart using a colorblind image converter to enhance converted image to deuteranopia for better color blind accessibility\" title=\"Pie chart\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b style=\"margin-right: 10px;display:block;\">e_assist_colorblind:20\/e_simulate_colorblind<\/b>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<ul>\n<li>Change the colors to ones that are less problematic, using the <code>xray<\/code> option, <code>e_assist_colorblind:xray<\/code>:<\/li>\n<\/ul>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<div style=\"text-align:center;\">\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:xray\/docs\/redflower\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:xray\/w_250\/docs\/redflower\" alt=\"Image of a flower with a grasshopper using a colorblind image converter to enhance converted image with high contrast for better color blind accessibility\" title=\"Pie chart\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b style=\"margin-right: 10px;display:block;\">e_assist_colorblind:xray<\/b>\n<\/span>\n<span style=\"display:inline-block;vertical-align:top;\">\n<a href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:xray\/e_simulate_colorblind\/docs\/redflower\" target =\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:xray\/e_simulate_colorblind\/w_250\/docs\/redflower\" alt=\"Image of a flower with a grasshopper using a colorblind image converter to show what the image looks like when converted to a color blind person\" title=\"Red flower\" style=\"margin-right: 10px;display:block;\" \/><\/a>\n<b style=\"margin-right: 10px;display:block;\">e_assist_colorblind:xray\/e_simulate_colorblind<\/b>\n<\/span>\n<\/div>\n<div style=\"clear: both; margin-bottom: 20px\">\n<\/div>\n<p>In each of the above examples, the image on the left is how a normal sighted person would see the image with the <code>assist_colorblind<\/code> effect.  On the right, we\u2019ve chained the <code>simulate_colorblind<\/code> 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.<\/p>\n<h2>How Accessible Are Your Images?<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>Introducing Cloudinary\u2019s <strong>color blind accessibility analysis<\/strong> scores.<\/p>\n<p>Now\u2019s your chance to <a href=\"https:\/\/support.cloudinary.com\/hc\/en-us\/requests\/new\">take part<\/a> in the <strong>color blind accessibility analysis<\/strong> Beta trial.   With this feature activated on your account, the response to an <a href=\"https:\/\/cloudinary.com\/documentation\/image_upload_api_reference#upload_method\">upload<\/a> or <a href=\"https:\/\/cloudinary.com\/documentation\/image_upload_api_reference#explicit_method\">explicit<\/a> request with <code>accessibility_analysis<\/code> set to <code>true<\/code> includes scores for different visual accessibility factors, as follows:<\/p>\n<pre class=\"js-syntax-highlighted\"><code>&quot;accessibility_analysis&quot;: {\n    &quot;colorblind_accessibility_analysis&quot;: {\n      &quot;distinct_edges&quot;: 0.93,\n      &quot;distinct_colors&quot;: 0.33,\n      &quot;most_indistinct_pair&quot;: [\n        &quot;#BCB0AA&quot;,\n        &quot;#B2BEC9&quot;\n      ]\n    },\n    &quot;colorblind_accessibility_score&quot;: 0.63\n  },\n<\/code><\/pre>\n<p>Check out the <a href=\"https:\/\/cloudinary.com\/documentation\/analysis_on_upload#accessibility_analysis\">documentation<\/a> for further details about each of the scores. On upload, the <code>accessibility_analysis.colorblind_accessibility_score<\/code> field is indexed for search so you can easily find images that meet your organization\u2019s requirements.<\/p>\n<p>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 <a href=\"https:\/\/cloudinary.com\/documentation\/upload_presets\">upload preset<\/a>.  Just activate the <strong>Accessibility analysis<\/strong> option when creating your upload preset.<\/p>\n<p>Here are the scores for the images used in this blog post:<\/p>\n<figure class=\"table-wrapper\"><table>\n<thead>\n<tr>\n<th>Paint palette<\/th>\n<th>Flower<\/th>\n<th>Pie chart<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250\/q_auto\/docs\/palette.png\"><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250\/q_auto\/docs\/redflower\"><\/td>\n<td><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_250\/q_auto\/v1585652152\/docs\/piechart\"><\/td>\n<\/tr>\n<tr>\n<td>\u201cdistinct_edges\u201d: 1.0<\/td>\n<td>\u201cdistinct_edges\u201d: 0<\/td>\n<td>\u201cdistinct_edges\u201d: 1.0<\/td>\n<\/tr>\n<tr>\n<td>\u201cdistinct_colors\u201d: 0.08<\/td>\n<td>\u201cdistinct_colors\u201d: 0.12<\/td>\n<td>\u201cdistinct_colors\u201d: 0.77<\/td>\n<\/tr>\n<tr>\n<td>\u201cmost_indistinct_pair\u201d: [<br><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_15,h_15\/r_max\/docs\/fa3300.png\"> \u201c#FA3300\u201d,  <br><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_15,h_15\/r_max\/docs\/00fd20.png\"> \u201c#00FD20\u201d <br>]<\/td>\n<td>\u201cmost_indistinct_pair\u201d: [<br><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_15,h_15,r_max\/docs\/f54802.png\"> \u201c#F54802\u201d,<br>  <img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_15,h_15,r_max\/docs\/4d6602.png\">  \u201c#4D6602\u201d<br>     ]<\/td>\n<td>\u201cmost_indistinct_pair\u201d: [<br><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_15,h_15,r_max\/docs\/fe0000.png\"> \u201c#FE0000\u201d, <br><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_15,h_15,r_max\/docs\/00af50.png\">   \u201c#00AF50\u201d <br>]<\/td>\n<\/tr>\n<tr>\n<td>\u201ccolorblind_accessibility_score\u201d: 0.54<\/td>\n<td>\u201ccolorblind_accessibility_score\u201d: 0.06<\/td>\n<td>\u201ccolorblind_accessibility_score\u201d: 0.89<\/td>\n<\/tr>\n<\/tbody>\n<\/table><\/figure>\n<p>At present, only the <code>accessibility_analysis.colorblind_accessibility_score<\/code> is indexed for search, but it may be more meaningful to identify images that score low for either <code>distinct_edges<\/code> or <code>distinct_colors<\/code>.   One way to do this is to <a href=\"https:\/\/cloudinary.com\/documentation\/analysis_on_upload#evaluating_and_modifying_upload_parameters\">evaluate the score on upload<\/a> using the <code>eval<\/code> parameter and tag those images that don\u2019t meet a certain threshold. The JavaScript assigned to the <code>eval<\/code> parameter might look like this:<\/p>\n<pre class=\"js-syntax-highlighted\" aria-describedby=\"shcb-language-1\" data-shcb-language-name=\"JavaScript\" data-shcb-language-slug=\"javascript\"><span><code class=\"hljs language-javascript shcb-wrap-lines\"><span class=\"hljs-keyword\">if<\/span> (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_edges &lt; <span class=\"hljs-number\">0.8<\/span>)\n{\n   upload_options&#91;<span class=\"hljs-string\">\"tags\"<\/span>] = <span class=\"hljs-string\">\"distinct_edges_issue\"<\/span>;\n} \n<span class=\"hljs-keyword\">if<\/span> (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_colors &lt; <span class=\"hljs-number\">0.8<\/span>) \n{\n   <span class=\"hljs-keyword\">if<\/span> (upload_options&#91;<span class=\"hljs-string\">\"tags\"<\/span>]) \n   {\n      upload_options&#91;<span class=\"hljs-string\">\"tags\"<\/span>] += <span class=\"hljs-string\">\",distinct_colors_issue\"<\/span>;\n   } \n   <span class=\"hljs-keyword\">else<\/span> \n   {\n      upload_options&#91;<span class=\"hljs-string\">\"tags\"<\/span>] = <span class=\"hljs-string\">\"distinct_colors_issue\"<\/span>;\n   }\n}\n<\/code><\/span><small class=\"shcb-language\" id=\"shcb-language-1\"><span class=\"shcb-language__label\">Code language:<\/span> <span class=\"shcb-language__name\">JavaScript<\/span> <span class=\"shcb-language__paren\">(<\/span><span class=\"shcb-language__slug\">javascript<\/span><span class=\"shcb-language__paren\">)<\/span><\/small><\/pre>\n<p>Using the <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_cli\">CLI<\/a> as an example, the full upload command would be as follows (you can, of course, adapt this for different <a href=\"https:\/\/cloudinary.com\/documentation\/cloudinary_sdks\">SDKs<\/a>):<\/p>\n<pre class=\"js-syntax-highlighted\"><code>cld uploader upload sample.jpg accessibility_analysis=true -O eval 'if (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_edges &lt; 0.8){upload_options[&quot;tags&quot;] = &quot;distinct_edges_issue&quot;;} if (resource_info.accessibility_analysis.colorblind_accessibility_analysis.distinct_colors &lt; 0.8) {if (upload_options[&quot;tags&quot;]){upload_options[&quot;tags&quot;] += &quot;,distinct_colors_issue&quot;;}else{upload_options[&quot;tags&quot;] = &quot;distinct_colors_issue&quot;;}}'\n<\/code><\/pre>\n<p>You could then use the Admin API to <a href=\"https:\/\/cloudinary.com\/documentation\/admin_api#get_resources_by_tag\">get the resources by tag<\/a> or <a href=\"https:\/\/cloudinary.com\/documentation\/dam_advanced_search\">the Media Library search<\/a> to find the images you need to address.<\/p>\n<h2>Ideas for Helping your Color Blind Customers<\/h2>\n<p>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.<\/p>\n<p>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.<\/p>\n<p>If you can\u2019t 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:<\/p>\n<ul>\n<li>Apply the <code>colorblind_assist:xray<\/code> effect to images with low <code>distinct_edges<\/code> scores.<\/li>\n<li>Apply the stripes effect (e.g. <code>colorblind_assist:20<\/code>) to images with low <code>distinct_colors<\/code> scores.<\/li>\n<\/ul>\n<p>If you allow users to upload their own content to your website, you could make them stop and think about color accessibility by:<\/p>\n<ul>\n<li>Providing feedback based on the analysis scores on upload.<\/li>\n<li>Providing a mechanism for them to view their content through the eyes of someone with a color blind condition (e.g. <code>simulate_colorblind:protanopia<\/code>).<\/li>\n<\/ul>\n<p>Moreover, if adapting or changing the core design of your images isn\u2019t feasible, consider providing a toggle on your website or app. This toggle could allow users to shift to a color blind-friendly display, making your content more universally accessible. There are also free products on the market, such as Coloristic by BubblePop Software and Visolve by Ryobi Systems Solutions, designed to adjust colors in images and texts to make them more discernible for color blind users. Incorporating such tools or referencing them for your users could make a significant difference in their browsing experience.<\/p>\n<h2>The Pot of Gold at the End of the Rainbow<\/h2>\n<p>Expectations and attitudes regarding accessibility have changed a lot since the days of black and white TV.  It\u2019s 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 <a href=\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\">just one consideration<\/a>, but if you\u2019re trying to broaden your target market and reach out to as many people as possible, you can\u2019t afford to ignore anyone.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":22664,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[337,98,165],"class_list":["post-22038","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accessibility","tag-e-commerce","tag-image-transformation"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v25.6 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Color Blind Image Converter: Make Images for Color Blindness Accessibility<\/title>\n<meta name=\"description\" content=\"Learn how to make images accessible to the color blind with Cloudinary\u2019s free color blind image generator and read how to choose the right approach for your audience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Open Your Eyes to Color Blindness Accessibility\" \/>\n<meta property=\"og:description\" content=\"Learn how to make images accessible to the color blind with Cloudinary\u2019s free color blind image generator and read how to choose the right approach for your audience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2020-09-08T15:01:07+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-20T23:36:17+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"2100\" \/>\n\t<meta property=\"og:image:height\" content=\"1000\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"NewsArticle\",\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Open Your Eyes to Color Blindness Accessibility\",\"datePublished\":\"2020-09-08T15:01:07+00:00\",\"dateModified\":\"2025-10-20T23:36:17+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility\"},\"wordCount\":7,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA\",\"keywords\":[\"Accessibility\",\"E-commerce\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2020\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility\",\"url\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility\",\"name\":\"Color Blind Image Converter: Make Images for Color Blindness Accessibility\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA\",\"datePublished\":\"2020-09-08T15:01:07+00:00\",\"dateModified\":\"2025-10-20T23:36:17+00:00\",\"description\":\"Learn how to make images accessible to the color blind with Cloudinary\u2019s free color blind image generator and read how to choose the right approach for your audience.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA\",\"width\":2100,\"height\":1000,\"caption\":\"Image showing a person\u2019s face covered in bright paint emphasizing the need for color blindness accessibility\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Open Your Eyes to Color Blindness Accessibility\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"name\":\"Cloudinary Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/cloudinary.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\",\"name\":\"Cloudinary Blog\",\"url\":\"https:\/\/cloudinary.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA\",\"width\":312,\"height\":60,\"caption\":\"Cloudinary Blog\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Color Blind Image Converter: Make Images for Color Blindness Accessibility","description":"Learn how to make images accessible to the color blind with Cloudinary\u2019s free color blind image generator and read how to choose the right approach for your audience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility","og_locale":"en_US","og_type":"article","og_title":"Open Your Eyes to Color Blindness Accessibility","og_description":"Learn how to make images accessible to the color blind with Cloudinary\u2019s free color blind image generator and read how to choose the right approach for your audience.","og_url":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility","og_site_name":"Cloudinary Blog","article_published_time":"2020-09-08T15:01:07+00:00","article_modified_time":"2025-10-20T23:36:17+00:00","og_image":[{"width":2100,"height":1000,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility"},"author":{"name":"","@id":""},"headline":"Open Your Eyes to Color Blindness Accessibility","datePublished":"2020-09-08T15:01:07+00:00","dateModified":"2025-10-20T23:36:17+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility"},"wordCount":7,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA","keywords":["Accessibility","E-commerce","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2020","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility","url":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility","name":"Color Blind Image Converter: Make Images for Color Blindness Accessibility","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA","datePublished":"2020-09-08T15:01:07+00:00","dateModified":"2025-10-20T23:36:17+00:00","description":"Learn how to make images accessible to the color blind with Cloudinary\u2019s free color blind image generator and read how to choose the right approach for your audience.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA","width":2100,"height":1000,"caption":"Image showing a person\u2019s face covered in bright paint emphasizing the need for color blindness accessibility"},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/open_your_eyes_to_color_accessibility#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Open Your Eyes to Color Blindness Accessibility"}]},{"@type":"WebSite","@id":"https:\/\/cloudinary.com\/blog\/#website","url":"https:\/\/cloudinary.com\/blog\/","name":"Cloudinary Blog","description":"","publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/cloudinary.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/cloudinary.com\/blog\/#organization","name":"Cloudinary Blog","url":"https:\/\/cloudinary.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649718331\/Web_Assets\/blog\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877\/cloudinary_logo_for_white_bg_1937437aa7_19374666c7_193742f877.png?_i=AA","width":312,"height":60,"caption":"Cloudinary Blog"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":""}]}},"jetpack_featured_media_url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1645573659\/website-2021\/blog\/eyescolorful\/eyescolorful.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22038","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/users\/41"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/comments?post=22038"}],"version-history":[{"count":6,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22038\/revisions"}],"predecessor-version":[{"id":38925,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/22038\/revisions\/38925"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/22664"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=22038"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=22038"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=22038"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}