Skip to main content

Three ways the Pega Cosmos design system keeps color accessible

Bettina Kast, 7 minute read

Choosing colors for interactive and digital products is no artistic exercise, but an art in itself. 

Next to color's aesthetic, cultural, semantic, and psychological aspects, it's important that equal efforts go into accessibility of color, too. Why?  

Vision impairments are very common. According to the WHO there are at least 2.2 billion people with vision impairment, and the 2017 Global Burden of Disease Study estimated that the annual cost of lost productivity due to moderate to severe vision impairment is about $16.5 billion in the United States of America alone.  

At Pega, we strongly believe that all applications should be accessible – and that’s why color accessibility is part and parcel in the Pega Cosmos design system. Here we introduce three ways that Cosmos enhances color accessibility of applications.  

Cosmos provides enough contrast 

Certain eye conditions (such as cataracts, glaucoma, optic neuropathies, macular degeneration, diabetes, eye trauma, and laser eye surgery) can cause people to experience poor contrast sensitivity. Color-blind people also rely on contrast: it’s often the only way to distinguish between adjacent colors and text on colored backgrounds.

Visualized simulation of gradual vision loss in eye conditions (retinis pigmentosa, diabetic retinopathy, glaucoma, macular degeneration, cataract) on a photo depicting a data visualization on a laptop screen

People living with these conditions will benefit from interfaces that use a high degree of contrast between background and foreground colors. Of course, extremely high contrast may not make sense for all people. About three in 100 people with photosensitive epilepsy may experience seizures triggered by high-contrast interfaces, especially when paired with animation. If you know that this may apply to some of your users, reconsider your use of contrast.  

There are three levels of WCAG 2.1 contrast ratios 

The Web Content Accessibility Guidelines (WCAG) currently offer three defined contrast ratios: 

  • 3:1 (= Level A) 
  • 4.5:1 (= Level AA) 
  • 7:1 (= Level AAA) 

The minimum level – level A is a 3:1 contrast ratio. In Cosmos, this contrast level may be used for: 

  • Meaningful icons on colored background 
  • Form inputs to show expected interactions 

Everything else in Cosmos uses the contrast level AA with a ratio of 4.5:1 – this is the minimum contrast requirement for all text and images of text in web and/or mobile interfaces. Level AA is the minimum contrast ratio required for people with moderately low vision, who do not use any contrast-enhancing technologies to access the interfaces. An example of an app with a level AA-compliant contrast ratio is the U.S. Decennial Census of Population and Housing.  

Contrast level AAA, with a contrast ratio of 7:1, is only recommended for digital products and assets used by audiences with vision loss and who do not use assistive technologies to access interfaces.  

What this means for designers using Cosmos 

Since color contrast comes out-of-the-box, you can rest assured that contrast requirements are properly met for levels A and AA according to WCAG 2.1. (Newer versions of WCAG with versions 2.2 and 3.0 are on their way and at Pega we keep an eye on those and will adopt new standards once they are official.) 

There is also no need to worry about contrast for: 

  • Logo types 
  • Text in logos or brand names 
  • Decorative user interface elements without a function 

These are exempt from any contrast requirements in WCAG 2.1.  

Aiming for level AAA is very limiting in terms of design and branding. Increasing color contrast makes colors appear muddy, which causes loss of color semantics and is perceived by sighted people as unpleasant to look at, which is why everything else in Cosmos uses a 3:1 and 4.5:1 contrast ratio. 

However, if some of your users rely on a 7:1 contrast ratio, consider incorporating a contrast toggle on your webpage or app. People relying on a 7:1 contrast ratio can then temporarily enable level AAA color contrast when needed. Consider this enhancement when building customer-facing sites and applications, with critical functions such as airline booking sites, insurance, or any governmental sites or apps. 

Cosmos addresses different types and levels of color blindness  

Color blindness may be permanent or temporary. Permanent color blindness is caused by genetic mutations. People living with these mutations lack a certain cone type in their retinas. An estimated 8% of the male population (1 in 12 men), and an estimated 0.5% of the female population (1 in 200 women) suffers from permanent color vision deficiency.  

Permanent color blindness 

There are four main types of permanent color blindness, and each one has a less-pronounced subtype. Focusing on the needs of the four main types will automatically cover the needs of the subtypes. 

  • Protanopia (no red cones, affects red-green perception) 
  • Deuteranopia (no green cones, affects red-green perception) 
  • Tritanopia (no blue cones, affects blue-yellow perception) 
  • Typical achromatopsia (no cones, rod monochromacy, affects all colors) 
A data visualization on a laptop screen next to simulations of the same picture showing how people with different color blindness types (Deuteranopia, Protanopia, Tritanopia, Achromatopsia) perceive the same scene. 

