Keywords

1 Introduction

WCAG2.0 [1] gives concrete advice on how to ensure sufficient color contrast on web pages. The minimum requirement is a contrast ratio of 4.5:1 between the foreground body text and the background and a contrast ratio of 3:1 for headings (criterion 1.4.3), while the enhanced criterion (1.4.6) specifies a contrast of 7:1 for body text and 4.5:1 for headings. The recommendation is mathematical, and many web developers there-fore use contrast calculators for validation. Such contrast calculators are often used when a design is finished. Moreover, the user needs to experiment through trial and error to find alternative color combinations that meet the contrast requirements. The calculators require color vectors as input, and these may be cumbersome to retrieve.

This paper therefore explores an interactive visualization tool that allows a designer to visualize the effects of a design when perceived by individuals with low vision. Moreover, if the design does not meet the contrast requirements the tool suggests corrected colors and visualizes how the design appears with these colors. The tool is in-tended to be quick and convenient to use with the aim that it is used during the design phase instead of afterwards. It is not limited to html pages as it works with design mock-ups drawn in paint programs, ordinary user interface designs, mobile interfaces as well as html-pages. The framework is intended to work alongside the designers’ preferred tools.

2 Background

The successful reading of text is affected by factors such as correct input [2,3,4] and readability [5,6,7] which especially affect individuals with dyslexia [8]. Sufficient contrast is an absolute prerequisite to perceive text visually both by human and machine [9], and visual reading is the preferred modality for individuals with working vision [10, 11]. Individuals who are diagnosed as being technically blind employ other modalities such as audio [12, 13] and haptic feedback [14]. Early work on contrast of printed text was dominated by Tinker and colleagues [15]. Later works has studied contrast on various output devices such as CRT-displays [16], LCD-displays [17] and electronic paper [18]. Issues addressed include display quality [19], color combinations [20,21,22], polarity effects [23, 24] and text size [14].

WCAG2.0 gives concrete advice on what constitute sufficient contrast. Yet, a lack of contrast is a common problem. Since WCAG2.0 became part of the legislature on universal design in Norway, the Norwegian agency that oversees these regulations has found contrast problems in many cases since official audits were introduced. One may speculate to the reasons why a lack of contrast is still a problem despite the concrete requirements and color contrast tools. One reason may be that some designers are unaware of these requirements and tools. Another explanation may be that designers forget to check for contrast compliance. More likely is that designers use their impressionistic judgement of what constitute sufficient contrast.

There have been relatively few studies on the process of selecting colors and color picking interfaces. Exceptions include the exploration of bimanual color selection [25], color-selection for image retrieval [26], the effects of various visual color representations in color pickers [27], the design of palettes for color blindness [28] and software tools for color scheme design [29, 30]. Reinecke et al. [31] described a tool to compare colors under different lighting conditions. Webster [32] pointed out that there is no support for contrast calculations in traditional color selection tools.

In our previous work [33] we explored specialized color selection palettes with built-in contrast visualizations, both for RGB-based palettes [34] and HSB-based palettes [35]. We also visualized contrast requirements in the color spaces including RGB, HSB and CIElab [36]. Recently, Tigwell et al. [37] developed a specific tool to help designers select colors that satisfies the WCAG2.0 color contrast constraints.

3 Method

Three visualizations tools are proposed herein, namely contrast filters, contrast enhancers and saturation-brightness plots. The contrast filter is used to visually assess how well information in a design is perceived by users with different levels of reduced vision. The contrast enhancer is a tool that analyses the design and proposes corrected foreground colors that satisfy the WCAG2.0 contrast requirements. Finally, the saturation-brightness plot (SB-plot), is an analysis tool for understanding color choices. Foreground and background colors are plotted in the saturation-brightness plane where “safe” areas with sufficient contrast are indicated.

3.1 Contrast Filter

An image contrast filter was built using the luminosity contrast definitions in the WCAG2.0 documentation. For each pixel in the input image the contrast with the background color is computed. If the contrast meets the requirement the original pixel color is used, otherwise the background color is used.

To determine the background color of an image it is necessary to find the color that occur the most frequently. The following algorithm was devised. The image is dived into a 3 × 3 grid and the middle section is used for analysis. This approach means that borders and other peripheral elements do not affect the result. It assumes that the central part of the image is the most important. A 3D histogram is constructed from these pixel values according to the RGB components. Since pixel colors often vary the two least significant bits are ignored. The histogram had 64 × 64 × 64 bins. Next, the histogram entry with the highest count is the background color, and the entry with the second highest count is the foreground. Finally, the average color of the pixels with this histogram entry were calculated.

