Designing for Colorblindness in Photoshop Using Colorbind View Mode

If you’ve ever built a website, designed a logo, or created digital content for clients, you’ve probably heard the advice: “make sure it’s accessible for everyone.” But what does that actually mean when it comes to color?

For approximately 300 million people worldwide with color vision deficiency (colorblindness), your perfectly-chosen color palette might be completely indistinguishable. That’s roughly 1 in 12 men and 1 in 200 women who see your designs differently than you intended.

As designers, we have a responsibility to create work that speaks to everyone, not just those with perfect color vision. And let’s be honest—designing with accessibility in mind isn’t just ethically right, it’s good business too.

Understanding Colorblindness: Beyond the Basics

Before we dive into the Photoshop techniques, let’s quickly understand what we’re designing for. Colorblindness isn’t a one-size-fits-all condition.

The Major Types of Colorblindness

Protanopia and Protanomaly: Difficulty distinguishing between reds and greens, with reds appearing darker. People with protanopia lack the long-wavelength sensitive cones in their retina, making reds look more like black.

Deuteranopia and Deuteranomaly: The most common form, affecting about 6% of males. Similar to protanopia, but greens look more like reds. Deuteranomaly is often milder than protanopia.

Tritanopia and Tritanomaly: Rare conditions affecting blue-yellow perception. Blues might appear greenish, and yellows can look light gray or violet.

Achromatopsia: Complete colorblindness where everything appears in shades of gray. Extremely rare, affecting approximately 1 in 30,000 people.

Now that you know what we’re designing for, let’s get into the practical tools and techniques for making your Photoshop work accessible to everyone.

Essential Photoshop Tools for Colorblind-Accessible Design

Adobe Photoshop offers several built-in features to help designers create colorblind-friendly work. I’ll walk you through each one, along with some third-party tools that can elevate your accessible design game.

1. Using Photoshop’s Built-in Colorblind Preview Feature

Photoshop has a colorblind preview function that many designers don’t even know exists. It’s a game-changer for designers who want to ensure their work is accessible.

How to access it:

1. Open your design in Photoshop

2. Go to View > Proof Setup > Colorblindness

3. Choose either Protanopia-Type or Deuteranopia-Type (the two most common forms)

4. Now your design will display as it would appear to someone with that type of colorblindness

5. Toggle between normal view and colorblind view with Ctrl+Y (Windows) or Cmd+Y (Mac)

This preview is invaluable for checking if your critical design elements remain distinguishable when viewed by someone with colorblindness. If important elements become indistinguishable, you’ll know you need to make adjustments.

2. Creating Custom Colorblind Proofing Profiles

The default PSD colorblind previews are helpful, but they only cover two types of colorblindness. Creating custom proofing profiles gives you more flexibility.

Here’s how:

1. Go to View > Proof Setup > Custom

2. In the Customize Proof Condition dialog, select “Device to Simulate” and choose “Custom”

3. Create profiles that simulate different types of colorblindness by adjusting the RGB values

This approach requires more expertise but gives you greater control over testing various vision conditions.

3. Bjango Photoshop Actions for Comprehensive Testing

While built-in tools are great, I’ve found the Bjango Actions to be an incredibly valuable addition to my workflow. These free Photoshop actions simulate multiple types of colorblindness with just a single click.

To set this up:

1. Download the Bjango Actions from their website

2. Load the actions into Photoshop via the Actions panel (Window > Actions)

3. Now you can simulate various types of colorblindness by simply clicking an action

The advantage here is that these actions cover more types of colorblindness than the built-in Photoshop options, including the rarer Tritanopia.

Beyond Photoshop: Cross-Platform Colorblindness Testing Tools

Sometimes you need to test across your entire design workflow, not just in Photoshop. Here are some excellent tools that work on anything visible on your screen.

1. Color Oracle: The Designer’s Best Friend

Color Oracle is my go-to tool for accessibility testing across applications. It’s free, simple to use, and works on Windows, Mac, and Linux.

What makes it great:

Color Oracle filters your entire screen, regardless of which application you’re using, giving you a comprehensive view of how your designs appear to colorblind users. It accurately simulates the three main types of colorblindness: Deuteranopia, Protanopia, and Tritanopia, covering the vast majority of color vision deficiencies. The software is extremely lightweight and operates via a simple menu bar icon, never getting in the way of your workflow. Best of all, you can toggle simulations on and off with keyboard shortcuts, making it easy to quickly check designs as you work.

This tool is essential for testing not just static designs, but also interactions, animations, and multi-application workflows.

2. Sim Daltonism: For Mac and iOS Users

