How to Test Color Blindness in Photoshop

Designing graphics that meet high-accessibility standards requires ensuring that visual information remains legible and distinguishable for users with color vision deficiencies. Adobe Photoshop includes built-in soft-proofing profiles that simulate protanopia and deuteranopia, the two most common forms of red-green color blindness. This guide details the step-by-step workflow for configuring these profiles, establishing a real-time side-by-side workspace, and adjusting visual elements to comply with digital accessibility guidelines such as WCAG.

Step 1: Set Up a Side-by-Side Workspace

To evaluate accessibility without losing sight of the original design, create a duplicate view of the document:

  1. Open your document in Photoshop.
  2. Go to Window > Arrange > New Window for [Document Name]. This opens a second view of the same file in real time; any edits made in one window will instantly reflect in the other.
  3. Go to Window > Arrange > 2-Up Vertical to display the original design and the simulation side by side.

Step 2: Enable Color Blindness Proof Profiles

Photoshop provides calibrated profiles developed in collaboration with color science researchers to simulate specific color deficiencies:

  1. Click inside one of the split windows to make it active.
  2. Navigate to View > Proof Setup > Color Blindness - Protanopia-type (simulates red-blindness, affecting roughly 1% of males).
  3. Alternatively, select View > Proof Setup > Color Blindness - Deuteranopia-type (simulates green-blindness, affecting roughly 5% of males).
  4. Ensure soft proofing is active by checking View > Proof Colors (or pressing Ctrl + Y on Windows / Cmd + Y on macOS). The document tab title will indicate the active proof profile.

Step 3: Evaluate Information Hierarchy and Contrast

With the soft proof active alongside the original, systematically review the graphic against accessibility standards:

  • Use of Color (WCAG Criterion 1.4.1): Verify that color is not the sole visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element. For example, ensure error states do not rely solely on red text or red outlines.
  • Contrast Ratio (WCAG Criterion 1.4.3): Inspect text against its background. Text must maintain a minimum contrast ratio of 4.5:1 for regular text and 3:1 for large text. Elements that share similar lightness values often blend into an indistinguishable gray when viewed under color blindness simulations.
  • Data Visualization: In charts, diagrams, and maps, verify that adjacent segments, bars, or lines remain distinctly differentiated.

Step 4: Apply Non-Destructive Adjustments

If the proof preview reveals indistinguishable elements, apply targeted fixes directly in the design file:

  • Shift Values (Luminance): Add an HUE/Saturation or Curves adjustment layer. Rather than changing hues alone, adjust the brightness or lightness of overlapping tones so they contrast in luminosity as well as color.
  • Incorporate Secondary Cues: Add iconography, labels, varied line weights, or dashed strokes to distinguish lines in charts.
  • Add Textures and Patterns: For charts, maps, or UI states, apply subtle patterns (such as hatching or dots) beneath solid fills to allow differentiation independent of hue.

Step 5: Test Across Multiple Profiles and Finalize

  1. Toggle the active proof from Protanopia-type to Deuteranopia-type via the View > Proof Setup menu to ensure the design passes both conditions.
  2. As an additional baseline, review the graphic in grayscale by going to View > Proof Setup > Custom, selecting sGray or Dot Gain 20% as the Device to Simulate, to ensure adequate luminance contrast across the entire composition.
  3. Close the secondary window once all criteria are met, and export the graphic using standard color profiles (such as sRGB) for web delivery.