Figure 1 shows the original image of a text with low contrast, and the image committed to the contrast filter a threshold of 3:1. We can just about see the contours of the letter, but we are unable to perceive the text. Figure 2 shows the filter applied to Google Maps. With a contrast threshold of 3:1 some of the text is still readable, but the subtle indication of roads are gone. With a contrast threshold of 4.5:1 the text becomes much harder to perceive, and with a contrast threshold of 7:1 all the text disappeared. Only the notification (bell icon in the top right corner) survived.

Fig. 1.
figure 1

Contrast filtering of an image with low contrast text.

Full size image
Fig. 2.
figure 2

Inspecting the contrast of Google Maps (original, 3:1, 4.5:1 and 7:1).

Full size image

Figure 3 shows the contrast filter applied to an image of a Microsoft Office color picker when choosing a white background. It is apparent which colors are contrast safe. Any type of color picker, or background color, can be used.

Fig. 3.
figure 3

Color picker: Valid colors with white background: original, 3:1, 4.5:1 and 7:1. (Color figure online)

Full size image

3.2 SB-Plots

The selected colors were plotted in the saturation-brightness plane to help designers understand their color choices, their freedom and the formal constraints. All varieties of hues are projected onto the same SB-plot. The rationale is that color choices are primarily focused around hues, and contrast adjustments are thus best performed by either adjusting the brightness or saturation. A SB-plot has two components, namely color choices and threshold regions. The horizontal axis represents brightness going from dark (left) to bright (right), and the vertical axis represents the saturation going from unsaturated (top) to saturated (bottom).

The background and foreground colors are represented using a green and red cross, respectively. Shades of grey are used to signal contrast levels where white signals invalid brightness and saturation choices in relation to the background color. Light, medium and dark grey denote contrast thresholds of 3:1, 4.5:1 and 7:1.

In addition, blue crosses indicate corrected foreground color suggestions. The corrected foreground colors were found by searching for the brightness-saturation coordinates that satisfy the given contrast thresholds yet with the shortest distance to the brightness-saturation coordinate of the background color. The foreground color is adjusted since it occupies fewer pixels. If the background color was altered the overall impression of change would be stronger. Also, fixing contrast problems in one area of the design may introduce new contrast problems elsewhere.

Figure 4 (left) shows the SB-plot for the Google Maps example in Fig. 2. Clearly, both the foreground (blue text) and the background has a high brightness, but the foreground is more saturated than the background. The foreground color is nearly meeting the contrast requirement of 3:1, but the shaded area shows that its intensity must be reduced. The less saturated the foreground color is the more the brightness needs to be reduced. Figure 4 (right) shows the SB-plot for the low-contrast text example in Fig. 1. Also, here the contrast is increased by reducing the brightness of the foreground color.

Fig. 4.
figure 4

SB-plot for Fig. 2 (left) and Fig. 1 (right). (Color figure online)

Full size image

Figure 2 shows a design containing several colors. To focus only on a color-pair, each area of interest is cropped and inserted into the tool (see Fig. 5). Figure 5 also illustrates the SB-plots for text samples based on hue contrasts. The only way to improve the contrast in the red-blue example is to increase the brightness so it matches the brightness of the foreground, which may seem counterintuitive, and to reduce the saturation. To meet the strictest contrast requirements the foreground color needs to be highly unsaturated. This example illustrates that brightness adjustments may not always be the right solution. The green-red example (right) shows that sufficient contrast is achieved by either increasing or lowering the brightness of the foreground.

Fig. 5.
figure 5

SB-plots. (Color figure online)

Full size image

3.3 Contrast Enhancer

The suggested corrected foreground color is visualized by replacing the colors of the foreground pixels with the adjusted color. To increase the realism of the visualization we do not want to adjust the colors of other foreground colors. We therefore only altered the colors of pixels that were within a certain radius of the foreground pixel. A radius was chosen by taking half the distance between the foreground color and the background color. Figure 6 illustrates the contrast enhancement in practice for three examples used here-in given the three contrast thresholds. Note that no foreground color can be found that meets the 7:1 contrast requirement for the red-green text.

Fig. 6.
figure 6

Contrast enhancement. (Color figure online)

Full size image

4 Conclusions

An approach to working with color contrasts was presented. The approach is intended to be simple and quick to use by hiding the technical details of color contrasts yet allowing the designer to rapidly and visually validate color choices. Using their native graphical tools designers can easily determine which colors on their color palette are valid. The tool thereby encourages the designers to select color combinations with sufficient contrast from the start. SB-plots are introduced to get a conceptual under-standing of the contrast problems and possible solutions which at the same time maintain the visual profile of the color scheme.

Next, contrast enhancements allow the designers to view designs with foreground colors corrected for contrast. The method is image-based and works on designs drawn in non-web design tools, screenshots of existing applications and web pages. Universal accessibility requires training [38], and the strategy presented may be used for pedagogical purposes.