Temporary color blindness 

Temporary color blindness is typically drug induced. For example:  

  • Xanthopsia: Congestive heart failure and abnormal heart rhythm are often treated with drugs containing extracts from the digitalis plant. In some cases, these drugs cause yellow-tinted, blurry vision in patients. The effect can last as long as the drug is taken, and reverses after the patient stops taking the drug. 
     
  • Dyschromatopsia: Several drugs taken over a longer period of time can slowly damage the optic nerve, leading to poorer vision and red-green color blindness. These drugs are typically used to regulate heart rhythm, or treat tuberculosis or certain joint and skin conditions that last longer than five years. 
     
  • Cyanopsia: Some drugs to treat ED cause a blue-tinted, blurry vision. Side effects start after taking as little as 25mg and last anywhere from several hours to several months.

Each form of color blindness comes with its own needs. In Cosmos, we address these needs in a variety of ways – such as inclusion of labels and iconography, strong contrast between semantically important colors such as green and red, but also by avoiding certain color combinations. 

For example, red-green blindness is the most common type of color blindness. People with protanopia, deuteranopia, and dyschromatopsia lack the ability to distinguish certain color combinations such as: 

  • Red and green  
  • Brown and green (or red) 
  • Blue and purple 
  • Gray and teal (or pink) 
Examples of color combinations that people living with one form of red-green color blindness can not perceive 

Cosmos addresses this by avoiding these color combinations next to each other, especially in areas such as interface messages, and data visualization.  

Examples of accessible color combinations for data visualization 

What this means for designers 

Cosmos already takes care of color accessibility for every component that ships with Cosmos, including color palettes for data visualization.  

The application of accessible color in data visualization is an area that chart authors often forget. Cosmos embraces this fact and offers 29 carefully-crafted color palettes to encode categoric, continuous, and divergent data, including four palettes that are specifically tailored to the needs of people with Protanopia and Deuteranopia. 

Should you have a need to introduce new colors or color palettes into your application, you need to ensure that they are accessible to color blind people. One method to do this is to use the built-in accessibility checker in Pega App Studio. 

Tested and validated with people 

There are many useful tools out there that empower designers and developers alike to check color contrasts, or to “simulate” what users with color blindness will see. 

These tools are great for a start, but they do fall short in some areas — it’s not yet possible to simulate human perception accurately. At Pega, we work with these tools as part of our design and development process. We even have an accessibility checker for color built into Pega App Studio. But we don’t just rely on tools, because we know technologies can only provide direction.  

When comparing the results of several contrast checkers with results of several usability studies with color blind and color-sighted people, we noticed the contrast checkers have a weakness with teals, bright light blues, and certain types of red tints and pinks. All the contrast checkers do give the same recommendations: to use black text on color, where users perceive white text as more legible. Since we design for real people, in Cosmos, we to stick with human perception rather than relying on tool-based recommendations. 

Color blindness simulation tools also have their limits, and when validating data visualization color palettes with a group of color-blind people, we realized we needed to create special color palettes for each permanent red-green color blindness type: people with protanopia and deuteranopia.  

Examples of red-amber-green color palettes and accessible variations 

What this means for designers 

It is only possible to ensure accessible colors, by testing them with the full range of color-blind types, and people with low vision. Cosmos already takes care of accessibility for the most common types of red-green color blindness. If you’re introducing new colors in your application for critical functionality, you should consider testing them with color-blind users. 

Design confidently for accessibility with Cosmos 

We did a lot of research with people, as well as available technologies and their limitations, to create accessible Cosmos components – and it took many iterations to get the color palettes right.  

When using Cosmos, your application will be all set for A and AA levels of contrast requirements as recommended by current WCAG 2.1. You’ll access a wide selection of accessible color palettes for data visualization that people with color blindness will be able to use confidently. 

Example of accessible multi-hue color palettes applied to various visualization methods 
Examples of color encoded world maps
Example color applied to matrix to create a heatmap 

 

Recommended resources:

Don’t forget 

JOIN THE CONVERSATION on Collaboration Center  
FOLLOW @PegaDeveloper on Twitter  
SUBSCRIBE to the Pega Developer Podcast on Spotify or via RSS

About the Author

A Senior UX & Data Visualization Designer, Bettina Kast is responsible for making Pega's data visualization trustworthy, accessible, and elegant. Bettina specializes in data literacy and encoding, color theory and application, communication, semiotics, and the psychology of perception to create innovative data products that facilitate understanding.

Did you find this content helpful? Yes No

100% found this useful

Want to help us improve this content? Suggest Edit

We'd prefer it if you saw us at our best.

Pega Community has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice
Contact us