If you’re in the Apple ecosystem, Sim Daltonism offers a unique approach. Instead of filtering your entire screen, it creates a movable viewing window that shows the colorblind simulation of whatever is beneath it.

This is particularly useful when you want to compare the original and colorblind views side-by-side without constantly toggling between them.

3. Chrome Extensions for Web Design Testing

For web designers, browser extensions like “Let’s Get Color Blind” and “Colorblindly” can simulate colorblindness directly in the browser, allowing you to test your web designs without leaving Chrome.

These tools are particularly helpful when you’re designing responsive websites and need to check accessibility across different breakpoints and interactions.

Practical Design Strategies for Colorblind Accessibility

Having the right tools is only half the battle. Now, let’s talk about practical design strategies that ensure your Photoshop creations are accessible to everyone.

1. Don’t Rely on Color Alone to Convey Information

This is the golden rule of accessible design. If your design requires someone to distinguish between different colors to understand it, it’s not accessible.

Better approaches:

Instead of relying solely on color differences, combine colors with distinctive patterns or textures that remain visible regardless of color perception. Add clear icons, symbols, or text labels to color-coded elements so their meaning isn’t lost if colors appear similar. Use different shapes in addition to colors to differentiate elements in interfaces, charts, and diagrams. When color-coding text, employ variations in typography such as bold, italic, or different font weights alongside color to create multiple visual cues. These approaches create redundant coding that ensures your message gets through even if color perception is limited.

These techniques ensure that even if someone can’t see your color differences, they can still understand your design.

2. Choose Colorblind-Friendly Color Palettes

Certain color combinations are particularly problematic for people with colorblindness. Here’s how to create better palettes:

Colors to avoid putting side by side:

• Red and green (Christmas websites, I’m looking at you)
• Green and brown
• Blue and purple
• Green and blue
• Light green and yellow

Better color combinations:

• Blue and orange
• Blue and red
• Blue and yellow
• Yellow and purple

Tools like Adobe Color now include colorblind-safe options in their accessibility tools, making it easier than ever to create inclusive palettes.

3. Ensure Strong Contrast and Brightness Differences

Many forms of colorblindness affect perceived brightness as well as hue. Creating strong contrast between elements helps ensure visibility.

Tips for improving contrast:

Check your design in grayscale to see if elements are still distinguishable. This simple step can reveal contrast issues that might be hidden when viewing in color. Use the WCAG contrast checker in Photoshop to ensure text readability against backgrounds, especially for smaller text sizes. Remember that red appears much darker to people with protanopia, so avoid using red for crucial elements without additional visual cues. Create designs with strong luminance (lightness) differences, not just hue differences, as brightness variations remain visible even when colors blend together.

Adding a grayscale check to your design process is one of the simplest and most effective ways to catch contrast issues.

4. Use Photoshop Layer Styles to Add Redundant Cues

Photoshop’s layer styles are powerful tools for adding non-color indicators:

• Add subtle patterns with Pattern Overlay

• Use Stroke to create outlines around colored elements

• Apply Drop Shadow to increase contrast between elements

• Utilize Inner Shadow to create depth that doesn’t rely on color

These techniques not only make your designs more accessible but often enhance them aesthetically for all users.

Real-World Projects: Applying Colorblind Accessibility Techniques

Let’s look at some common design projects and how to make them colorblind-friendly using Photoshop.

1. Creating Accessible Charts and Graphs

Data visualization is perhaps the most critical area for colorblind accessibility. Here’s how to ensure your Photoshop-created graphs are inclusive:

Effective techniques:

Use patterns or textures in addition to colors for different segments of your charts. This creates a double-encoded visualization where information is conveyed through multiple channels. Add direct labels to colored areas instead of relying on a color key or legend that requires color matching. Utilize distinctly different shapes for data points on scatter plots to make them distinguishable regardless of color perception. Consider using colorblind-friendly gradient maps for heat maps, focusing on brightness variations rather than problematic hue transitions. Create high contrast borders between adjacent sections to help delineate areas even when their colors might appear similar to someone with colorblindness.

The best data visualizations communicate clearly through multiple visual channels, not just color.

2. Designing Accessible UI Elements and Buttons

For interface elements, clarity is key:

Add icons inside buttons rather than relying solely on colored buttons to indicate different actions. Use descriptive text labels alongside any color-coding to ensure the meaning is clear regardless of color perception. For error states, combine color indicators (typically red) with symbols, icons, or text explanations so the error is obvious to everyone. Design focus states with multiple visual cues—combine glow effects, outlines, and color changes to create noticeable state changes. Always test your hover states in colorblind simulation mode to ensure they remain noticeable when colors might blend together.

Remember that many colorblind users may not see subtle color changes that indicate interactivity.

