{"id":3559,"date":"2019-07-05T00:00:00","date_gmt":"2019-07-05T00:00:00","guid":{"rendered":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email\/"},"modified":"2025-09-03T14:38:56","modified_gmt":"2025-09-03T18:38:56","slug":"how-to-create-an-accessibility-switcher-in-email","status":"publish","type":"post","link":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email","title":{"rendered":"How to Create an Accessibility Switcher\u2122 in Email"},"content":{"rendered":"<div class=\"update\">\n<p><span style=\"font-weight: 400;\"><strong>Editor\u2019s note:<\/strong> This is a guest post from Paul Airy, Email Design and Development Consultant, and author of the book, <em><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/beyondtheenvelope.co.uk\/a-type-of-email.php\">A Type of Email<\/a><\/em>. Paul is a leading advocate of accessibility in email, and creator of the Accessibility Switcher\u2122. You can <a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/twitter.com\/Paul_Airy\">follow Paul on Twitter<\/a>, and catch him at Litmus Live London, where he\u2019ll be speaking about creating an accessible email design system.<\/span><\/p>\n<\/div>\n<p><span style=\"font-weight: 400;\">Throughout my email career, people have been my focus. I\u2019ve always been inspired by the relationship between the sender, the subscriber, and the email\u2014and the &#8220;magic&#8221; that happens when the three connect. I\u2019ve endeavored to challenge myself, and the industry I\u2019m privileged to be part of, to ensure the emails we send to our subscribers, deliver that experience, that &#8220;magic,&#8221; in every campaign.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Delivering that experience starts with the basics\u2014creating emails that are easy to read and easy to interact with. It\u2019s that simple. These are the basics that inspired my work on typography at a time when most emails were image-heavy, and my work on accessibility, at a time when <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/ultimate-guide-accessible-emails\">email accessibility<\/a> was being talked about, but nothing much was being done about it.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">The first thing I did when I began to look at accessibility, was ask myself the question, \u201cWhat\u2019s preventing us as email marketers, designers and developers ensuring our emails <\/span><em><span style=\"font-weight: 400;\">are<\/span><\/em><span style=\"font-weight: 400;\"> accessible?\u201d To help me answer that question, I looked to the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\"><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines (WCAG)<\/span><\/a><span style=\"font-weight: 400;\">, the document that defines the standard for web accessibility, to understand how near or far we are from meeting that standard in the email space.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">What I discovered, was that a large number of the guidelines were either irrelevant, or impossible to implement on email, given that email and webmail clients differ from web browsers in their ability to comply to those guidelines. In addition, most of the accessibility guidelines were written in a web-centric manner, and were therefore tricky to interpret for email. I was convinced that it was this impossibility, this inability to implement accessibility in email, to the standards set out in the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\"><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines (WCAG)<\/span><\/a><span style=\"font-weight: 400;\">, that had prevented us doing so thus far.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">This led me to ask myself the question, \u201cWhat if we could implement <\/span><em><span style=\"font-weight: 400;\">a type<\/span><\/em><span style=\"font-weight: 400;\"> of accessibility in email?\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">I realized that there were a number of principles from the <\/span><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/www.w3.org\/TR\/WCAG20\/\"><span style=\"font-weight: 400;\">Web Content Accessibility Guidelines (WCAG)<\/span><\/a><span style=\"font-weight: 400;\">, and some recommendations, that <\/span><em><span style=\"font-weight: 400;\">could <\/span><\/em><span style=\"font-weight: 400;\">be implemented on email. These takeaways found their way into my session on typography and accessibility, \u201c<\/span><i><span style=\"font-weight: 400;\">A <\/span><\/i><em><span style=\"font-weight: 400;\">type<\/span><\/em><span style=\"font-weight: 400;\"> of accessibility,\u201d at The Email Design Conference in 2015, which would later form the foundation of the Beyond the Envelope\u2122 Email Design System, which I\u2019ll be talking about at <\/span><a rel=\"noopener\" href=\"https:\/\/litmus.com\/conference\"><span style=\"font-weight: 400;\">Litmus Live London in August<\/span><\/a><span style=\"font-weight: 400;\">.<\/span><\/p>\n<div class=\"cta\">\n<table>\n<tbody>\n<tr>\n<td class=\"block-1\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/accesible-email-icon.png\" alt=\"\" \/><\/td>\n<td class=\"block-2\">\n<h2>Is your email accessible?<\/h2>\n<p>Accessibility checks in Litmus Checklist make it easy to test your email against key accessibility best practices, identify areas for improvement, and make your emails more accessible to all your subscribers.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/litmus.com\/blog\/accessible-email-made-easy-introducing-accessibility-checks-in-litmus\" target=\"_blank\" rel=\"noopener noreferrer\">Learn more \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h2><span style=\"font-weight: 400;\">Why accessibility is important<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">So why is accessibility important? Well, it\u2019s quite simple:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The more accessible our emails are, the more people we can reach<\/span><\/li>\n<li style=\"font-weight: 400;\"><span style=\"font-weight: 400;\">The more people we can reach, the better positioned we are to connect as brands and organizations<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">The question you need to ask yourself is, \u201cDo you want to make it harder, or easier, for people to engage with your brand or organization?\u201d<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When we design and develop emails, we tend to assume our subscribers will be able to read\u00a0 and interact with them, based on whether <\/span><em><span style=\"font-weight: 400;\">we <\/span><\/em><span style=\"font-weight: 400;\">can read and interact with them. We judge the quality of other people\u2019s experience based on our own. The truth is that every person, and the way they experience the world, is different.<\/span><\/p>\n<div class=\"copywriting-quote\">\n<blockquote class=\"rectangle-quote\"><p><strong>Every single person, and the way they experience the world, is different.<\/strong><\/p><\/blockquote>\n<p><a rel=\"noopener\" target=\"_blank\" href=\"https:\/\/ctt.ec\/ib1zc\">Tweet this \u2192<\/a><\/p>\n<\/div>\n<h2><span style=\"font-weight: 400;\">Designing for difference<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">But how do we go about designing and developing emails to suit each and every difference, in each and every individual? Surely that\u2019s impossible! The truth is, it <\/span><em><span style=\"font-weight: 400;\">is<\/span><\/em><span style=\"font-weight: 400;\"> impossible, so we have to decide on a first step that\u2019s as inclusive as possible.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">As an industry, we\u2019ve already begun to establish that first step. We use semantic elements, such as heading and paragraph tags, to describe the content within our emails, so subscribers using assistive technologies like screen readers can distinguish one type of content from another. We define a minimum font-size of 16px, so more subscribers can read the text. We select foreground and background colors that contrast enough to ensure text is clear and readable.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">But the first step is just that. What\u2019s the next step for accessibility in email? How can we create emails that are easy to read and easy to interact with, for more people? How can we make sure we&#8217;re <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-5-tips-for-writing-email-copy-for-everyone\">writing with accessible language<\/a>? I felt that the next step was about giving subscribers the autonomy to configure their own experience, and given that email is primarily a text medium, that this autonomy should center around typography, text size and contrast in particular.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Although there are built-in solutions in most operating systems to adjust the text size and contrast, most don\u2019t work well inside the Inbox. Apple\u2019s iOS allows users to increase the font size system-wide, but results in emails like this one from Spotify (who create some great emails by the way!):<\/span><\/p>\n<figure id=\"post-23519 media-23519\" class=\"alignnone nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/2_image1-1.png\" alt=\"\" \/><\/figure>\n<p><span style=\"font-weight: 400;\">Operating systems and browsers that allow zoom levels, using the + and &#8211; keys, exhibit similar inconsistent behavior. So, if these built-in settings aren\u2019t delivering the experience our subscribers need, how about building them into the emails themselves?<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Enter the Accessibility Switcher\u2122 Solution<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Using <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/interactive-emails-top-trend-anyone-using\/\"><span data-sheets-value=\"{&quot;1&quot;:2,&quot;2&quot;:&quot;interactive email&quot;}\" data-sheets-userformat=\"{&quot;2&quot;:4801,&quot;3&quot;:{&quot;1&quot;:0},&quot;9&quot;:1,&quot;10&quot;:1,&quot;12&quot;:0,&quot;15&quot;:&quot;Roboto&quot;}\">interactive email<\/span><\/a> techniques, I created the Accessibility Switcher\u2122, which made its first appearance in the fourth edition of my email, <\/span><a rel=\"noopener\" target=\"_blank\" href=\"http:\/\/beyondtheenvelope.co.uk\/type-e.php\"><span style=\"font-weight: 400;\">Type E<\/span><\/a><span style=\"font-weight: 400;\">. It included a button for enlarging the text size, a button for reducing the text size, and a button for reversing the color of the email to create more contrast.<\/span><\/p>\n<figure id=\"post-23519 media-23519\" class=\"alignnone nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/accessibilityswitcherguestpost.png\" alt=\"\" \/><figcaption>The Accessibility Switcher\u2122, as featured in <a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/52d1e5a\">Type E: 04. The Accessibility Issue.<\/a><\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">I continued evolving the Accessibility Switcher\u2122, adding a series of buttons to change the foreground and background colors of the email\u2014to create a digital version of the translucent colored sheets used by people suffering from Dyslexia and Alzheimer\u2019s, to aid their reading.<\/span><\/p>\n<figure id=\"post-23519 media-23519\" class=\"alignnone nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/3_image4.png\" alt=\"\" \/><figcaption>The Accessibility Switcher\u2122, as featured in Type E: 07. The Mobile Issue.<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">Since then, the concept has evolved further still, replacing the two buttons that enlarged and reduced the text with a single button.<\/span><\/p>\n<figure id=\"post-23519 media-23519\" class=\"alignnone nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/5_image3.png\" alt=\"\" \/><figcaption>The Accessibility Switcher\u2122, as featured in <a rel=\"noopener\" href=\"https:\/\/litmus.com\/builder\/d90d5ea\">Type E: 08. The Image Issue.<\/a><\/figcaption><\/figure>\n<h2><span style=\"font-weight: 400;\">A matter of preference<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">I\u2019ve always felt the Accessibility Switcher\u2122 should be an option, rather than a standard feature. So, when someone subscribes to Type E: today, they have to opt-in to have the Accessibility Switcher\u2122 appear on their emails. Subscribers can choose to configure it to either allow them to enlarge and reduce the text size, change the foreground and background colors, or both.<\/span><\/p>\n<figure id=\"post-23519 media-23519\" class=\"alignnone nudged\"><img decoding=\"async\" class=\" shaded\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/3_image5.png\" alt=\"\" \/><figcaption>The preference center, allowing subscribers to choose whether to have The Accessibility Switcher\u2122 appear on their emails.<\/figcaption><\/figure>\n<p><span style=\"font-weight: 400;\">It\u2019s an excellent solution for progressively enhancing that accessible first step, one that subscribers can utilize to configure an email campaign to their own needs and preferences. So, how\u2019s it actually built?<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">How the Accessibility Switcher\u2122 is coded<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">The Accessibility Switcher\u2122 employs the use of interactive email techniques, in order for it to function.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Behind the button that enlarges and reduces the text lies a checkbox, which is set to &#8220;checked&#8221; by default, and behind each button that changes the foreground and background, lies a series of radio buttons.<\/span><\/p>\n<p>Here&#8217;s an excerpt from the HTML for the Accessibility Switcher<span style=\"font-weight: 400;\">\u2122 buttons, placed between the &lt;body&gt; tag and the wrapper of the email:<\/span><\/p>\n<pre><code style=\"color: #fff; background: #333;\">\n&lt;body&gt;\n\n&lt;!-- Default Button --&gt;\n        &lt;input type=\"radio\" class=\"default\" id=\"default\" name=\"layout\" style=\"position:absolute; display:none !important; visibility:hidden !important;\" checked&gt;\n        &lt;label class=\"default\" for=\"default\"&gt;&lt;\/label&gt;\n&lt;!-- Default Button End --&gt;\n\n&lt;!-- Large\/Small Layout --&gt;\n        &lt;input type=\"checkbox\" class=\"large-small-layout\" id=\"large-small-layout\" name=\"layout\" style=\"position:absolute; display:none !important; visibility:hidden !important;\"&gt;\n        &lt;label class=\"layout-buttons settings-box-element\" for=\"large-small-layout\"&gt;&lt;\/label&gt;\n&lt;!-- Large\/Small Layout End --&gt;\n\n&lt;!-- Yellow Tint Layout --&gt;\n        &lt;input type=\"radio\" class=\"yellow-tint-layout\" id=\"yellow-tint-layout\" name=\"layout\" style=\"position:absolute; display:none !important; visibility:hidden !important;\"&gt;\n        &lt;label class=\"layout-buttons settings-box-element\" for=\"yellow-tint-layout\"&gt;&lt;\/label&gt;\n&lt;!-- Yellow Tint Layout End --&gt;\n\n&lt;div class=\"mainWrapper\"&gt;\n\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">CSS is placed in the &lt;head&gt; of the email to target, and style each input, allowing you to customize it for your own purposes.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">It\u2019s important to note that the Accessibility Switcher\u2122 is hidden by default. Some email clients don\u2019t support interactive elements, so it won\u2019t be displayed, and the email will just display using the default, inline styles.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">When displayed and checked, though, styling is applied to the elements with the relevant class name, overriding the default, inline styling of that element. In this case, those styles override things like font-size, line-height, background-color, and color.<\/span><\/p>\n<p>Here&#8217;s the CSS for the &#8220;Large\/Small&#8221; button, which changes the font-size to 20px when checked:<\/p>\n<pre><code style=\"color: #fff; background: #333;\">\n.large-small-layout:checked ~ .mainWrapper p {font-size:20px !important; line-height:30px !important;}\n\n<\/code><\/pre>\n<p><span style=\"font-weight: 400;\">It\u2019s a relatively easy solution for a surprisingly complex problem. Although it doesn\u2019t, and shouldn\u2019t replace the first step for accessibility I mentioned earlier, it does provide an excellent progressive enhancement that allows subscribers to configure their own experience.<\/span><\/p>\n<div class=\"update\">\n<p><strong>See how Litmus implemented the Accessibility Switcher in our recent newsletter <\/strong><br \/>\nTo seamlessly integrate the Accessibility Switcher\u2122 into Litmus\u2019 newsletter design, we adapted Paul\u2019s original technique a bit here and there. <a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/8139-how-we-adapted-paul-airy-s-accessibility-switcher-for-litmus-newsletter\">Here&#8217;s<\/a> a detailed walk-through of what we were trying to achieve and how we brought the Accessibility Switcher\u2122 to live in our newsletter.<br \/>\n<a rel=\"noopener\" href=\"https:\/\/litmus.com\/community\/discussions\/8139-how-we-adapted-paul-airy-s-accessibility-switcher-for-litmus-newsletter\">Check it out on Community \u2192 <\/a><\/p>\n<\/div>\n<h2><span style=\"font-weight: 400;\">Accessibility is a journey<\/span><\/h2>\n<p><span style=\"font-weight: 400;\">When it comes to accessibility, we\u2019re all on a journey. We\u2019re continuing to learn about how subscribers read and interact with their emails, and how we can make it easier for them to do so. With more articles than ever written about <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/email-accessibility-for-designers-8-best-practices-you-should-follow\">accessibility design<\/a> in email, <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/7-simple-tricks-to-make-your-email-code-more-accessible\">coding for accessibility<\/a>, and email designers talking about it on stage, there\u2019s little excuse for designing, developing and sending inaccessible email campaigns today.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">If you haven\u2019t already, audit your own emails, use an <a rel=\"noopener\" href=\"https:\/\/www.litmus.com\/blog\/accessible-email-made-easy-introducing-accessibility-checks-in-litmus\">email accessibility checker,<\/a> and see how you can improve the accessibility in your own campaigns. Whether you increase the font size in your master email template, or implement the Accessibility Switcher\u2122, your subscribers will thank you.<\/span><\/p>\n<div class=\"cta\">\n<table>\n<tbody>\n<tr>\n<td class=\"block-1\"><img decoding=\"async\" src=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/element-1-1.png\" alt=\"\" \/><\/td>\n<td class=\"block-2\">\n<h2>Ultimate Guide to Email Accessibility<\/h2>\n<p>This guide has the insights and step-by-step advice you need to write, design, and code emails that can be enjoyed by anyone\u2014regardless of their ability.<\/p>\n<p class=\"zero\"><a class=\"btn medium orange button\" rel=\"noopener\" href=\"https:\/\/litmus.com\/ebooks\/ultimate-guide-to-email-accessibility\" target=\"_blank\" rel=\"noopener noreferrer\">Download the ebook \u2192<\/a><\/p>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>How can we create emails that are easy to read for everyone? An important step is giving subscribers the autonomy to configure their own inbox experience to their needs.<br \/>\nThere are built-in solutions in most operating systems to adjust the text size and contrast, but most don\u2019t work well inside the inbox. So as email marketers, we have to take the matter into our own hands.<br \/>\nEmail developer Paul Airy shares how an Accessibility Switcher\u2122 lets your subscribers increase the font size or change the color contrast of your email, making it more accessible to a wider audience.<\/p>\n","protected":false},"author":3,"featured_media":3560,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[520],"blog_category":[295,53],"class_list":["post-3559","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-email-accessibility","blog_category-guest-blog","blog_category-tips-resources"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.5 (Yoast SEO v27.7) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>How to Create an Accessibility Switcher\u2122 in Email - Litmus<\/title>\n<meta name=\"description\" content=\"How can we create emails that are easy to read for everyone? An important step is giving subscribers the autonomy to configure their own inbox experience to their needs. There are built-in solutions in most operating systems to adjust the text size and contrast, but most don\u2019t work well inside the inbox. So as email marketers, we have to take the matter into our own hands. Email developer Paul Airy shares how an Accessibility Switcher\u2122 lets your subscribers increase the font size or change the color contrast of your email, making it more accessible to a wider audience.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create an Accessibility Switcher\u2122 in Email\" \/>\n<meta property=\"og:description\" content=\"How can we create emails that are easy to read for everyone? An important step is giving subscribers the autonomy to configure their own inbox experience to their needs. There are built-in solutions in most operating systems to adjust the text size and contrast, but most don\u2019t work well inside the inbox. So as email marketers, we have to take the matter into our own hands. Email developer Paul Airy shares how an Accessibility Switcher\u2122 lets your subscribers increase the font size or change the color contrast of your email, making it more accessible to a wider audience.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email\" \/>\n<meta property=\"og:site_name\" content=\"Litmus\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/litmusapp\" \/>\n<meta property=\"article:published_time\" content=\"2019-07-05T00:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-09-03T18:38:56+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/switcher.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1421\" \/>\n\t<meta property=\"og:image:height\" content=\"764\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@litmusapp\" \/>\n<meta name=\"twitter:site\" content=\"@litmusapp\" \/>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create an Accessibility Switcher\u2122 in Email - Litmus","description":"How can we create emails that are easy to read for everyone? An important step is giving subscribers the autonomy to configure their own inbox experience to their needs. There are built-in solutions in most operating systems to adjust the text size and contrast, but most don\u2019t work well inside the inbox. So as email marketers, we have to take the matter into our own hands. Email developer Paul Airy shares how an Accessibility Switcher\u2122 lets your subscribers increase the font size or change the color contrast of your email, making it more accessible to a wider audience.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email","og_locale":"en_US","og_type":"article","og_title":"How to Create an Accessibility Switcher\u2122 in Email","og_description":"How can we create emails that are easy to read for everyone? An important step is giving subscribers the autonomy to configure their own inbox experience to their needs. There are built-in solutions in most operating systems to adjust the text size and contrast, but most don\u2019t work well inside the inbox. So as email marketers, we have to take the matter into our own hands. Email developer Paul Airy shares how an Accessibility Switcher\u2122 lets your subscribers increase the font size or change the color contrast of your email, making it more accessible to a wider audience.","og_url":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email","og_site_name":"Litmus","article_publisher":"https:\/\/www.facebook.com\/litmusapp","article_published_time":"2019-07-05T00:00:00+00:00","article_modified_time":"2025-09-03T18:38:56+00:00","og_image":[{"width":1421,"height":764,"url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/switcher.png","type":"image\/png"}],"twitter_card":"summary_large_image","twitter_creator":"@litmusapp","twitter_site":"@litmusapp","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#article","isPartOf":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email"},"author":{"name":"","@id":""},"headline":"How to Create an Accessibility Switcher\u2122 in Email","datePublished":"2019-07-05T00:00:00+00:00","dateModified":"2025-09-03T18:38:56+00:00","mainEntityOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email"},"wordCount":1673,"commentCount":0,"publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/switcher.png","keywords":["Email Accessibility"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email","url":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email","name":"How to Create an Accessibility Switcher\u2122 in Email - Litmus","isPartOf":{"@id":"https:\/\/www.litmus.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#primaryimage"},"image":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#primaryimage"},"thumbnailUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/switcher.png","datePublished":"2019-07-05T00:00:00+00:00","dateModified":"2025-09-03T18:38:56+00:00","description":"How can we create emails that are easy to read for everyone? An important step is giving subscribers the autonomy to configure their own inbox experience to their needs. There are built-in solutions in most operating systems to adjust the text size and contrast, but most don\u2019t work well inside the inbox. So as email marketers, we have to take the matter into our own hands. Email developer Paul Airy shares how an Accessibility Switcher\u2122 lets your subscribers increase the font size or change the color contrast of your email, making it more accessible to a wider audience.","breadcrumb":{"@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#primaryimage","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/switcher.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/switcher.png","width":1421,"height":764},{"@type":"BreadcrumbList","@id":"https:\/\/www.litmus.com\/blog\/how-to-create-an-accessibility-switcher-in-email#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.litmus.com\/"},{"@type":"ListItem","position":2,"name":"How to Create an Accessibility Switcher\u2122 in Email"}]},{"@type":"WebSite","@id":"https:\/\/www.litmus.com\/#website","url":"https:\/\/www.litmus.com\/","name":"Litmus","description":"Are you getting the most out of your email marketing?","publisher":{"@id":"https:\/\/www.litmus.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.litmus.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.litmus.com\/#organization","name":"Litmus Software","url":"https:\/\/www.litmus.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","contentUrl":"https:\/\/www.litmus.com\/wp-content\/uploads\/2025\/04\/featured-image.png","width":600,"height":314,"caption":"Litmus Software"},"image":{"@id":"https:\/\/www.litmus.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/litmusapp","https:\/\/x.com\/litmusapp"]},{"@type":"Person","@id":""}]}},"acf":[],"_links":{"self":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3559","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/comments?post=3559"}],"version-history":[{"count":7,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3559\/revisions"}],"predecessor-version":[{"id":119755,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/posts\/3559\/revisions\/119755"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media\/3560"}],"wp:attachment":[{"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/media?parent=3559"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/tags?post=3559"},{"taxonomy":"blog_category","embeddable":true,"href":"https:\/\/www.litmus.com\/wp-json\/wp\/v2\/blog_category?post=3559"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}