<?xml version="1.0" encoding="UTF-8"?><feed
	xmlns="http://www.w3.org/2005/Atom"
	xmlns:thr="http://purl.org/syndication/thread/1.0"
	xml:lang="en-US"
	>
	<title type="text">Andy Baio | The Verge</title>
	<subtitle type="text">The Verge is about technology and how it makes us feel. Founded in 2011, we offer our audience everything from breaking news to reviews to award-winning features and investigations, on our site, in video, and in podcasts.</subtitle>

	<updated>2025-06-12T20:17:39+00:00</updated>

	<link rel="alternate" type="text/html" href="https://www.theverge.com/author/andy-baio" />
	<id>https://www.theverge.com/authors/andy-baio/rss</id>
	<link rel="self" type="application/atom+xml" href="https://www.theverge.com/authors/andy-baio/rss" />

	<icon>https://platform.theverge.com/wp-content/uploads/sites/2/2025/01/verge-rss-large_80b47e.png?w=150&amp;h=150&amp;crop=1</icon>
		<entry>
			
			<author>
				<name>Andy Baio</name>
			</author>
			
			<title type="html"><![CDATA[Chasing rainbows]]></title>
			<link rel="alternate" type="text/html" href="https://www.theverge.com/23650428/colorblindness-design-ui-accessibility-wordle" />
			<id>https://www.theverge.com/23650428/colorblindness-design-ui-accessibility-wordle</id>
			<updated>2025-06-12T16:17:39-04:00</updated>
			<published>2025-06-12T16:08:37-04:00</published>
			<category scheme="https://www.theverge.com" term="Design" /><category scheme="https://www.theverge.com" term="Tech" /><category scheme="https://www.theverge.com" term="Web" />
							<summary type="html"><![CDATA[Living with colorblindness feels like you’re constantly being pranked by the world in subtle, irritating ways. The other day, I was booking a flight on Kayak, trying to figure out which dates are the cheapest by looking at their low fare calendar. See any issues? Oh, sorry — that’s what it looks like to me. [&#8230;]]]></summary>
			
							<content type="html">
											<![CDATA[

						
<figure>

<img alt="" data-caption="" data-portal-copyright="Mengxin Li / The Verge" data-has-syndication-rights="1" src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24539835/P10_Colorblind_Leading_the_Blind_236587.jpg?quality=90&#038;strip=all&#038;crop=0,0,100,100" />
	<figcaption>
		</figcaption>
</figure>
<p>Living with colorblindness feels like you’re constantly being pranked by the world in subtle, irritating ways.</p>

<p>The other day, I was booking a flight on Kayak, trying to figure out which dates are the cheapest by looking at their low fare calendar. See any issues?</p>
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24569429/kayak_output3.png?quality=90&#038;strip=all&#038;crop=0,0,100,100" alt="Kayak calendar fares, with low/middle/high fares highlighted in different colors. The screenshot has been processed to simulate deuteranopia, also known as red-green colorblindness." title="Kayak calendar fares, with low/middle/high fares highlighted in different colors. The screenshot has been processed to simulate deuteranopia, also known as red-green colorblindness." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
<p>Oh, sorry — that’s what it looks like to me. You probably see it more like this.</p>
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564012/kayak_normal__1_.png?quality=90&#038;strip=all&#038;crop=0,0,100,100" alt="Kayak calendar view for May and June of 2023, with lower fares highlighted in green, middle and higher fares highlighted in orange and red. " title="Kayak calendar view for May and June of 2023, with lower fares highlighted in green, middle and higher fares highlighted in orange and red. " data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
<p>I opened up Chrome Dev Tools, changed the cheap fare colors to something I could actually see, and eventually booked my flight. A few weeks later, I’m off to the airport. Conveniently, the parking structure added colored lights to help find empty parking spots. Or so they say? They all look the same to me.</p>

<div class="c-image-compare alignnone wp-block-vox-media-image-compare">
	<div class="c-image-compare__images">
		
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564032/DSC_0076.JPG?quality=90&#038;strip=all&#038;crop=0,27.777777777778,100,44.444444444444" alt="Airport parking garage. Red and green lights indicate occupied or vacant spaces ahead." title="Airport parking garage. Red and green lights indicate occupied or vacant spaces ahead." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />

<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24569530/airport_output3.png?quality=90&#038;strip=all&#038;crop=0,27.777777777778,100,44.444444444444" alt="Airport parking garage. Red and green lights indicate occupied or vacant spaces ahead. Image has been processed to simulate red-green colorblindness, so it is difficult to differentiate between the lights." title="Airport parking garage. Red and green lights indicate occupied or vacant spaces ahead. Image has been processed to simulate red-green colorblindness, so it is difficult to differentiate between the lights." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
	</div>
	<div class="c-image-compare__caption">
		<em>Airport parking garage at PDX. Move slider to the left to see what Andy Baio sees. </em>	</div>
</div>

<p>It took me a little longer, but I found a parking spot. Waiting at the gate, maybe I’ll kill some time on my phone. But why is this photo of an ordinary chili pepper at the top of Reddit? Or this leaf? Oh, right.</p>

<div class="c-image-compare alignnone wp-block-vox-media-image-compare">
	<div class="c-image-compare__images">
		
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564051/pepper_normal_copy.jpg?quality=90&#038;strip=all&#038;crop=0,16.666666666667,100,66.666666666667" alt="Bichromatic chili pepper in mottled red and green." title="Bichromatic chili pepper in mottled red and green." data-has-syndication-rights="1" data-caption="" data-portal-copyright="&lt;a href=&quot;https://www.reddit.com/r/mildlyinteresting/comments/92oumj/the_way_this_chile_ripened/&quot;&gt;u/iesvy on Reddit&lt;/a&gt;" />

<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564045/pepper_colorblind.png?quality=90&#038;strip=all&#038;crop=0,16.666666666667,100,66.666666666667" alt="A chili pepper that appears nearly uniformly green." title="A chili pepper that appears nearly uniformly green." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
	</div>
	<div class="c-image-compare__caption">
		<em>Move slider to the left to see what Andy Baio sees.</em>	</div>
</div>

<div class="c-image-compare alignnone wp-block-vox-media-image-compare">
	<div class="c-image-compare__images">
		
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564042/leaf_normal.jpg?quality=90&#038;strip=all&#038;crop=0,25,100,50" alt="A leaf that is half green and half red." title="A leaf that is half green and half red." data-has-syndication-rights="1" data-caption="" data-portal-copyright="&lt;a href=&quot;https://www.reddit.com/r/mildlyinteresting/comments/8x1iet/a_halfred_halfgreen_leaf/&quot;&gt;u/MatthiasKK on Reddit&lt;/a&gt;" />

<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564040/leaf_colorblind.png?quality=90&#038;strip=all&#038;crop=0,25.023474178404,100,49.953051643192" alt="A leaf. The image has been processed to simulate red-green colorblindness, and appears uniformly green-brown." title="A leaf. The image has been processed to simulate red-green colorblindness, and appears uniformly green-brown." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
	</div>
</div>

<p>For some people, colorblindness is a serious liability that closes doors on career dreams. It’s hard to become a pilot, train conductor, or pathologist if you can’t differentiate colors in critical instruments, signals, or tissue samples. For others, it seriously impacts their day-to-day ability to do their jobs, like surveyors spotting flags, doctors looking at skin conditions, or electricians looking for colored wires.</p>

<p>But for me, it’s just a lifelong series of unnecessarily confusing interactions, demonstrating that the world wasn’t designed for people like me.</p>

<hr class="wp-block-separator has-css-opacity" />

<p>There are an estimated 350 million colorblind people in the world. About 8 percent of men, roughly 1 in 12, have some form of color vision deficiency. (It’s hereditary, so figures will vary from region to region.) My mom’s color vision is even worse than mine, which is very unusual: only about 0.5 percent of women globally are colorblind, about 1 in 200.</p>

<p>I’ve had a lot of conversations about my colorblindness with people who aren’t colorblind. (Pro tip: when you meet a colorblind person, don’t repeatedly point to things and ask what color they are.) It seems like the very idea of colorblindness is hard for them to visualize.&nbsp;</p>

<p>Despite what many think, I can see most colors! My world isn’t a black-and-white movie. Achromatopsia, or total colorblindness, is much more rare, affecting about 1 in 30,000 people. (Unless you were born on the Pingelap atoll in the South Pacific, where 10 percent of the population have <a href="https://education.nationalgeographic.org/resource/island-colorblind-paradise-has-different-hue">inherited the gene</a>.)&nbsp;</p>

<p>Ninety-nine percent of colorblind people, like me, have a form of red-green colorblindness. I was born with the most common type, deuteranopia, a genetic mutation that affects the ability of the green-sensitive cones in my eyes to absorb light.</p>

<p>As a result, some hues of green and red look like each other, converging on a muddy brown. Other colors, like shades of purple and blue, bright orange and green, or even pink and gray, can look very similar. People with other kinds of colorblindness will confuse different colors.</p>

<p>For example, at a glance, barring other context clues like texture and toppings, avocado toast and peanut butter toast look pretty much the same to me.</p>

<div class="c-image-compare alignnone wp-block-vox-media-image-compare">
	<div class="c-image-compare__images">
		
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564061/toast_normal.jpg?quality=90&#038;strip=all&#038;crop=10.625,0,78.75,100" alt="Avocado toast next to toast smeared with chunky peanut butter." title="Avocado toast next to toast smeared with chunky peanut butter." data-has-syndication-rights="1" data-caption="" data-portal-copyright="Image by &lt;em&gt;PopSugar&lt;/em&gt;" />

<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564059/toast_colorblind.png?quality=90&#038;strip=all&#038;crop=11.048689138577,0,77.902621722846,100" alt="Avocado toast next to toast smeared with chunky peanut butter. The image has been processed to simulate red-green colorblindness, so both toasts are a similar shade of green." title="Avocado toast next to toast smeared with chunky peanut butter. The image has been processed to simulate red-green colorblindness, so both toasts are a similar shade of green." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
	</div>
	<div class="c-image-compare__caption">
		<em>Move slider to the left to see what Andy Baio sees.</em>	</div>
</div>

<p>Apparently, this is nauseating to people? That’s my life.</p>

<p>Because red and green are complementary colors opposite one another on the color wheel, they’ve become the default colors for every designer who wants to represent opposites: true and false, high and low, stop and go.</p>

<p>Inconveniently, these are also the two colors most likely to be mixed up by people with color vision deficiencies.</p>

<p>I wish every designer in the world understood this and would switch to, say, red and blue for opposing colors. But I know that won’t happen: the cultural meaning is too ingrained.</p>

<hr class="wp-block-separator has-css-opacity" />

<p>I’m constantly asked if I’ve tried EnChroma glasses, the corrective glasses made famous in a <a href="https://www.youtube.com/watch?v=qRerkhaY53k">series of viral videos</a> in which colorblind people try them on and spontaneously start sobbing at the wonder of seeing grass for the first time.</p>

<p>Despite the hype, their corrective lenses don’t actually <em>fix</em> colorblindness. They <em>correct</em> for it by increasing the contrast and saturation of colors, shifting the color palette into something visible, but they can’t help you see colors you’re physically incapable of seeing. As a result, the reviews are wildly uneven, with some people loving them but many people reporting they do little but darken or tint their vision.</p>

<p>And for me, they’re not an option at all. EnChroma offers colorblind glasses with prescription lenses, but my prescription is so strong I can’t use them.</p>

<p>Besides, why do colorblind people have to purchase expensive glasses in order to <em>function in the world</em> when designers could make very minor changes that make a huge difference for a whole lot of people?&nbsp;</p>

<p>That’s the most frustrating thing about these accessibility issues —&nbsp;they’re very much avoidable!&nbsp;</p>

<p>In design, both in the digital and physical worlds, color should never be the sole indicator of meaning. A simple test: if your work was converted to grayscale, would it still be usable?&nbsp;</p>

<p>At the very least, use a tool like ColorBrewer to find a colorblind-safe palette so you don’t end up accidentally designing a <a href="https://en.wikipedia.org/wiki/List_of_U.S._states_and_territories_by_intentional_homicide_rate#/media/File:Homicide_rate_by_county.webp">map like this</a>, which looks to me like the American Midwest is in the middle of the Purge.</p>

<div class="c-image-compare alignnone wp-block-vox-media-image-compare">
	<div class="c-image-compare__images">
		
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564192/map_normal.png?quality=90&#038;strip=all&#038;crop=0.27343749999999,0,99.453125,100" alt="A color-coded map of the United States depicting homicide rates by county. The red counties have a higher annual rate of homicides per capita." title="A color-coded map of the United States depicting homicide rates by county. The red counties have a higher annual rate of homicides per capita." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />

<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24569430/map_output3.png?quality=90&#038;strip=all&#038;crop=0.31250000000001,0,99.375,100" alt="A color-coded map of the United States depicting homicide rates by county. The image has been processed to simulate red-green colorblindness, rendering the image in confusing shades of khaki." title="A color-coded map of the United States depicting homicide rates by county. The image has been processed to simulate red-green colorblindness, rendering the image in confusing shades of khaki." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
	</div>
	<div class="c-image-compare__caption">
		<em>Move slider to the left to see what Andy Baio sees.</em>	</div>
</div>

<p>There’s no shortage of colorblindness simulators out there, both free and commercial. They even come built into Google Chrome, Photoshop, Illustrator, and so on. But in my experience, none of them represent my vision exactly. (<a href="https://daltonlens.org/colorblindness-simulator">DaltonLens</a> is the closest.)&nbsp;</p>

<p>These simulators are useful tools, but to rely solely on them is a one-dimensional approach to accessibility. If there’s any uncertainty, adding labels, icons, or textures to each meaningful color of your design will make it accessible to many more people, regardless of their ability to perceive color.</p>

<hr class="wp-block-separator has-css-opacity" />

<p>The last time I wrote about my colorblindness was <a href="https://waxy.org/2011/01/colorblind_leading_the_blind/">12 years ago</a>. The good news is that things are getting better. More and more, I’m seeing apps and games add colorblind modes or shift their palettes to be more friendly to the colorblind.</p>

<p>When <em>Among Us</em> launched in 2018, it was incredibly difficult for the colorblind to play. Every character model looks the same, distinguished only by color. Players would use the colors to identify other players in the voice chat. “Green is sus,” someone might say —&nbsp;<em>but which one is green?</em>&nbsp;</p>

<figure class="wp-block-pullquote alignleft"><blockquote><p>“Green is sus,” someone might say —&nbsp;<em>but which one is green?</em></p></blockquote></figure>

<p>Plus, the game’s wiring tasks, in which players have to reconnect wires of the same color to their corresponding terminals, required normal color vision to finish. For me, it was just trial and error. I felt excluded from the moment I started playing.</p>

<p>It took years of complaints before the developers added symbols to the colored wires in late 2020. An update in June 2022 finally offered the option to display color names on characters.</p>

<div class="duet--article--image-comparison custom-slider-container relative my-40 disabled">
	<div class="relative inline-block overflow-hidden slider-mouse-detector bg-white">
		<div class="absolute top-2/4 z-20 h-[50px] w-[9px] cursor-move rounded-lg bg-white custom-divider"></div>
		<div class="absolute top-image">
			<div class="relative">
				<span>
					<span class="image-container"><img alt="" class="custom-slider-image" src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/24564205/cb_01.png" data-number="1"></span>
				</span>
			</div>
		</div>
		<div class="cursor-move relative w-[calc(100vw-2rem)] md:w-article-body">
			<span>
				<span class="image-container"><img alt="" class="custom-slider-image" src="https://cdn.vox-cdn.com/uploads/chorus_asset/file/24564226/cb_02.png" data-number="2"></span></span>
			</span>
		</div>
	</div>
	<div class="custom-slider-text">
		<div class="duet--media--caption pt-6 font-polysans-mono text-12 font-light leading-130 tracking-1">
			<span class="label text-blurple">Left: </span>
			
			    Normal Vision
				Protanomaly
				Deuteranomaly
				Tritanomaly
				Achromatomaly
				Protanopia
				Deuteranopia
				Tritanopia
				Achromatopsia
		  	
	  	</div>
	  	<div class="duet--media--caption pt-6 font-polysans-mono text-12 font-light leading-130 tracking-1">
			<span class="label text-blurple">Right: </span>
			
			    Normal Vision
				Protanomaly
				Deuteranomaly
				Tritanomaly
				Achromatomaly
				Protanopia
				Deuteranopia
				Tritanopia
				Achromatopsia
		  	
	  	</div>
  	</div>
<div class="duet--media--caption pt-6 font-polysans-mono text-12 font-light leading-130 tracking-1"> <cite>a:hover]:text-gray-63 [&amp;&gt;a:hover]:shadow-underline-black dark:[&amp;&gt;a:hover]:text-gray-bd dark:[&amp;&gt;a:hover]:shadow-underline-gray [&amp;&gt;a]:shadow-underline-gray-63 dark:[&amp;&gt;a]:text-gray-bd dark:[&amp;&gt;a]:shadow-underline-gray&#8221;&gt;Image: <a href="https://www.reddit.com/r/ColorBlind/comments/j2qzk1/among_us_colorblind_comparison/">/u/PieCreeper on Reddit</a></cite></div>
</div>


  .custom-slider-text {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
  }
  .custom-slider-text div:last-child {
  	justify-self: right;
  }
  .custom-divider {
    transform: translateX(-6px) translateY(-50%);
  }



  document.querySelectorAll('select.custom-slider-select').forEach((select) =&gt; {
  	select.addEventListener('change', function() {
  		const target = document.querySelector('img[data-number="'+select.dataset.target+'"]');
  		const friend = document.querySelector('.custom-slider-select[data-target="'+select.dataset.friend+'"]');
  		target.src = select.value;
  		friend.querySelectorAll('option').forEach((option) =&gt; {
  			if(option.value != select.value) {
  				option.disabled = false;
  			} else {
  				option.disabled = true;
  			}
  		})
  	});
  });

  const customSlider = document.querySelector('.slider-mouse-detector');
  const divider = customSlider.querySelector('.custom-divider');
  const topImage = customSlider.querySelector('.top-image');

  customSlider.addEventListener('mousemove', (e) =&gt; {
  	let boundary = customSlider.getBoundingClientRect();
  	let x = (e.clientX - boundary.left) * 100 / customSlider.offsetWidth;
  	let y = (e.clientY - boundary.top) * 100 / customSlider.offsetHeight;
  	topImage.style.width = x+"%";
  	divider.style.left = x+"%";
        divider.style.top = y+"%";
        console.log('hello world');
  });

  customSlider.addEventListener('touchmove', (e) =&gt; {
  	let boundary = customSlider.getBoundingClientRect();
  	let x = (e.clientX - boundary.left) * 100 / customSlider.offsetWidth;
  	topImage.style.width = x+"%";
  	divider.style.left = x+"%";
  });




.duet--article--image-comparison .cursor-move.border-white {
  border-color: #090909;
}

.duet--article--image-comparison .cursor-move.bg-white {
  background-color: #090909;
}


<p>Contrast that with <em>Wordle</em>, the viral sensation created by Josh Wardle as a love letter to his partner, which launched in 2021. The game shipped with a colorblind mode on day one. The default colors are very hard for me to see, but the colorblind support made it immediately accessible.</p>

<div class="c-image-compare alignnone wp-block-vox-media-image-compare">
	<div class="c-image-compare__images">
		
<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564093/wordle_normal.png?quality=90&#038;strip=all&#038;crop=0,22.099372099372,100,55.801255801256" alt="A screenshot of Wordle. Word played are ADIEU, CHEST, VERGE, and solution is GLOVE. The solution letters are in green blocks. Letters that are part of the solution but in the wrong place are in yellow blocks. The rest of the letters are in gray blocks." title="A screenshot of Wordle. Word played are ADIEU, CHEST, VERGE, and solution is GLOVE. The solution letters are in green blocks. Letters that are part of the solution but in the wrong place are in yellow blocks. The rest of the letters are in gray blocks." data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />

<img src="https://platform.theverge.com/wp-content/uploads/sites/2/chorus/uploads/chorus_asset/file/24564092/wordle_colorblind_mode.png?quality=90&#038;strip=all&#038;crop=0,22.231314784506,100,55.537370430987" alt="A screenshot of Wordle in colorblind mode. Word played are ADIEU, CHEST, VERGE, and solution is GLOVE. The solution letters are in orange blocks. Letters that are part of the solution but in the wrong place are in sky blue blocks. The rest of the letters are in gray blocks. " title="A screenshot of Wordle in colorblind mode. Word played are ADIEU, CHEST, VERGE, and solution is GLOVE. The solution letters are in orange blocks. Letters that are part of the solution but in the wrong place are in sky blue blocks. The rest of the letters are in gray blocks. " data-has-syndication-rights="1" data-caption="" data-portal-copyright="" />
	</div>
	<div class="c-image-compare__caption">
		<em>Move slider to the left to see Wordle’s built-in colorblind mode. </em>	</div>
</div>

<p>I asked Wardle what inspired him to add the feature. “I think it felt like a simple thing to do to make more people feel included,” he replied, but he quickly acknowledged he could have done more. “That said, <em>Wordle</em> did have a bunch of issues accessibility-wise that I was ignorant of, which I regret.” (<em>Wordle</em> may have shipped with a colorblind mode, but it was unusable for blind players, and people sharing their <em>Wordle</em> results inundated those using screen readers with useless colored emoji names.)</p>

<p>Accessibility in design is a form of empathy: trying to reach beyond your own personal perspective to try to understand other people who, in this case, very literally don’t see the world the same way you do.</p>

<p class="has-end-mark">Fitting enough, designing for accessibility isn’t black and white, a single feature you choose to build or not, but a vast and colorful spectrum as diverse as the people you’re designing for.</p>
						]]>
									</content>
			
					</entry>
	</feed>
