c/colorblind-friendly-design

My kid's school website used to be impossible for me to read the calendar

I'm red-green colorblind and for years, the event calendar on the school site used only red and green dots to show different event types. I could never tell them apart. Last week, they updated the whole site and now each dot has a different shape inside it, like a star, a circle, and a square. The change happened because a new parent on the PTA board brought it up. It's such a small fix but it makes a huge difference for me. Has anyone else seen a public site make a simple switch like that?

My city's new bus map uses only red and green lines to show routes, which is a real problem for me.

I'm red-green colorblind and I literally can't tell the difference between the two main lines on the map they just put up at the downtown station, so has anyone found a good tool for checking public transit maps for these issues before they get printed?

Just hit 1000 downloads on my free icon set

I made a simple pack of interface icons a few months back, and the download count just passed a thousand. What got me was the feedback. Over 30 people emailed to thank me for using clear shapes and high contrast, not just color, to show different functions. One guy said it was the first time he could tell the 'save' and 'delete' icons apart without asking his wife. I never thought that small choice would matter so much to that many folks. How do you all test if your symbols work without color?

Just learned the original London Tube map was a nightmare for colorblind folks

Found a 1995 study that said the old color scheme made 8% of users miss their stop. Has anyone else found old designs that are surprisingly bad now?

I fixed my app's dashboard after my brother couldn't read the charts

My brother, who is red-green colorblind, tried to use my app's analytics dashboard about 2 months ago and said the red and green trend lines looked the same to him. I added different line patterns, like dashes and dots, to each color. Now he can tell them apart easily, and our user feedback scores went up by 15%. Has anyone else found that adding texture is a better fix than just picking new colors?

My client's dog chart had red and green status bars

He pointed at it and said 'so is this one good or bad?' because he couldn't tell them apart. What's a better way to show status without relying on color alone?

Warning: My website's red/green buttons lost me a $2000 client

I built a site for a local bakery and used red for 'cancel' and green for 'submit' on their order form. The owner is red-green colorblind and couldn't tell them apart. He tried to cancel an order but submitted three more by mistake, mixing up the buttons. It took me a full week to fix the mess, refund the wrong orders, and rebuild the form with clear icons and text labels. I lost the client and the $2000 project fee because he said he couldn't trust the design. What other button combos are a big risk that I should avoid?

Question about an old traffic map that totally failed me last Tuesday

I was trying to check a route on a city website and the red/green traffic flow overlay was impossible to read, so I missed a big delay. Has anyone found a good example of a public map that uses patterns instead of just color?

Showerthought: I saw a traffic light with a shape inside each color and it clicked

I was walking in my town last week and saw a new traffic light at the Main Street crossing. Each light had a small black shape inside the colored circle: a triangle in the red, a square in the yellow, and a circle in the green. I asked a city worker about it and he said, "We're trying it for folks who can't see the colors well." It made me realize how much we rely on color alone for critical info. I'm not colorblind, but I started thinking about all the apps and charts I design at work that use only color to show different things. That one small change on a traffic light, adding a simple shape, could stop someone from making a dangerous mistake. It's a cheap fix that doesn't ruin the look for everyone else. Has anyone else seen good examples of using patterns or icons along with color in public stuff?

I used to think icons were enough for my web charts...

For years I just slapped a legend on a pie chart and called it good. Then I was working on a dashboard for a project manager in Spokane who is red-green colorblind. He said, 'Fiona, I can't tell the difference between the 'approved' and 'pending' slices at all.' That was about 8 months ago. I started adding patterns, like cross-hatching, directly onto the chart slices themselves, not just in a separate key. Now I always combine color with a clear pattern or texture. Has anyone found a good tool for generating those patterns quickly?

I used to think colorblind simulators were just a gimmick

When I was working on a dashboard for a client, my coworker insisted I run it through a simulator called 'Color Oracle'. I rolled my eyes but did it anyway. Seeing the whole interface turn into a confusing mess of similar browns and greens was a real shock. How do you guys test your work for different types of color vision?

Showerthought: I started adding patterns to my charts and it fixed a huge issue

I was making a report for my team and my coworker Mark, who is colorblind, said he couldn't tell the pie chart sections apart. I tried just making the colors brighter, but that didn't help at all. So I went back and added different patterns, like dots, stripes, and cross-hatching, to each section. After I changed it, Mark said he could read the whole chart perfectly on the first try. It only took me an extra 20 minutes in the design software. Has anyone else found a specific trick like this for data visuals?