3. Creating Accessible Maps and Wayfinding in Photoshop

Maps can be particularly challenging:

Use a combination of patterns, symbols, and labels rather than relying solely on color-coding for different map areas. When designing route lines, ensure they differ in both color AND line style—make one solid, another dashed, and another dotted to create distinguishable paths. Add distinctive textures to different terrain types instead of just changing colors, giving users multiple visual cues to differentiate between areas. Create high contrast for important elements like “You Are Here” markers to ensure they stand out regardless of color perception. Consider implementing a grid system with coordinates as a backup navigation method, giving users a non-color dependent way to communicate locations.

The best maps work for everyone because they utilize multiple visual systems simultaneously.

Client Communication: Advocating for Accessibility

As designers, we sometimes face pushback when recommending accessible design approaches. Here’s how to effectively advocate for colorblind accessibility with your clients:

1. Demonstrate the Issue Visually

Nothing is more convincing than showing clients exactly how their designs look to colorblind users:

Create side-by-side comparisons using the simulation tools we’ve discussed so clients can see exactly how their designs appear to colorblind users. This visual evidence is much more compelling than abstract discussions. Show relevant statistics about the prevalence of colorblindness in their target market—for example, if they’re targeting men, emphasize that approximately 8% of males have some form of color vision deficiency. Take time to demonstrate how most colorblind accessibility issues can be fixed with simple adjustments that often enhance the design for everyone.

Visual evidence is far more compelling than abstract discussions about accessibility.

2. Explain the Business Benefits

Accessibility isn’t just ethical—it’s good business:

Emphasize to clients that approximately 8% of men have some form of colorblindness—that’s a huge potential audience they might be alienating with inaccessible designs. Point out that accessible designs typically perform better for ALL users, not just those with colorblindness, as they tend to have clearer visual hierarchies and stronger contrast. Mention that accessibility considerations can help with both SEO performance and legal compliance in many jurisdictions. Finally, highlight how inclusive design builds positive brand perception, showing that the company cares about all its potential customers.

Frame accessibility as a business advantage, not just a checkbox to tick.

3. Build Accessibility into Your Process and Pricing

Don’t make accessibility an optional extra:

Include colorblind testing as a standard part of your design process rather than treating it as an optional extra step. This builds accessibility into your workflow from the beginning. Mention your commitment to accessibility in your proposals and contracts, setting clear expectations from the start of each client relationship. Take time to educate clients about accessibility benefits during your onboarding process, helping them understand why certain design decisions are important. You might even consider offering specialized accessibility audits as a service for clients’ existing designs, creating an additional revenue stream while promoting inclusive design principles.

When you treat accessibility as non-negotiable, clients will respect your professional standards.

Finding Accessible Design Work

If you’re passionate about accessible design, there are plenty of opportunities to specialize in this area:

If you’re looking to specialize in accessible design, focus on sectors with high accessibility demands. Government and public sector projects typically have strict accessibility requirements mandated by law, creating steady demand for compliant designers. Healthcare organizations constantly need accessible materials for their diverse patient populations—from hospital signage to patient education materials. Educational institutions are increasingly focused on creating inclusive learning materials that work for all students regardless of visual abilities. Financial services companies rely heavily on data visualization and need charts and graphs that remain readable and informative for all users, including those with color vision deficiencies.

The Future of Accessible Design Tools in Photoshop

Adobe continues to improve accessibility features in Photoshop with each update. Here are some developments to watch:

Adobe continues to enhance its accessibility features with each Photoshop update. We’re seeing enhanced colorblind simulation modes that cover more types of colorblindness beyond the traditional protanopia and deuteranopia options. The development of AI-assisted accessibility checking promises to automatically flag potential issues during the design process, similar to how spelling checkers work. Adobe is also working on expanded accessibility panels and streamlined workflows to make testing more efficient. Additionally, better integration with established accessibility standards and guidelines helps ensure that designs meet recognized benchmarks for inclusivity. Staying current with these evolving tools will give you a significant competitive advantage as an accessibility-conscious designer.

Staying current with these tools will give you a competitive edge as an accessibility-conscious designer.

Conclusion: Making Accessibility a Creative Advantage

Designing for colorblindness in Photoshop isn’t about limitation—it’s about creating work that communicates more effectively with everyone. The best accessible designs don’t look “accessible”; they just work better for all users.

By incorporating the tools and techniques we’ve covered, you’ll create more robust, clear, and effective designs that stand out in your portfolio and deliver real results for your clients.

The most successful designers understand that constraints like accessibility don’t hinder creativity—they enhance it by pushing us to find more innovative and universal solutions.

Remember: great design works for everyone, regardless of how they perceive color.