Portal Color Design to Support Visually Challenged Users

By Mandana Samii, SAP AG, SAP User Experience – February 18, 2002

What Exactly is a High Contrast Color Design? | Designing Usable High Contrast Variants | Semantic Colors and the High Contrast Design | Semantic Colors and Colorblind Users | Supporting High Contrast Schemes in a Portal

When it comes to designing a portal that works for ALL people, accessibility is a major issue. It's not always a matter of special software and device compatibility; in some cases, special visual design considerations are needed. Impaired vision and "color blindness" are widespread phenomena. Some of us have difficulties distinguishing certain colors. In time, most of us will experience some age-related physical changes to our eyes, affecting focus and contrast, which reduce our ability to recognize shades, edges, textures and patterns.

A usable portal for users with impaired vision mustů

  • let users adjust font sizes in the portal via the browser's view options
  • offer users with visual impairments at least one high contrast design, developed for maximum contrast and legibility, when they personalize the portal
  • allow administrators an easy way to create additional high contrast designs, based on specific requests from visually challenged users and make these design variants available to them
  • make sure that semantic colors, used to visualize specific meanings or critical statuses in the portal, are distinguishable for "color-blind" users

Portal using a high contrast color scheme

Figure 1: Portal using a high contrast color scheme (click image for larger view)


What Exactly is a High Contrast Color Design?

The high contrast color scheme has been an integrated accessibility feature of standard operating systems' graphical interfaces. MS Windows, for example, enables users to check the High Contrast option in the Display or the Accessibility section of the Control Panel. Once the high contrast scheme is selected, it is also possible to change the display color of certain details, like, for example, window title bars.

This option affects only the way a document is displayed, it does not lead to any changes in the document itself. Applications override normal display colors for the documents, and use the individual window and text display colors which the user selected through the Control Panel. In this way, colors can be adjusted for one user, without affecting other users.

Display properties in Windows NT 4.0 - standard theme      Display properties in Windows NT 4.0 - high contrast theme

Figure 2 and 3: Display properties in Windows NT 4.0 - standard theme (left) vs. high contrast theme (right)


Designing Usable High Contrast Variants

For people with normal vision, color may be a matter of preference. For users with visual impairments, however, it is a critical factor influencing whether or not they can use a software or Website at all. Some people require a lot of contrast between text and background, otherwise the text would not be legible at all for them.

It is not enough to offer only one high contrast setting, as different users have different needs. Some may even need a particular color scheme, such as white text on a black background, otherwise the background seems to them to "bleed" over and thus cause the foreground text to look fuzzy. White on black, black on white, and yellow on blue are among the most widespread color schemes used to achieve higher contrast.

Using reds and greens together is a bad choice for a high contrast scheme. Back in the days of black and white photography and TV, this was a commonly known phenomenon. Red and green may look fairly distinguishable when we have normal color vision, but as soon as our perception of color tone is disturbed, we realize that there is hardly any contrast in terms of lightness and darkness between average red and green tones. The results are rather like gray writings on a gray wall. Orange and blue often produce the same effect as red and green. Bright yellow and deep blue usually contrast well. A very light blue, however, can again ruin the contrast.

Lighthouse International provides very useful guidelines for effective color contrast on their Website at www.lighthouse.org/color_contrast.htm.


Semantic Colors and the High Contrast Design

It goes without saying that using color codes to visualize information is quite counterproductive for users with impaired vision, because it goes against the principle of maximum contrast. Color codes are a very useful feature to users with normal sight. Marking different categories of data - for example totals, key figures, etc. - by a special font or background color makes them recognizable at a glance. However, for users with impaired vision, this time-saving feature is useless. To them, any information displayed in colors is hidden information because it prevents them from reading altogether. So, in the high contrast scheme, users will have to read and understand the contents before they can evaluate the status. Black text on bright yellow background is an exception to the rule, as it is legible enough in many cases.

Report using semantic colors      The same report using high contrast colors

Figure 4 and 5: Report using semantic colors vs. the same report using high contrast colors (click images for larger views)

Some font attributes can signalize critical entries quite well, even though they don't allow as many variations as with color: Bold text works well, but italic text is not recommended because it is difficult to read on a monitor screen.


Semantic Colors and Colorblind Users

Though not necessarily an impairment in everyday life, color blindness is a serious matter when color coding is used to visualize specific information, alerts or critical situations.

Ideally, an interface conveying vital information should never rely on color as the only means of information output. Additional text is the best, but not the only alternative visual communication channel. After all, it is no coincidence that the red light is ALWAYS at the top of a traffic light. How else should a colorblind person distinguish between red and green and know whether he must stop or drive on?

Since we cannot rule out the usage of color coding in all cases, there is a need to develop a consistent set of semantic background colors. Semantic colors are used for specific situations like alerting a user, conveying a positive or critical status in data tables, or color-coding values like totals, subtotals, etc. These should be a fixed set of colors, which always remain the same throughout the portal. That is to say that they do not adapt to different portal color designs or corporate color branding rules (except in the high contrast design, as already mentioned).

The graphic below demonstrates a possible set of semantic colors. On the left hand side, you can see the original colors. They were chosen so that color blind users can distinguish them sufficiently. The colors shown in the center and on the right hand side are a simulation of how color blind users perceive the color set.

Possible set of semantic colors and how colorblind people perceive them

Figure 6: Possible set of semantic colors and how colorblind people perceive them

The four most important semantic colors, which stand for "positive", "negative", "total" and "key" in reports, are web-safe. This will minimize the possibility of their distortion due to rendering differences among different platforms, operating systems, and displays.

Why not use web-safe colors throughout the portal, you might ask. Well, for general use in the portal, the web-safe palette is not a good choice. Many web-safe colors are too bright to use as background colors in a portal that users will potentially use for many hours a day. Once you put those non-usable colors aside, what remains in the web-safe palette allows too little choice of color to adapt the portal to all possible customers' color branding rules. This may be an issue for outfacing portals open to external users with unpredictable hard- and software, as may be the case with e-shops.

Supporting High Contrast Schemes in a Portal

Since portals are Web products which run in a browser, they are not rendered by the system GUI. That makes it more difficult to give portal users direct and individual access to color customization. While the display font sizes can be easily customized through the browser's view options, there is no direct way for the browser to let users adjust color in web interfaces. Theoretically, you can "customize" a regular Website by creating your own CSS containing suitable colors, and tell your browser to use it, overriding the site's default color attributes. In reality, though, most users don't have the time or expertise to do so. Even if they do, portal customers will hardly want regular users to change the look of their enterprise portal individually.

To enable visually impaired portal users to switch to a high contrast display mode, a portal product needs to support at least one high contrast version of all rendering CSSs, and let users select this alternative display choice through the portal personalization link.

Ideally, customers running a portal should be offered a tool to edit or create customized portal rendering versions. This encourages the creation of additional high contrast versions upon specific user request. In time, a series of high contrast theme variants may emerge, so that each user can choose the one that suits him or her best.

Making it easier for portal customers to create and maintain usable alternative interface designs is a big step toward portals that work for ALL people.


top top