Skip links

Designing UX for the Color Blind

Jump To Section

Color blindness is a very common condition in people. It’s the inability in some individuals to recognize the difference in color due to malfunction of their color photopigments.
Designing ux for the color blind

Color Blindness:Impact on Design

Color blindness is a very common condition in people. It’s the inability of some individuals to recognize the difference in color due to the malfunction of their color photopigments. How common is this problem? Here are some statistics on designing for color blindness:

An estimated 253 million people live with vision impairment: 36 million are blind and 217 million have moderate to severe vision
impairment.

Color is one of the most important elements of design. Worldwide, colors are used to depict several things – emotions, importance, progress, concern, and so on. However, humans don’t experience the exact same color vision. Color is an outcome of the brain translating light received by our retinal cones. This makes us see colors in different ways.

What I see as red may not be perceived the same way as you see. Sometimes, this situation is more tragic. Defects in the cones can lead to extreme defects in color vision, that makes some people mistake shades or altogether lose the ability to differentiate colors.

There are several reasons that can lead to this situation. The most common color blindness happens with the loss or limited function of the red or green cone photopigments. For example, in the case of deuteranopia, where the green cone cells are not functioning, there will be no vision of a green and its constituent colors.

Similarly, with protanopia where the red cones stop working. Blue-yellow blindness is rarer than red-green. But the rarest type is complete color blindness or monochromacy. Monochromatic people differentiate color only through brightness. Their world is all in black and white. And this creates a unique problem for User Interface design.

Looking at the numbers of people who experience color blindness, this becomes a very important aspect when designing products. If this is not considered, it may render a lot of products completely unusable to color-blind users, which means a substantial loss for the business and discomfort to people. Here a nervous designer cowers, “I need to design a site from scratch in one week,” the designer says. “and you give me another problem to solve? I don’t have time for this!” Don’t worry, it’s not so bad.

Here are some simple and easy-to-follow ground rules.

Colorblind people are not able to distinguish tones (red, yellow, blue, green, etc.). But they see the same image as people with normal vision.

Comparison of the perception by a human with a regular vision versus a human with protanopia. The red completely disappears in the photo on the right.

When designing UI this leads to a bunch of problems – unreadable text, unnoticeable buttons, etc.

Also read: Power of UX in Product Life Cycle

You can’t trust colors

Color isn’t omnipotent, you shouldn’t expect that it can solve all of your problems alone. But a proper base color is able to beautify UI and improve UX.

Statistically speaking most people with a moderate form of red/green color blindness will only be able to identify accurately 5 or so colored pencils from a standard box of 24 pencil crayons.

Any color designation can be supplemented with a caption or an icon so that the object preserves its function no matter what happens with colors. For example, because protanopia leads to an inability to see red color, it becomes difficult to correct form if the designer uses only red to indicate mistakes. A better solution is to supplement color with a caption or an icon.

Designing for color blindness

Use patterns or texture to show the contrast

Too many patterns and texture bring a lot of noise, so it’s better to use too much. Slack, for example, offers users special accessible themes that change all colors of the user interface.

UX Colors Load Balancers
Do not have color names appear on hovering because that does not really solve the problem while using it from a mobile device. The best way of representation is as below:

Texture to show the contrast
This maintains a fine balance between giving only colors for selecting AND not leaving the users to take a minute to relate to the color by giving only the name.

Use patterns

Sometimes it’s a good idea to add patterns and textures to emphasize the contrast between objects.

Use Patterns Designing UX
Theme for color blindness

Make it look good in the grayscale

Try out your design on a grayscale. If everything is visible distinctly in grayscale, there is a pretty good chance it will work for the color-blind users.

One of the best examples of this is Google Maps. Despite using red and green for busy and no traffic, use colors of pretty different hues, allowing color blind people to see the differences pretty well.

Make it look good in the grayscale

Avoid the complete no-no color combos