Appreciation post: The Denver airport's new parking payment kiosks only use color to show which card slot is active.

I was there yesterday and it's a huge fail because the green and red lights look identical to me, so I had to guess which slot to use.

At the new city hall building, their wayfinding signs are a real problem

I was there yesterday trying to find the permit office. The signs use only red and green arrows on a gray background to show you where to go. I'm red-green colorblind, so to me it just looked like a bunch of gray arrows pointing in different directions. I had to ask three people for help before I found the right floor. It seems like such a simple fix to add a shape or some text next to the colors. Has anyone else run into this kind of thing in public buildings lately?

PSA: I keep seeing charts where the only difference between lines is color.

I was looking at a sales report at work yesterday, and the line chart had four trends on it. They were only told apart by being red, green, blue, and orange. For me, with my red-green colorblindness, two of them looked identical. I had to ask my coworker which line was which, which was pretty awkward. It matters because charts are supposed to give you information fast, not make you ask for help. I know this is a common issue because I see it in presentations and online dashboards all the time. The fix is so simple: use different line styles like solid, dashed, and dotted along with the colors. Has anyone else run into this specific problem with line charts at their job?

Serious question, has anyone else had a dashboard where the red/green status lights were a total fail?

I built a client dashboard last month where 'good' was green and 'bad' was red. My client's boss is red-green colorblind and said he couldn't tell them apart at all. I tried just making the green darker, but that didn't fix it. The solution was adding a distinct shape to each light: a checkmark for good and an X for bad. He said it was clear immediately. What other symbols have you all used for this kind of thing?

My old traffic light icons were useless for my colorblind neighbor

I used red and green circles alone, but he said they looked identical. Now I always add a checkmark for go and an X for stop. What other icon combos work well?

I used to think adding patterns to charts was just visual clutter, but after a project in Seattle last month where a client's team couldn't read our green/red heat map, I now layer patterns over every key color difference.

Has anyone else found a specific pattern library or tool that makes this process faster than doing it manually in something like Illustrator?

Delivering a package to a new apartment complex and the unit numbers were just colored tiles, no text. Guy at the door was totally lost.

My cousin's kid thought my chart was a connect-the-dots game

I was showing my family a data dashboard I made at a BBQ last summer. My 8-year-old nephew, who's colorblind, pointed at a pie chart and said, 'Cool, can I draw lines between the dots?' He couldn't tell the sections apart because I only used color. It happened in their backyard in Tacoma. I had to explain it was a chart, not a puzzle. What's the best way you've found to label charts without just relying on color?

PSA: My nephew's traffic light worksheet at school was completely unreadable to him

He's in second grade. They had a 'stoplight' system for behavior, red for bad, yellow for warning, green for good. All the kids had to color it in. My nephew is red-green colorblind. He just sat there, confused. Teacher thought he was being difficult. I saw the worksheet when he brought it home. The circles were just outlines, no labels. He couldn't tell which was which. Found out from his mom that about 1 in 12 boys have some form of color vision deficiency. That's way more common than I thought. How many other basic things like this are we designing that just fail for them? What's a simple fix for something like a worksheet?

PSA: My friend told me to check my traffic light icons with a simulator, and it saved a project.

I was finishing a safety app for a client, and my friend, who is red-green colorblind, asked to see it. He pointed at the status icons and said, 'I can't tell which light is which, they all just look yellow.' I ran the design through a colorblindness simulator tool, and sure enough, the red and green circles looked identical. I changed the red to have an 'X' inside and the green a checkmark, adding shape to the color. The client approved the fix last week. Has anyone else had a close call like this where a simple icon change made all the difference?

I thought those colorblind simulators were just a gimmick until I tested a dashboard I designed and the key metric was invisible.

Just read that about 1 in 12 men have some form of color blindness

I was looking up stats for a work project and found that number on the Color Blind Awareness site. That's over 8% of men, which is way more common than I thought. It really hit me that in a room of 50 guys, around 4 of them might see colors differently. It makes me think about all the charts and buttons I've made that only use color to show info. For dashboards, what's the best way to add patterns or labels so the data is clear for everyone?

Pro tip: my son's science fair project in 2021 taught me a hard lesson about color coding

Honestly, he used only red and green markers for a chart, and his colorblind teacher couldn't read a thing. Has anyone else had a project totally fail because of a simple color choice?