{"id":21957,"date":"2019-10-02T16:40:12","date_gmt":"2019-10-02T16:40:12","guid":{"rendered":"http:\/\/simple_steps_to_make_your_site_accessible_with_cloudinary"},"modified":"2024-06-06T13:16:22","modified_gmt":"2024-06-06T20:16:22","slug":"simple_steps_to_make_your_site_accessible_with_cloudinary","status":"publish","type":"post","link":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary","title":{"rendered":"Simple Steps to Make Your Site Accessible With Cloudinary"},"content":{"rendered":"<div class=\"wp-block-cloudinary-markdown \"><p>Web accessibility (a11y) is about gaining an insight into\u2014<\/p>\n<ul>\n<li>What your users <strong>see or hear<\/strong> when they open your app.<\/li>\n<li>How they <strong>understand<\/strong> your app through interpretation.<\/li>\n<li>How they can <strong>use<\/strong> your app with ease.<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/w_700,c_fill,f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/see_understand_use.png\" alt=\"Emoji\u2019s\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"1400\" height=\"422\"\/><\/p>\n<p>It\u2019s a blurry line between accessibility and usability (or user experience) and one might argue that they are actually the same thing. Nonetheless, if your audience can\u2019t use your app with ease and confidence, then it\u2019s <strong>not accessible enough<\/strong> and the user experience is <strong>not good enough<\/strong>.<\/p>\n<h2>The State of the Visual Web<\/h2>\n<p>Over the past decade, <a href=\"https:\/\/cloudinary.com\/state-of-visual-media-report\">user behavior on the web has turned much more visual<\/a>, as can be attested by, for example, Instagram\u2019s success. After all, we tend to retain what we see <strong>more<\/strong> than what we read. As the old saw goes, a picture is worth <strong>1,000 words<\/strong>; and studies have shown that a video is worth <strong>1.8 million words<\/strong>.<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/image\/upload\/f_auto,q_auto,dpr_2.0\/Web_Assets\/blog\/state_of_visual_web.png\" alt=\"State of the Web Report\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"300\" height=\"371.17117117117\"\/><\/p>\n<p>Given that trend, accessibility of visual media to web users is key.<\/p>\n<p>The behavior change for web users brings accessibility to a new level. Users, including those with visual impairments, rely on media to process the delivered information. The same reliance applies to companies in content delivery and user engagement. Hence the need for <a href=\"https:\/\/twitter.com\/search?q=%23m16y&amp;src=typed_query\"><strong>media accessibility (m16y)<\/strong><\/a>.<\/p>\n<p><strong>And remember:<\/strong><\/p>\n<h4>accessibility + visual web = media accessibility (m16y)<\/h4>\n<h2>Web Content Accessibility Guidelines (WCAG)<\/h2>\n<p>Since their release years ago, the Web Content Accessibility Guidelines (WCAG) have been tough to comply with. They contain <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/\">four main groups<\/a>: perceivable, operable, understandable, and robust. Media accessibility is all about ensuring that your site is perceivable for <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#time-based-media\">time-based media<\/a> (video and audio), <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#use-of-color\">color usage<\/a>, and <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#distinguishable\">a combination of web contents<\/a>.<\/p>\n<h2>Enablement of Media Accessibility (m16y) With Cloudinary<\/h2>\n<p>Solutions for enabling media accessibility abound, ranging from straightforward tools like CSS to complex ones that involve algorithms. Cloudinary\u2019s dynamic-transformation capability stands out as being intuitive and simple, requiring the least code. Following are the features that relate to media accessibility.<\/p>\n<h3>Put Yourself in Your Audience\u2019s Shoes With the simulate_colorblind Effect<\/h3>\n<p>Color blindness is one of the most onerous visual-impairment challenges to overcome, let alone that no standards exist for solutions. The best way to understand how color-blind people experience your site is by experimenting with it yourself: apply Cloudinary\u2019s latest transformation effect <code>simulate_colorblind<\/code> to an image, like this:<\/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;pie_chart.png\\&quot;, {effect: \\&quot;simulate_colorblind\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pie_chart.png\\&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;pie_chart.png\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&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;pie_chart.png\\&quot; &gt; &lt;Transformation effect=\\&quot;simulate_colorblind\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pie_chart.png\\&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;pie_chart.png\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&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;pie_chart.png\\&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;pie_chart.png\\&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;pie_chart.png\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&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;pie_chart.png\\&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;pie_chart.png\\&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;pie_chart.png\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&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;pie_chart.png&#039;, {effect: \\&quot;simulate_colorblind\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pie_chart.png&#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;pie_chart.png\\&quot;).image(effect=\\&quot;simulate_colorblind\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pie_chart.png\\&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;pie_chart.png&#039;))\\n\\t-&gt;effect(Effect::simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pie_chart.png&#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;pie_chart.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&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;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;simulate_colorblind\\&quot;)).imageTag(\\&quot;pie_chart.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;pie_chart.png\\&quot;, effect: \\&quot;simulate_colorblind\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&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;pie_chart.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;simulate_colorblind\\&quot;)).BuildImageTag(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#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;pie_chart.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;simulate_colorblind\\&quot;)).generate(\\&quot;pie_chart.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\\&quot;)).generate(\\&quot;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;simulate_colorblind\\&quot;)).generate(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#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;pie_chart.png\\&quot;)\\n\\t effect(Effect.simulateColorBlind()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pie_chart.png\\&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;pie_chart.png\\&quot;, {effect: \\&quot;simulate_colorblind\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pie_chart.png\\&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;pie_chart.png\\&quot;).effect(simulateColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&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\\\/pie_chart.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&quot;}],&quot;transformation_string&quot;:&quot;e_simulate_colorblind&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pie_chart.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><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind\/pie_chart.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind\/pie_chart.png\" alt=\"Simulate color blindness\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"357.14285714286\"\/><\/a><\/p>\n<p>The default mode is simulation of deuteranopia. To simulate another color-blind type, such as tritanopia, edit the <code>e_simulate_colorblind<\/code> portion of the URL, like this:<\/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;pie_chart.jpg\\&quot;, {effect: \\&quot;simulate_colorblind:tritanopia\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pie_chart.jpg\\&quot;, {effect: \\&quot;simulate_colorblind:tritanopia\\&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;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&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;pie_chart.jpg\\&quot; &gt; &lt;Transformation effect=\\&quot;simulate_colorblind:tritanopia\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pie_chart.jpg\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;simulate_colorblind:tritanopia\\&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;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&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;pie_chart.jpg\\&quot; &gt; &lt;cld-transformation effect=\\&quot;simulate_colorblind:tritanopia\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;pie_chart.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;simulate_colorblind:tritanopia\\&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;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&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;pie_chart.jpg\\&quot; &gt; &lt;cl-transformation effect=\\&quot;simulate_colorblind:tritanopia\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;pie_chart.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;simulate_colorblind:tritanopia\\&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;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&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;pie_chart.jpg&#039;, {effect: \\&quot;simulate_colorblind:tritanopia\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pie_chart.jpg&#039;, {effect: \\&quot;simulate_colorblind:tritanopia\\&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;pie_chart.jpg\\&quot;).image(effect=\\&quot;simulate_colorblind:tritanopia\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;).image(effect=\\&quot;simulate_colorblind:tritanopia\\&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;pie_chart.jpg&#039;))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::tritanopia())\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pie_chart.jpg&#039;))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::tritanopia())\\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;pie_chart.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:tritanopia\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.jpg\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:tritanopia\\&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:tritanopia\\&quot;)).imageTag(\\&quot;pie_chart.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;simulate_colorblind:tritanopia\\&quot;)).imageTag(\\&quot;pie_chart.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;pie_chart.jpg\\&quot;, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.jpg\\&quot;, effect: \\&quot;simulate_colorblind:tritanopia\\&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:tritanopia\\&quot;)).BuildImageTag(\\&quot;pie_chart.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;simulate_colorblind:tritanopia\\&quot;)).BuildImageTag(\\&quot;pie_chart.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;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\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:tritanopia\\&quot;)).generate(\\&quot;pie_chart.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;simulate_colorblind:tritanopia\\&quot;)).generate(\\&quot;pie_chart.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:tritanopia\\&quot;)).generate(\\&quot;pie_chart.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;simulate_colorblind:tritanopia\\&quot;)).generate(\\&quot;pie_chart.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;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\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;pie_chart.jpg\\&quot;)\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pie_chart.jpg\\&quot;)\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.tritanopia())\\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;pie_chart.jpg\\&quot;, {effect: \\&quot;simulate_colorblind:tritanopia\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pie_chart.jpg\\&quot;, {effect: \\&quot;simulate_colorblind:tritanopia\\&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;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&quot;)\\n);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;).effect(\\n  simulateColorBlind().condition(\\&quot;tritanopia\\&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:tritanopia\\\/pie_chart.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:tritanopia&quot;}],&quot;transformation_string&quot;:&quot;e_simulate_colorblind:tritanopia&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pie_chart.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=\"true\"\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:tritanopia\/pie_chart.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_simulate_colorblind:tritanopia\/pie_chart.jpg\" alt=\"tritanopia\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"357.14285714286\"\/><\/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;pie_chart.jpg\\&quot;, {transformation: [ {width: 700, height: 500, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pie_chart.jpg\\&quot;, {transformation: [\\n  {width: 700, height: 500, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;}\\n  ]})&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;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\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;pie_chart.jpg\\&quot; &gt; &lt;Transformation width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; x=\\&quot;700\\&quot; effect=\\&quot;simulate_colorblind:tritanopia\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;500\\&quot; x=\\&quot;-350\\&quot; effect=\\&quot;simulate_colorblind\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;Transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;250\\&quot; x=\\&quot;350\\&quot; effect=\\&quot;simulate_colorblind:tritanomaly\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pie_chart.jpg\\&quot; &gt;\\n\\t&lt;Transformation width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; x=\\&quot;700\\&quot; effect=\\&quot;simulate_colorblind:tritanopia\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;500\\&quot; x=\\&quot;-350\\&quot; effect=\\&quot;simulate_colorblind\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;Transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;250\\&quot; x=\\&quot;350\\&quot; effect=\\&quot;simulate_colorblind:tritanomaly\\&quot; crop=\\&quot;fill\\&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;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\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;pie_chart.jpg\\&quot; &gt; &lt;cld-transformation width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; x=\\&quot;700\\&quot; effect=\\&quot;simulate_colorblind:tritanopia\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;500\\&quot; x=\\&quot;-350\\&quot; effect=\\&quot;simulate_colorblind\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;cld-transformation :overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;250\\&quot; x=\\&quot;350\\&quot; effect=\\&quot;simulate_colorblind:tritanomaly\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;pie_chart.jpg\\&quot; &gt;\\n\\t&lt;cld-transformation width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; x=\\&quot;700\\&quot; effect=\\&quot;simulate_colorblind:tritanopia\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;500\\&quot; x=\\&quot;-350\\&quot; effect=\\&quot;simulate_colorblind\\&quot; crop=\\&quot;fill\\&quot; \\\/&gt;\\n\\t&lt;cld-transformation :overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;250\\&quot; x=\\&quot;350\\&quot; effect=\\&quot;simulate_colorblind:tritanomaly\\&quot; crop=\\&quot;fill\\&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;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\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;pie_chart.jpg\\&quot; &gt; &lt;cl-transformation width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; x=\\&quot;700\\&quot; effect=\\&quot;simulate_colorblind:tritanopia\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;500\\&quot; x=\\&quot;-350\\&quot; effect=\\&quot;simulate_colorblind\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;cl-transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;250\\&quot; x=\\&quot;350\\&quot; effect=\\&quot;simulate_colorblind:tritanomaly\\&quot; crop=\\&quot;fill\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;pie_chart.jpg\\&quot; &gt;\\n\\t&lt;cl-transformation width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; x=\\&quot;700\\&quot; effect=\\&quot;simulate_colorblind:tritanopia\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;500\\&quot; x=\\&quot;-350\\&quot; effect=\\&quot;simulate_colorblind\\&quot; crop=\\&quot;fill\\&quot;&gt;\\n\\t&lt;\\\/cl-transformation&gt;\\n\\t&lt;cl-transformation overlay=\\&quot;pie_chart\\&quot; width=\\&quot;700\\&quot; height=\\&quot;500\\&quot; y=\\&quot;250\\&quot; x=\\&quot;350\\&quot; effect=\\&quot;simulate_colorblind:tritanomaly\\&quot; crop=\\&quot;fill\\&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;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\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;pie_chart.jpg&#039;, {transformation: [ {width: 700, height: 500, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;} ]}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pie_chart.jpg&#039;, {transformation: [\\n  {width: 700, height: 500, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;}\\n  ]}).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;pie_chart.jpg\\&quot;).image(transformation=[ {&#039;width&#039;: 700, &#039;height&#039;: 500, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;pie_chart\\&quot;, &#039;width&#039;: 700, &#039;height&#039;: 500, &#039;x&#039;: 700, &#039;effect&#039;: \\&quot;simulate_colorblind:tritanopia\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;pie_chart\\&quot;, &#039;width&#039;: 700, &#039;height&#039;: 500, &#039;y&#039;: 500, &#039;x&#039;: -350, &#039;effect&#039;: \\&quot;simulate_colorblind\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;}, {&#039;overlay&#039;: \\&quot;pie_chart\\&quot;, &#039;width&#039;: 700, &#039;height&#039;: 500, &#039;y&#039;: 250, &#039;x&#039;: 350, &#039;effect&#039;: \\&quot;simulate_colorblind:tritanomaly\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;).image(transformation=[\\n  {&#039;width&#039;: 700, &#039;height&#039;: 500, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;pie_chart\\&quot;, &#039;width&#039;: 700, &#039;height&#039;: 500, &#039;x&#039;: 700, &#039;effect&#039;: \\&quot;simulate_colorblind:tritanopia\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;pie_chart\\&quot;, &#039;width&#039;: 700, &#039;height&#039;: 500, &#039;y&#039;: 500, &#039;x&#039;: -350, &#039;effect&#039;: \\&quot;simulate_colorblind\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;},\\n  {&#039;overlay&#039;: \\&quot;pie_chart\\&quot;, &#039;width&#039;: 700, &#039;height&#039;: 500, &#039;y&#039;: 250, &#039;x&#039;: 350, &#039;effect&#039;: \\&quot;simulate_colorblind:tritanomaly\\&quot;, &#039;crop&#039;: \\&quot;fill\\&quot;}\\n  ])&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;pie_chart.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;pie_chart\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::tritanopia())\\n\\t))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(700))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;pie_chart\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;effect(Effect::simulateColorBlind()))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(-350)\\n-&gt;offsetY(500))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;pie_chart\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::tritanomaly())\\n\\t))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(350)\\n-&gt;offsetY(250))\\n\\t);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pie_chart.jpg&#039;))\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;pie_chart\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::tritanopia())\\n\\t))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(700))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;pie_chart\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;effect(Effect::simulateColorBlind()))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(-350)\\n-&gt;offsetY(500))\\n\\t)\\n\\t-&gt;overlay(Overlay::source(\\n\\tSource::image(\\&quot;pie_chart\\&quot;)\\n\\t-&gt;transformation((new Transformation())\\n\\t-&gt;resize(Resize::fill()-&gt;width(700)\\n-&gt;height(500))\\n\\t-&gt;effect(Effect::simulateColorBlind()\\n\\t-&gt;condition(\\n\\tSimulateColorBlind::tritanomaly())\\n\\t))\\n\\t)\\n\\t-&gt;position((new Position())-&gt;offsetX(350)\\n-&gt;offsetY(250))\\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;pie_chart.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array( array(\\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;pie_chart\\&quot;, \\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;x\\&quot;=&gt;700, \\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:tritanopia\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;pie_chart\\&quot;, \\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;y\\&quot;=&gt;500, \\&quot;x\\&quot;=&gt;-350, \\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;), array(\\&quot;overlay\\&quot;=&gt;\\&quot;pie_chart\\&quot;, \\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;y\\&quot;=&gt;250, \\&quot;x\\&quot;=&gt;350, \\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:tritanomaly\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;) )))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.jpg\\&quot;, array(\\&quot;transformation\\&quot;=&gt;array(\\n  array(\\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;pie_chart\\&quot;, \\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;x\\&quot;=&gt;700, \\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:tritanopia\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;pie_chart\\&quot;, \\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;y\\&quot;=&gt;500, \\&quot;x\\&quot;=&gt;-350, \\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;),\\n  array(\\&quot;overlay\\&quot;=&gt;\\&quot;pie_chart\\&quot;, \\&quot;width\\&quot;=&gt;700, \\&quot;height\\&quot;=&gt;500, \\&quot;y\\&quot;=&gt;250, \\&quot;x\\&quot;=&gt;350, \\&quot;effect\\&quot;=&gt;\\&quot;simulate_colorblind:tritanomaly\\&quot;, \\&quot;crop\\&quot;=&gt;\\&quot;fill\\&quot;)\\n  )))&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().width(700).height(500).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).x(700).effect(\\&quot;simulate_colorblind:tritanopia\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(500).x(-350).effect(\\&quot;simulate_colorblind\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(250).x(350).effect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;pie_chart.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation()\\n  .width(700).height(500).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).x(700).effect(\\&quot;simulate_colorblind:tritanopia\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(500).x(-350).effect(\\&quot;simulate_colorblind\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(250).x(350).effect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).crop(\\&quot;fill\\&quot;)).imageTag(\\&quot;pie_chart.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;pie_chart.jpg\\&quot;, transformation: [ {width: 700, height: 500, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;} ])&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.jpg\\&quot;, transformation: [\\n  {width: 700, height: 500, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: \\&quot;pie_chart\\&quot;, width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;}\\n  ])&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().Width(700).Height(500).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;pie_chart\\&quot;)).Width(700).Height(500).X(700).Effect(\\&quot;simulate_colorblind:tritanopia\\&quot;).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;pie_chart\\&quot;)).Width(700).Height(500).Y(500).X(-350).Effect(\\&quot;simulate_colorblind\\&quot;).Crop(\\&quot;fill\\&quot;).Chain() .Overlay(new Layer().PublicId(\\&quot;pie_chart\\&quot;)).Width(700).Height(500).Y(250).X(350).Effect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;pie_chart.jpg\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation()\\n  .Width(700).Height(500).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;pie_chart\\&quot;)).Width(700).Height(500).X(700).Effect(\\&quot;simulate_colorblind:tritanopia\\&quot;).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;pie_chart\\&quot;)).Width(700).Height(500).Y(500).X(-350).Effect(\\&quot;simulate_colorblind\\&quot;).Crop(\\&quot;fill\\&quot;).Chain()\\n  .Overlay(new Layer().PublicId(\\&quot;pie_chart\\&quot;)).Width(700).Height(500).Y(250).X(350).Effect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).Crop(\\&quot;fill\\&quot;)).BuildImageTag(\\&quot;pie_chart.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;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(700))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()))\\n\\t)\\n\\t.position(Position().offsetX(-350)\\n.offsetY(500))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanomaly())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(350)\\n.offsetY(250))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(700))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()))\\n\\t)\\n\\t.position(Position().offsetX(-350)\\n.offsetY(500))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanomaly())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(350)\\n.offsetY(250))\\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().setWidth(700).setHeight(500).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;pie_chart\\&quot;).setWidth(700).setHeight(500).setX(700).setEffect(\\&quot;simulate_colorblind:tritanopia\\&quot;).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;pie_chart\\&quot;).setWidth(700).setHeight(500).setY(500).setX(-350).setEffect(\\&quot;simulate_colorblind\\&quot;).setCrop(\\&quot;fill\\&quot;).chain() .setOverlay(\\&quot;pie_chart\\&quot;).setWidth(700).setHeight(500).setY(250).setX(350).setEffect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;pie_chart.jpg\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation()\\n  .setWidth(700).setHeight(500).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;pie_chart\\&quot;).setWidth(700).setHeight(500).setX(700).setEffect(\\&quot;simulate_colorblind:tritanopia\\&quot;).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;pie_chart\\&quot;).setWidth(700).setHeight(500).setY(500).setX(-350).setEffect(\\&quot;simulate_colorblind\\&quot;).setCrop(\\&quot;fill\\&quot;).chain()\\n  .setOverlay(\\&quot;pie_chart\\&quot;).setWidth(700).setHeight(500).setY(250).setX(350).setEffect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).setCrop(\\&quot;fill\\&quot;)).generate(\\&quot;pie_chart.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().width(700).height(500).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).x(700).effect(\\&quot;simulate_colorblind:tritanopia\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(500).x(-350).effect(\\&quot;simulate_colorblind\\&quot;).crop(\\&quot;fill\\&quot;).chain() .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(250).x(350).effect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).crop(\\&quot;fill\\&quot;)).generate(\\&quot;pie_chart.jpg\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation()\\n  .width(700).height(500).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).x(700).effect(\\&quot;simulate_colorblind:tritanopia\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(500).x(-350).effect(\\&quot;simulate_colorblind\\&quot;).crop(\\&quot;fill\\&quot;).chain()\\n  .overlay(new Layer().publicId(\\&quot;pie_chart\\&quot;)).width(700).height(500).y(250).x(350).effect(\\&quot;simulate_colorblind:tritanomaly\\&quot;).crop(\\&quot;fill\\&quot;)).generate(\\&quot;pie_chart.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;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(700))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()))\\n\\t)\\n\\t.position(Position().offsetX(-350)\\n.offsetY(500))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanomaly())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(350)\\n.offsetY(250))\\n\\t));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.jpg&#039;).transformation(Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(700))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()))\\n\\t)\\n\\t.position(Position().offsetX(-350)\\n.offsetY(500))\\n\\t)\\n\\t.overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;)\\n\\t.transformation(new Transformation()\\n\\t.resize(Resize.fill().width(700)\\n.height(500))\\n\\t.effect(Effect.simulateColorBlind()\\n\\t.condition(\\n\\tSimulateColorBlind.tritanomaly())\\n\\t))\\n\\t)\\n\\t.position(Position().offsetX(350)\\n.offsetY(250))\\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;pie_chart.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t }) })\\n\\t }) {\\n\\t position(Position() { offsetX(700) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t effect(Effect.simulateColorBlind()) })\\n\\t }) {\\n\\t position(Position() { offsetX(-350)\\n offsetY(500) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.tritanomaly())\\n\\t }) })\\n\\t }) {\\n\\t position(Position() { offsetX(350)\\n offsetY(250) })\\n\\t }) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pie_chart.jpg\\&quot;)\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.tritanopia())\\n\\t }) })\\n\\t }) {\\n\\t position(Position() { offsetX(700) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t effect(Effect.simulateColorBlind()) })\\n\\t }) {\\n\\t position(Position() { offsetX(-350)\\n offsetY(500) })\\n\\t })\\n\\t overlay(Overlay.source(\\n\\tSource.image(\\&quot;pie_chart\\&quot;) {\\n\\t transformation(Transformation {\\n\\t resize(Resize.fill() { width(700)\\n height(500) })\\n\\t effect(Effect.simulateColorBlind() {\\n\\t condition(\\n\\tSimulateColorBlind.tritanomaly())\\n\\t }) })\\n\\t }) {\\n\\t position(Position() { offsetX(350)\\n offsetY(250) })\\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;pie_chart.jpg\\&quot;, {transformation: [ {width: 700, height: 500, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;}, {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;} ]})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pie_chart.jpg\\&quot;, {transformation: [\\n  {width: 700, height: 500, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, x: 700, effect: \\&quot;simulate_colorblind:tritanopia\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 500, x: -350, effect: \\&quot;simulate_colorblind\\&quot;, crop: \\&quot;fill\\&quot;},\\n  {overlay: new cloudinary.Layer().publicId(\\&quot;pie_chart\\&quot;), width: 700, height: 500, y: 250, x: 350, effect: \\&quot;simulate_colorblind:tritanomaly\\&quot;, crop: \\&quot;fill\\&quot;}\\n  ]})&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;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\n  );&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.jpg\\&quot;)\\n  .resize(fill().width(700).height(500))\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanopia\\&quot;))\\n      )\\n    ).position(new Position().offsetX(700))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind())\\n      )\\n    ).position(new Position().offsetX(-350).offsetY(500))\\n  )\\n  .overlay(\\n    source(\\n      image(\\&quot;pie_chart\\&quot;).transformation(\\n        new Transformation()\\n          .resize(fill().width(700).height(500))\\n          .effect(simulateColorBlind().condition(\\&quot;tritanomaly\\&quot;))\\n      )\\n    ).position(new Position().offsetX(350).offsetY(250))\\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\\\/w_700,h_500,c_fill\\\/l_pie_chart,w_700,h_500,c_fill,x_700,e_simulate_colorblind:tritanopia\\\/l_pie_chart,w_700,h_500,c_fill,y_500,x_-350,e_simulate_colorblind\\\/l_pie_chart,w_700,h_500,c_fill,y_250,x_350,e_simulate_colorblind:tritanomaly\\\/pie_chart.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;width&quot;:&quot;700&quot;,&quot;height&quot;:&quot;500&quot;,&quot;crop_mode&quot;:&quot;fill&quot;},{&quot;overlay&quot;:&quot;pie_chart&quot;,&quot;width&quot;:&quot;700&quot;,&quot;height&quot;:&quot;500&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;x&quot;:&quot;700&quot;,&quot;effect&quot;:&quot;simulate_colorblind:tritanopia&quot;},{&quot;overlay&quot;:&quot;pie_chart&quot;,&quot;width&quot;:&quot;700&quot;,&quot;height&quot;:&quot;500&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;y&quot;:&quot;500&quot;,&quot;x&quot;:&quot;-350&quot;,&quot;effect&quot;:&quot;simulate_colorblind&quot;},{&quot;overlay&quot;:&quot;pie_chart&quot;,&quot;width&quot;:&quot;700&quot;,&quot;height&quot;:&quot;500&quot;,&quot;crop_mode&quot;:&quot;fill&quot;,&quot;y&quot;:&quot;250&quot;,&quot;x&quot;:&quot;350&quot;,&quot;effect&quot;:&quot;simulate_colorblind:tritanomaly&quot;}],&quot;transformation_string&quot;:&quot;w_700,h_500,c_fill\\\/l_pie_chart,w_700,h_500,c_fill,x_700,e_simulate_colorblind:tritanopia\\\/l_pie_chart,w_700,h_500,c_fill,y_500,x_-350,e_simulate_colorblind\\\/l_pie_chart,w_700,h_500,c_fill,y_250,x_350,e_simulate_colorblind:tritanomaly&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pie_chart.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=\"true\"\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\/w_700,h_500,c_fill\/l_pie_chart,w_700,h_500,c_fill,x_700,e_simulate_colorblind:tritanopia\/l_pie_chart,w_700,h_500,c_fill,y_500,x_-350,e_simulate_colorblind\/l_pie_chart,w_700,h_500,c_fill,y_250,x_350,e_simulate_colorblind:tritanomaly\/pie_chart.jpg\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/w_700,h_500,c_fill\/l_pie_chart,w_700,h_500,c_fill,x_700,e_simulate_colorblind:tritanopia\/l_pie_chart,w_700,h_500,c_fill,y_500,x_-350,e_simulate_colorblind\/l_pie_chart,w_700,h_500,c_fill,y_250,x_350,e_simulate_colorblind:tritanomaly\/pie_chart.jpg\" alt=\"Pie charts\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"357.14285714286\"\/><\/a><\/p>\n<h3>Display Colors With the Color-Blind Support Effect<\/h3>\n<p>Displaying colors for the visually impaired is a knotty task. To do that\u2014even for fundamental user-interface elements, such as text and buttons\u2014involves complex calculations with JavaScript and CSS. But what about displaying red and green colors in images for those who are afflicted with deuteranopia? Cloudinary\u2019s color-blind support effect, <code>e_assist_colorblind<\/code>, aptly serves that purpose, as shown in this picture:<\/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;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pie_chart.png\\&quot;, {effect: \\&quot;assist_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;pie_chart.png\\&quot;).effect(assistColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;).effect(assistColorBlind());&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;pie_chart.png\\&quot; &gt; &lt;Transformation effect=\\&quot;assist_colorblind\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;assist_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;pie_chart.png\\&quot;).effect(assistColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;).effect(assistColorBlind());&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;pie_chart.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;assist_colorblind\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;assist_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;pie_chart.png\\&quot;).effect(assistColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;).effect(assistColorBlind());&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;pie_chart.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;assist_colorblind\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;assist_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;pie_chart.png\\&quot;).effect(assistColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;).effect(assistColorBlind());&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;pie_chart.png&#039;, {effect: \\&quot;assist_colorblind\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pie_chart.png&#039;, {effect: \\&quot;assist_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;pie_chart.png\\&quot;).image(effect=\\&quot;assist_colorblind\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pie_chart.png\\&quot;).image(effect=\\&quot;assist_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;pie_chart.png&#039;))\\n\\t-&gt;effect(Effect::assistColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pie_chart.png&#039;))\\n\\t-&gt;effect(Effect::assistColorBlind());&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;pie_chart.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;assist_colorblind\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;assist_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;assist_colorblind\\&quot;)).imageTag(\\&quot;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;assist_colorblind\\&quot;)).imageTag(\\&quot;pie_chart.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;pie_chart.png\\&quot;, effect: \\&quot;assist_colorblind\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&quot;, effect: \\&quot;assist_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;assist_colorblind\\&quot;)).BuildImageTag(\\&quot;pie_chart.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;assist_colorblind\\&quot;)).BuildImageTag(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind()));&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;assist_colorblind\\&quot;)).generate(\\&quot;pie_chart.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;assist_colorblind\\&quot;)).generate(\\&quot;pie_chart.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;assist_colorblind\\&quot;)).generate(\\&quot;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;assist_colorblind\\&quot;)).generate(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind()));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind()));&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;pie_chart.png\\&quot;)\\n\\t effect(Effect.assistColorBlind()) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pie_chart.png\\&quot;)\\n\\t effect(Effect.assistColorBlind()) \\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;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pie_chart.png\\&quot;, {effect: \\&quot;assist_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;pie_chart.png\\&quot;).effect(assistColorBlind());&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;).effect(assistColorBlind());&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_assist_colorblind\\\/pie_chart.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;assist_colorblind&quot;}],&quot;transformation_string&quot;:&quot;e_assist_colorblind&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pie_chart.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><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind\/pie_chart.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind\/pie_chart.png\" alt=\"Pie chart\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"357.14285714286\"\/><\/a><\/p>\n<p><code>e_assist_colorblind<\/code> adds stripes to highlight the difference between hot (red) and cold (green) colors, enabling the deuteranopia-afflicted people to immediately figure out, for example, whether they are looking at a shirt with two different colors even if it might seem otherwise.<\/p>\n<ul>\n<li>\n<p>Additionally, here are a couple of cool tricks: To control the color intensity of the stripes, append a numerical value to the parameter, for example, <code>e_assist_colorblind:30<\/code><\/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;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:30\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:30\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&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;pie_chart.png\\&quot; &gt; &lt;Transformation effect=\\&quot;assist_colorblind:30\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;assist_colorblind:30\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&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;pie_chart.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;assist_colorblind:30\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;assist_colorblind:30\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&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;pie_chart.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;assist_colorblind:30\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;assist_colorblind:30\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&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;pie_chart.png&#039;, {effect: \\&quot;assist_colorblind:30\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pie_chart.png&#039;, {effect: \\&quot;assist_colorblind:30\\&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;pie_chart.png\\&quot;).image(effect=\\&quot;assist_colorblind:30\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pie_chart.png\\&quot;).image(effect=\\&quot;assist_colorblind:30\\&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;pie_chart.png&#039;))\\n\\t-&gt;effect(Effect::assistColorBlind()-&gt;stripesStrength(30))\\n\\t-&gt;version(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pie_chart.png&#039;))\\n\\t-&gt;effect(Effect::assistColorBlind()-&gt;stripesStrength(30))\\n\\t-&gt;version(1568815086);&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;pie_chart.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;assist_colorblind:30\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;assist_colorblind:30\\&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;assist_colorblind:30\\&quot;)).imageTag(\\&quot;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;assist_colorblind:30\\&quot;)).imageTag(\\&quot;pie_chart.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;pie_chart.png\\&quot;, effect: \\&quot;assist_colorblind:30\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&quot;, effect: \\&quot;assist_colorblind:30\\&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;assist_colorblind:30\\&quot;)).BuildImageTag(\\&quot;pie_chart.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;assist_colorblind:30\\&quot;)).BuildImageTag(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().stripesStrength(30))\\n\\t.version(1568815086));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().stripesStrength(30))\\n\\t.version(1568815086));&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;assist_colorblind:30\\&quot;)).generate(\\&quot;pie_chart.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;assist_colorblind:30\\&quot;)).generate(\\&quot;pie_chart.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;assist_colorblind:30\\&quot;)).generate(\\&quot;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;assist_colorblind:30\\&quot;)).generate(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().stripesStrength(30))\\n\\t.version(1568815086));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().stripesStrength(30))\\n\\t.version(1568815086));&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;pie_chart.png\\&quot;)\\n\\t effect(Effect.assistColorBlind() { stripesStrength(30) })\\n\\t version(1568815086) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pie_chart.png\\&quot;)\\n\\t effect(Effect.assistColorBlind() { stripesStrength(30) })\\n\\t version(1568815086) \\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;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:30\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:30\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().stripesStrength(30))\\n  .setVersion(1568815086);&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_assist_colorblind:30\\\/v1568815086\\\/pie_chart.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;assist_colorblind:30&quot;}],&quot;transformation_string&quot;:&quot;e_assist_colorblind:30&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1568815086&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pie_chart.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><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:30\/v1568815086\/pie_chart.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:30\/v1568815086\/pie_chart.png\" alt=\"Colorblind assist\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"357.14285714286\"\/><\/a><\/p>\n<\/li>\n<li>\n<p>To replace the red and green colors with prettier ones, append \u2018xray\u2019 to the parameter.\n<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;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:xray\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(\\&quot;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:xray\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&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;pie_chart.png\\&quot; &gt; &lt;Transformation effect=\\&quot;assist_colorblind:xray\\&quot; \\\/&gt; &lt;\\\/Image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;Image publicId=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;Transformation effect=\\&quot;assist_colorblind:xray\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&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;pie_chart.png\\&quot; &gt; &lt;cld-transformation effect=\\&quot;assist_colorblind:xray\\&quot; \\\/&gt; &lt;\\\/cld-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cld-image public-id=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;cld-transformation effect=\\&quot;assist_colorblind:xray\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&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;pie_chart.png\\&quot; &gt; &lt;cl-transformation effect=\\&quot;assist_colorblind:xray\\&quot;&gt; &lt;\\\/cl-transformation&gt; &lt;\\\/cl-image&gt;&quot;,&quot;codeSnippet&quot;:&quot;&lt;cl-image public-id=\\&quot;pie_chart.png\\&quot; &gt;\\n\\t&lt;cl-transformation effect=\\&quot;assist_colorblind:xray\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&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;pie_chart.png&#039;, {effect: \\&quot;assist_colorblind:xray\\&quot;}).toHtml();&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.imageTag(&#039;pie_chart.png&#039;, {effect: \\&quot;assist_colorblind:xray\\&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;pie_chart.png\\&quot;).image(effect=\\&quot;assist_colorblind:xray\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;CloudinaryImage(\\&quot;pie_chart.png\\&quot;).image(effect=\\&quot;assist_colorblind:xray\\&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;pie_chart.png&#039;))\\n\\t-&gt;effect(Effect::assistColorBlind()-&gt;xray())\\n\\t-&gt;version(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;(new ImageTag(&#039;pie_chart.png&#039;))\\n\\t-&gt;effect(Effect::assistColorBlind()-&gt;xray())\\n\\t-&gt;version(1568815086);&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;pie_chart.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;assist_colorblind:xray\\&quot;))&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&quot;, array(\\&quot;effect\\&quot;=&gt;\\&quot;assist_colorblind:xray\\&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;assist_colorblind:xray\\&quot;)).imageTag(\\&quot;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.url().transformation(new Transformation().effect(\\&quot;assist_colorblind:xray\\&quot;)).imageTag(\\&quot;pie_chart.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;pie_chart.png\\&quot;, effect: \\&quot;assist_colorblind:xray\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cl_image_tag(\\&quot;pie_chart.png\\&quot;, effect: \\&quot;assist_colorblind:xray\\&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;assist_colorblind:xray\\&quot;)).BuildImageTag(\\&quot;pie_chart.png\\&quot;)&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.Api.UrlImgUp.Transform(new Transformation().Effect(\\&quot;assist_colorblind:xray\\&quot;)).BuildImageTag(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().xray())\\n\\t.version(1568815086));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().xray())\\n\\t.version(1568815086));&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;assist_colorblind:xray\\&quot;)).generate(\\&quot;pie_chart.png\\&quot;)!, cloudinary: cloudinary)&quot;,&quot;codeSnippet&quot;:&quot;imageView.cldSetImage(cloudinary.createUrl().setTransformation(CLDTransformation().setEffect(\\&quot;assist_colorblind:xray\\&quot;)).generate(\\&quot;pie_chart.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;assist_colorblind:xray\\&quot;)).generate(\\&quot;pie_chart.png\\&quot;);&quot;,&quot;codeSnippet&quot;:&quot;MediaManager.get().url().transformation(new Transformation().effect(\\&quot;assist_colorblind:xray\\&quot;)).generate(\\&quot;pie_chart.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;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().xray())\\n\\t.version(1568815086));&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image(&#039;pie_chart.png&#039;).transformation(Transformation()\\n\\t.effect(Effect.assistColorBlind().xray())\\n\\t.version(1568815086));&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;pie_chart.png\\&quot;)\\n\\t effect(Effect.assistColorBlind() { xray() })\\n\\t version(1568815086) \\n}.generate()&quot;,&quot;codeSnippet&quot;:&quot;cloudinary.image {\\n\\tpublicId(\\&quot;pie_chart.png\\&quot;)\\n\\t effect(Effect.assistColorBlind() { xray() })\\n\\t version(1568815086) \\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;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:xray\\&quot;})&quot;,&quot;codeSnippet&quot;:&quot;$.cloudinary.image(\\&quot;pie_chart.png\\&quot;, {effect: \\&quot;assist_colorblind:xray\\&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;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&quot;,&quot;codeSnippet&quot;:&quot;new CloudinaryImage(\\&quot;pie_chart.png\\&quot;)\\n  .effect(assistColorBlind().xray())\\n  .setVersion(1568815086);&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_assist_colorblind:xray\\\/v1568815086\\\/pie_chart.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;assist_colorblind:xray&quot;}],&quot;transformation_string&quot;:&quot;e_assist_colorblind:xray&quot;,&quot;url_suffix&quot;:&quot;&quot;,&quot;version&quot;:&quot;1568815086&quot;,&quot;secure&quot;:true,&quot;public_id&quot;:&quot;pie_chart.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><a class=\"c-image-link\" href=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:xray\/v1568815086\/pie_chart.png\" target=\"_blank\"><img decoding=\"async\" src=\"https:\/\/res.cloudinary.com\/demo\/image\/upload\/e_assist_colorblind:xray\/v1568815086\/pie_chart.png\" alt=\"xray\" loading=\"lazy\" class=\"c-transformed-asset\"  width=\"500\" height=\"357.14285714286\"\/><\/a><\/p>\n<\/li>\n<\/ul>\n<h3>Let Your Images Speak for Themselves<\/h3>\n<p>Adding an <code>alt<\/code> description for images could be a labor-intensive job because the description must be clear, concise, and readable, especially for delivery to blind users through screen readers. Thanks to the advances in AI algorithms for media recognition and categorization over the last decade, third-party add-ons are now available for automating the generation of keywords at an impressive speed.<\/p>\n<p>Examples include <a href=\"https:\/\/cloudinary.com\/addons#aws_rek_tagging\">Amazon Rekognition Auto Tagging<\/a>, <a href=\"https:\/\/cloudinary.com\/addons#google_tagging\">Google Auto Tagging<\/a>, <a href=\"https:\/\/cloudinary.com\/addons#imagga_tagging\">Imagga Auto Tagging<\/a>, all just a download away on Cloudinary. The process is intuitive\u2014even for thousands of images.<\/p>\n<p><a href=\"https:\/\/codepen.io\/mayashavin\/pen\/GRKLEMR\">Codepen Demo<\/a><\/p>\n<p class=\"codepen\" data-height=\"418\" data-theme-id=\"0\" data-default-tab=\"html,result\" data-user=\"mayashavin\" data-slug-hash=\"GRKLEMR\" style=\"height: 418px;align-items: center;justify-content: center;border: 2px solid;margin: 1em 0;padding: 1em\" data-pen-title=\"GRKLEMR\">\n  <span>See the Pen <a href=\"https:\/\/codepen.io\/mayashavin\/pen\/GRKLEMR\">\n  GRKLEMR<\/a> by Maya Shavin  (<a href=\"https:\/\/codepen.io\/mayashavin\">@mayashavin<\/a>)\n  on <a href=\"https:\/\/codepen.io\">CodePen<\/a>.<\/span>\n<\/p>\n<h3>Enable Dark Or Light Mode<\/h3>\n<p>Dark mode is mandatory for users with light sensitivity, a widespread ailment in the modern age, in which many people are frequently online in front of computer screens.<\/p>\n<p>A straightforward way to enable dark mode is to take advantage of the CSS <code>invert()<\/code> function with the filter property, which converts all the available colors within an app to the exact opposite colors, hence turning on or off dark or light mode. However, that fix is problematic because it applies to all the images, causing their colors to be inverted as well.<\/p>\n<p>A much more superior solution rests with Cloudinary\u2019s <code>e_negate<\/code> effect, which displays all the images in inverted color, retaining their original appearance in either dark or light mode.<\/p>\n<p><a href=\"https:\/\/codesandbox.io\/embed\/vue-accessbility-m16y-demo-dark-mode-forked-tzivv?fontsize=14&amp;module=%2Fsrc%2FApp.vue\"><img decoding=\"async\" src=\"https:\/\/codesandbox.io\/static\/img\/play-codesandbox.svg\" alt=\"Edit vue-accessbility-m16y-demo\/dark-mode\" loading=\"lazy\" class=\"c-transformed-asset\" \/><\/a><\/p>\n<h3>Contrast Your Image and Text Colors<\/h3>\n<p>Contrasting image and text colors keeps the audience engaged. However, hardcoding to achieve that effect complicates matters for long-term maintenance, sometimes even negatively impacting site performance.<\/p>\n<p>Instead of hardcoding, combine CSS with Cloudinary\u2019s transformation effect <code>e_brightness_hsb<\/code> and opacity control. By setting the appropriate percentage of brightness (and opacity) on the target\u2019s background, you can apply the appropriate ratio of contrastivity between the background and the overlaid text. See these two examples:<\/p>\n<p>Happily, replacing the text color requires only minimal tweaks in the codebase. Less code, more efficiency.<\/p>\n<h3>Make Your Videos Readable<\/h3>\n<p>Adding subtitles as an alternative or as a feature for prerecorded videos is <a href=\"https:\/\/www.w3.org\/WAI\/WCAG21\/quickref\/#time-based-media\">required for compliance with accessibility levels A and AA<\/a>. Subtitles in effect benefit everyone since <a href=\"https:\/\/digiday.com\/media\/silent-world-facebook-video\/\">80 percent of videos are viewed with audio off<\/a>.<\/p>\n<p>Cloudinary\u2019s <a href=\"https:\/\/cloudinary.com\/addons#google_speech\">Google AI Video Transcription Add-On<\/a>, automates the process of generating transcripts for your and your audience\u2019s videos. Another plus is that, with the Cloudinary Video Player, you can <a href=\"https:\/\/cloudinary.com\/blog\/with_automatic_video_subtitles_silence_speaks_volumes\">optimize the synchronization between the captions and your video<\/a> according to user interactions.<\/p>\n<h2>Conclusion<\/h2>\n<p>Accessibility is a broad subject, achieving which for media is just a small, albeit significant, part. Even though optimizing your site\u2019s accessibility requires meticulous and painstaking effort, the tips described in this post promise to help you fulfill the essential requirements.<\/p>\n<p>Think users, think site accessibility.<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"","protected":false},"author":41,"featured_media":21958,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_cloudinary_featured_overwrite":false,"footnotes":""},"categories":[1],"tags":[337,165],"class_list":["post-21957","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorized","tag-accessibility","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>Simple Steps to Make Your Site Accessible With Cloudinary<\/title>\n<meta name=\"description\" content=\"Web accessibility is all-important yet challenging to achieve. Learn how Cloudinary\u2019s add-ons simplify and automate the task for you.\" \/>\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\/simple_steps_to_make_your_site_accessible_with_cloudinary\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Simple Steps to Make Your Site Accessible With Cloudinary\" \/>\n<meta property=\"og:description\" content=\"Web accessibility is all-important yet challenging to achieve. Learn how Cloudinary\u2019s add-ons simplify and automate the task for you.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\" \/>\n<meta property=\"og:site_name\" content=\"Cloudinary Blog\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-02T16:40:12+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-06-06T20:16:22+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd-jpg?_i=AA\" \/>\n\t<meta property=\"og:image:width\" content=\"1540\" \/>\n\t<meta property=\"og:image:height\" content=\"847\" \/>\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\/simple_steps_to_make_your_site_accessible_with_cloudinary#article\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\"},\"author\":{\"name\":\"\",\"@id\":\"\"},\"headline\":\"Simple Steps to Make Your Site Accessible With Cloudinary\",\"datePublished\":\"2019-10-02T16:40:12+00:00\",\"dateModified\":\"2024-06-06T20:16:22+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\"},\"wordCount\":9,\"publisher\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA\",\"keywords\":[\"Accessibility\",\"Image Transformation\"],\"inLanguage\":\"en-US\",\"copyrightYear\":\"2019\",\"copyrightHolder\":{\"@id\":\"https:\/\/cloudinary.com\/#organization\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\",\"url\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\",\"name\":\"Simple Steps to Make Your Site Accessible With Cloudinary\",\"isPartOf\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage\"},\"image\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage\"},\"thumbnailUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA\",\"datePublished\":\"2019-10-02T16:40:12+00:00\",\"dateModified\":\"2024-06-06T20:16:22+00:00\",\"description\":\"Web accessibility is all-important yet challenging to achieve. Learn how Cloudinary\u2019s add-ons simplify and automate the task for you.\",\"breadcrumb\":{\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage\",\"url\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA\",\"contentUrl\":\"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA\",\"width\":1540,\"height\":847},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/cloudinary.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Simple Steps to Make Your Site Accessible With Cloudinary\"}]},{\"@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":"Simple Steps to Make Your Site Accessible With Cloudinary","description":"Web accessibility is all-important yet challenging to achieve. Learn how Cloudinary\u2019s add-ons simplify and automate the task for you.","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\/simple_steps_to_make_your_site_accessible_with_cloudinary","og_locale":"en_US","og_type":"article","og_title":"Simple Steps to Make Your Site Accessible With Cloudinary","og_description":"Web accessibility is all-important yet challenging to achieve. Learn how Cloudinary\u2019s add-ons simplify and automate the task for you.","og_url":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary","og_site_name":"Cloudinary Blog","article_published_time":"2019-10-02T16:40:12+00:00","article_modified_time":"2024-06-06T20:16:22+00:00","og_image":[{"width":1540,"height":847,"url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd-jpg?_i=AA","type":"image\/jpeg"}],"twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"NewsArticle","@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#article","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary"},"author":{"name":"","@id":""},"headline":"Simple Steps to Make Your Site Accessible With Cloudinary","datePublished":"2019-10-02T16:40:12+00:00","dateModified":"2024-06-06T20:16:22+00:00","mainEntityOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary"},"wordCount":9,"publisher":{"@id":"https:\/\/cloudinary.com\/blog\/#organization"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA","keywords":["Accessibility","Image Transformation"],"inLanguage":"en-US","copyrightYear":"2019","copyrightHolder":{"@id":"https:\/\/cloudinary.com\/#organization"}},{"@type":"WebPage","@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary","url":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary","name":"Simple Steps to Make Your Site Accessible With Cloudinary","isPartOf":{"@id":"https:\/\/cloudinary.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage"},"image":{"@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage"},"thumbnailUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA","datePublished":"2019-10-02T16:40:12+00:00","dateModified":"2024-06-06T20:16:22+00:00","description":"Web accessibility is all-important yet challenging to achieve. Learn how Cloudinary\u2019s add-ons simplify and automate the task for you.","breadcrumb":{"@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#primaryimage","url":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA","contentUrl":"https:\/\/res.cloudinary.com\/cloudinary-marketing\/images\/f_auto,q_auto\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA","width":1540,"height":847},{"@type":"BreadcrumbList","@id":"https:\/\/cloudinary.com\/blog\/simple_steps_to_make_your_site_accessible_with_cloudinary#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/cloudinary.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Simple Steps to Make Your Site Accessible With Cloudinary"}]},{"@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\/v1649748654\/Web_Assets\/blog\/Accessibility-Simple-Steps_21958a82cd\/Accessibility-Simple-Steps_21958a82cd.jpg?_i=AA","_links":{"self":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21957","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=21957"}],"version-history":[{"count":3,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21957\/revisions"}],"predecessor-version":[{"id":34500,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/posts\/21957\/revisions\/34500"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media\/21958"}],"wp:attachment":[{"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/media?parent=21957"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/categories?post=21957"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudinary.com\/blog\/wp-json\/wp\/v2\/tags?post=21957"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}