Be color-smart when picking your combinations. Since color blindness affects people in different ways, it’s difficult to determine which colors are ‘safe’ to use in web design. Here are a few color combinations that should be a complete no-no while choosing the pallet:

Green & Red Green
& Brown Blue &
Purple Green & Blue
Light Green & Yellow
Blue & Grey
Green & Grey
Green & Black

Finally, design for all

Creating an accessible user interface doesn’t require a lot of additional time. Empathizing with end-users and their way of consuming information, can, in turn, help us to create a final product that’s fully accessible & usable.

Picture of Antony Selvaraj

Antony Selvaraj

Suggested Reading

Ready to Unlock Your Enterprise's Full Potential?

Michael Woodall

Chief Growth Officer of Financial Services

Michael Woodall, as the Chief Growth Officer of Financial Services at Altimetrik, spearheads the identification of new growth avenues and revenue streams within the financial services sector. With a robust background and extensive expertise, Michael brings invaluable insights to his role.

Previously, Michael served as the Chief of Operations and President of the Trust Company at Putnam Investments, where he orchestrated strategic developments and continuous operational enhancements. Leveraging strategic partnerships and data analytics, he revolutionized capabilities across investments, retail and institutional distribution, and client services. Under his leadership, Putnam received numerous accolades, including the DALBAR Mutual Fund Service Award for over 30 consecutive years.

Michael’s dedication to industry evolution is evident through his involvement with prestigious organizations such as the DTCC Senior Wealth Advisory Board, ICI Operations Committee, and NICSA, where he served as Chairman and now holds the position of Director Emeritus. Widely recognized as an industry luminary, Michael frequently shares his expertise with various divisions of the SEC, solidifying his reputation as a seasoned presenter.

At Altimetrik, Michael plays a pivotal role in driving expansion within financial services, leveraging his expertise and Altimetrik’s Digital Business Methodology to ensure clients navigate their digital journey seamlessly, achieving tangible outcomes and exponential growth.

Beyond his corporate roles, Michael serves as Chair of the Boston Water & Sewer Commission, appointed by the Mayor of Boston, and is actively involved in various philanthropic endeavors, including serving on the board of the nonprofit Inspire Arts & Music.

Michael holds a distinguished business degree from Northeastern University, graduating with distinction as a member of the Sigma Epsilon Rho Honor Society.

Anguraj Kumar Arumugam

Chief Digital Business Officer for the U.S. West region

Anguraj is an accomplished business executive with an extensive leadership experience in the services industry and strong background across digital transformation, engineering services, data and analytics, cloud and consulting.

Prior to joining Altimetrik, Anguraj has served in various positions and roles at Globant, GlobalLogic, Wipro and TechMahindra. Over his 25 years career, he has led many strategic and large-scale digital engineering and transformation programs for some of world’s best-known brands. His clients represent a range of industry sectors including Automotive, Technology and Software Platforms. Anguraj has built and guided all-star teams throughout his tenure, bringing together the best of the techno-functional capabilities to address critical client challenges and deliver value.

Anguraj holds a bachelor’s degree in mechanical engineering from Anna University and a master’s degree in software systems from Birla Institute of Technology, Pilani.

In his spare time, he enjoys long walks, hiking, gardening, and listening to music.

Vikas Krishan

Chief Digital Business Officer and Head of the EMEA region

Vikas (Vik) Krishan serves as the Chief Digital Business Officer and Head of the EMEA region for Altimetrik. He is responsible for leading and growing the company’s presence across new and existing client relationships within the region.

Vik is a seasoned executive and brings over 25 years of global experience in Financial Services, Digital, Management Consulting, Pre- and Post-deal services and large/ strategic transformational programmes, gained in a variety of senior global leadership roles at firms such as Globant, HCL, Wipro, Logica and EDS and started his career within Investment Banking. He has developed significant cross industry experience across a wide variety of verticals, with a particular focus on working with and advising the C-Suite of Financial Institutions, Private Equity firms and FinTech’s on strategy and growth, operational excellence, performance improvement and digital adoption.

He has served as the engagement lead on multiple global transactions to enable the orchestration of business, technology, and operational change to drive growth and client retention.

Vik, who is based in London, serves as a trustee for the Burma Star Memorial Fund, is a keen photographer and an avid sportsman.

Megan Farrell Herrmanns

Chief Digital Officer, US Central

Megan is a senior business executive with a passion for empowering customers to reach their highest potential. She has depth and breadth of experience working across large enterprise and commercial customers, and across technical and industry domains. With a track record of driving measurable results, she develops trusted relationships with client executives to drive organizational growth, unlock business value, and internalize the use of digital business as a differentiator.

At Altimetrik, Megan is responsible for expanding client relationships and developing new business opportunities in the US Central region. Her focus is on digital business and utilizing her experience to create high growth opportunities for clients. Moreover, she leads the company’s efforts in cultivating and enhancing our partnership with Salesforce, strategically positioning our business to capitalize on new business opportunities.

Prior to Altimetrik, Megan spent 10 years leading Customer Success at Salesforce, helping customers maximize the value of their investments across their technology stack. Prior to Salesforce, Megan spent over 15 years with Accenture, leading large transformational projects for enterprise customers.

Megan earned a Bachelor of Science in Mechanical Engineering from Marquette University. Beyond work, Megan enjoys playing sand volleyball, traveling, watching her kids soccer games, and is actively involved in a philanthropy (Advisory Council for Cradles to Crayons).

Adaptive Clinical Trial Designs: Modify trials based on interim results for faster identification of effective drugs.Identify effective drugs faster with data analytics and machine learning algorithms to analyze interim trial results and modify.
Real-World Evidence (RWE) Integration: Supplement trial data with real-world insights for drug effectiveness and safety.Supplement trial data with real-world insights for drug effectiveness and safety.
Biomarker Identification and Validation: Validate biomarkers predicting treatment response for targeted therapies.Utilize bioinformatics and computational biology to validate biomarkers predicting treatment response for targeted therapies.
Collaborative Clinical Research Networks: Establish networks for better patient recruitment and data sharing.Leverage cloud-based platforms and collaborative software to establish networks for better patient recruitment and data sharing.
Master Protocols and Basket Trials: Evaluate multiple drugs in one trial for efficient drug development.Implement electronic data capture systems and digital platforms to efficiently manage and evaluate multiple drugs or drug combinations within a single trial, enabling more streamlined drug development
Remote and Decentralized Trials: Embrace virtual trials for broader patient participation.Embrace telemedicine, virtual monitoring, and digital health tools to conduct remote and decentralized trials, allowing patients to participate from home and reducing the need for frequent in-person visits
Patient-Centric Trials: Design trials with patient needs in mind for better recruitment and retention.Develop patient-centric mobile apps and web portals that provide trial information, virtual support groups, and patient-reported outcome tracking to enhance patient engagement, recruitment, and retention
Regulatory Engagement and Expedited Review Pathways: Engage regulators early for faster approvals.Utilize digital communication tools to engage regulatory agencies early in the drug development process, enabling faster feedback and exploration of expedited review pathways for accelerated approvals
Companion Diagnostics Development: Develop diagnostics for targeted recruitment and personalized treatment.Implement bioinformatics and genomics technologies to develop companion diagnostics that can identify patient subpopulations likely to benefit from the drug, aiding in targeted recruitment and personalized treatment
Data Standardization and Interoperability: Ensure seamless data exchange among research sites.Utilize interoperable electronic health record systems and health data standards to ensure seamless data exchange among different research sites, promoting efficient data aggregation and analysis
Use of AI and Predictive Analytics: Apply AI for drug candidate identification and data analysis.Leverage AI algorithms and predictive analytics to analyze large datasets, identify potential drug candidates, optimize trial designs, and predict treatment outcomes, accelerating the drug development process
R&D Investments: Improve the drug or expand indicationsUtilize computational modelling and simulation techniques to accelerate drug discovery and optimize drug development processes