Keywords

1 Introduction

Modern interaction design relies on colorful elements to comply with users’ needs. Within this context, interactive systems must be accessible to the most range of users regardless of their individual needs. This requires improving the techniques for addressing Web accessibility for color blind users. Color blindness refers to the inability to perceive certain colors in their natural representations or to make confusions between colors [2]; consequently, it frequently hampers user accessibility and usability. Existing solutions for color blindness accessibility are mostly based on the application of recoloring techniques and/or mechanisms to allow the contrast increase to help color blind users interpret colors [5]. However, these solutions are limited to perceptual aspects, i.e., they are restricted to making the colors distinguishable without taking into account the individuals’ needs and preferences as well as the context of use.

In our previous studies, we have defined a framework to enable user interfaces adaptation by considering individuals’ needs and preferences [1]. In this context, recoloring requirements play a key role for interface adaptation. Although literature has proposed several techniques for recoloring aiming to cope with color blindness visualization issues (e.g., [6, 8, 12])), it is still unknown which technique is the most suitable in face of different situations, preferences and needs. Moreover, the Web accessibility guidelines are applicable at design time [13], but they are unable to consider changes in preferences, usage contexts and other unpredictable issues that can only be properly evaluated at run-time.

Typical interaction scenarios involve several colors predefined at design time. Such scenarios frequently include various types of images and interface elements (e.g., menus, forms, tables, buttons, etc). Recoloring techniques suggest alternative colors for the original ones, resulting on a distinguishable set of colors. Nevertheless, in an interface adaptation context, users may set preferences for the given original colors by indicating their preferred colors. These colors are hardly the same ones suggested by the recoloring procedures, as well as users are only able to choose preferences to a subset of interface’ colors (e.g., images may have millions of colors). Thus, the problem is to determine the most suitable recoloring technique available according to users’ individual preferences.

In this article, we propose an algorithm to compute distance between colors adapted by the recoloring techniques and those preferred by users. Our approach takes into account the characteristics of the color blindness pathologies. We define an algorithm that given a set of original colors in a scenario and a set of users’ color preferences, it determines the most adequate recoloring technique to apply according to a color distance calculation. The algorithm explores the distance of each preferred color from the adapted ones. It considers attributes weighted distance calculations for Red, Green and Blue (RGB) values according to the type of user’s color blindness. We adopt distinct recoloring algorithms (e.g., [6, 8, 12])) and our proposal allows deciding which one to apply in a given interaction scenario.

We conducted a preliminary experimental analysis to evaluate the behavior of four recoloring techniques in the color similarity computation. Our experiment defines several scenarios with collections of colors that may cause confusion for different types of color blindness. The experimental results reveal the effectiveness of the proposed algorithm in determining the most suited recoloring techniques to different scenarios. The obtained findings indicate major advantages and limitations of the tested configurations.

The remainder of this article is organized as follows: Sect. 2 presents the foundations and related work. Afterward, we thoroughly describe the proposed and implemented algorithms for colors similarity computation (Sect. 3). Section 4 reports on the experimental analysis and the obtained empirical results. While (Sect. 5) discusses the findings, Sect. 6 wraps up the article and points out future research.

2 Foundations and Related Work

Firstly, this section introduces the recoloring algorithms approaches adopted in this work. Next, we present the related work to clarify the originality and contributions of our proposal. According to the conducted literature analysis, most of the existing recoloring algorithms are studied in the image processing area. Rasche et al. [12], for instance, proposed a technique for image adaptation that preserves the visual details by reducing the color gamut size, which originally has 3 dimensions of color space. They evaluated the technique in a controlled environment with real color blind users and verified a better identification in relation to the original image.

Some of the existing methods are applicable to specific types of color blindness. Kuhn et al. [8] defined an algorithm for automatic colors adaptation for users with dichromatism. The technique preserves the original colors, adapting only the ones not perceived by color blind users. The evaluation was performed only with users with dichromatism, even though configurations exist for the type of anomalous trichromatism. As an extension of this proposal, Kuhn [7] refined the technique to ensure global color consistency, and locally enforce luminance consistency. They aimed to preserve gray values present in the colored images.

Other investigations in literature emphasize time execution and accuracy of the algorithms. Huang et al. [6] presented a image re-coloring algorithm that maps an HSV color (Hue Saturation Value) space matrix to make its execution faster than other techniques. However, they observed a quality loss of the adapted images. Exploring the same focus, Flatla and Gutwin [3] defined an individualized color model with the aim of improving the accuracy in color adaptation of the RGB scheme. The model is based on colors calibration for a given user in a specific environment. It serves both color blind users and those with normal vision. The model was implemented in a hypothetical environment and without practical applications. Similarly, Flatla and Gutwin [4] proposed models of specific situations to capture the users’ needs regarding color differentiation. An adaptation tool was developed based on specific models and situations. Calibration is performed in controlled environments and it considers factors such as lighting and screen resolution. Their evaluation showed the difficulties involved in the calibration time.

In addition to recoloring algorithms, the existing studies in literature have also proposed color similarity measurements with the aim of calculating color differences. Moroney et al. [9] proposed a cosine based similarity metric between categorical vectors for two colors. They aimed at making more consistent the computation between color differences. Their technique allows the model of large color differences or the refinement of the basic similarity measures. Pan et al. [10] defined an algorithm that measures the degree of similarity of color vectors in the RGB color space. They applied the algorithm for the detection of bleeding in images of endoscopy exams. Their experiments evaluated the complexity time of the algorithm in such specific context. Their algorithm presented a low computational complexity compared to similar algorithms.

Although the literature has presented advances in the issues related to the adaptation of images by recoloring as well as presented techniques for color similarity, our proposal defines a novel algorithm for color similarity computation in the context of color blindness. Our method allows selecting distinct recoloring techniques according to the user preferences, besides our approach takes into account the characteristics of the color blindness pathologies for the color similarity computation. These aspects emphasize the originality of our research.

3 Colors Similarity Algorithm for Color Blindness

The proposed colors similarity algorithm determines the adaptation technique that must be applied to the interface according to an interaction context (which determines the original colors), and the user’s needs and preferences.

An interaction context (e.g., an image, or a page background) presents a set of original colors. Formally, we define it as \(CO=\{co_1, co_2,..., co_n\}\). The user can define his/her preferences via alternative colors for a set of original color. The goal is to provide a limited set of alternative colors for preferences definition. However, a large set (we can think in all colors) could be available to the user. Likewise, we assume that a preference (substitute) color is not assigned for each original color, as this could be infeasible in a context with many colors involved, e.g., a image with millions of colors.

In this study, the alternative colors come from a set of available recoloring techniques. We define CT as the set of ordered pairs of colors containing the original colors related to the colors resulting from the application of each technique, according to the color blindness type and the context. Formally, \(CT = \{(co_i, ct_1), (co_i, ct_2),..., (co_i, ct_k)\}\), such that, \(i <= n\), and n refers to the number of original colors. The recoloring techniques stand for a set defined by \(NT = \{t_1, t_2, \ldots , t_j\}\). The techniques consist of the recoloring algorithms and manual recolored interfaces proposed by designers.

When users set the preference colors in a context, they may be of different techniques. For example, for the original color \(co_1\), the user may choose the alternative color \(cp_1\) (alternative from Technique 1) as the preferred; for the original color \(co_2\), the alternative color \(cp_2\) (alternative from Technique 2) may be chosen; and for the original color \(co_3\), the user may select the alternative color \(cp_3\) (alternative from Technique 3). We define CP as the set of ordered pairs with the original colors related to the preference colors (from the alternative ones) chosen by the user for a given context. Formally, \(CP = \{(co_i, cp_1), (co_i, cp_2),..., (co_i, cp_k)\}\), such that, \(i <= n\).

Since users define their preferences based on adapted (alternative) colors from distinct techniques, the problem is to determine one of the available recoloring techniques that present the adapted colors that best fits (i.e., approximates) the user-preferred colors. To this end, our proposal computes the distance of each preferred color in a scenario from the adapted ones. It considers attributes weighted distance calculations for Red, Green and Blue (RGB) values according to the type of user’s color blindness.

figure a

We define the Algorithm 1 to the colors similarity computation. The algorithm takes as input the CO, CP, CT, NT, in addition to a default technique (denoted by \(\alpha \)), such that, \(\alpha \in NT\), and the user type of color blindness (denoted by \(\beta \)). The algorithm starts by defining the result \(\theta \) as \(\varnothing \) and assigning the highest value possible to the control variable lowest. This variable keeps the lowest similarity value computed to a given technique.

The algorithm checks whether the preferences were set by the user (line 4). If no preference is find, the result \(\theta \) remains the default input technique \(\alpha \) (line 21). Such default technique can be predefined to each distinct interaction scenario according to users’ evaluations at design time.

In case there are preferences, the algorithm computes the similarity value for each recoloring technique \(t_i \in NT\) (line 5). The goal is to determine the technique with the lowest similarity value among preferred and adapted colors. For this purpose, the variable \(T_{sim}\) is initially set to 0. The algorithm goes trough each original color \(co_i \in CO\), and accesses the preferred colors cp and adapted colors by the recoloring techniques ct. The respective functions getCP and getCT retrieve the preferred and adapted color according to the original one \(co_i\). Such procedure assures that the preferred and adapted colors refer to the same original color.

The next step refers to the similarity calculation between cp and ct (line 12). The variable \(V_{sim}\) stores the obtained value. The Algorithm 2 stands for the procedure to calculate the RGB distance between the involved colors. Since several original colors might be involved in a scenario, the \(T_{sim}\) accumulates the similarity values calculated (line 13).

After the similarity computation considering all original colors, the \(T_{sim}\) contains the resulted value for such technique \(t_i\). Thus, if the value in \(T_{sim}\) is lower than the similarity value stored in lowest (line 15), the algorithm updates the lowest with the \(T_{sim}\) value in addition to set the \(\theta \) result variable. This procedure is repeated to all available techniques in NT. The Algorithm 1 finally returns the resulted best fit (i.e., lowest color distance) technique (line 23).

The key aspect in the proposed algorithms consists of the procedure to calculate the colors distance (Algorithm 2). We adapt the proposal of [11] to consider the user’s color blindness type as weights in the color distance calculation. In Algorithm 2, the function \(Calc\_Weights\) (line 2) sets the weights according to the color blindness type (\(\beta \)) in the vector W[]. The function defines a specific weight to each primary color (RGB), since distinct color blindness types present different difficulties to detect each primary color (RGB).

figure b

Although these weights remain a parameter in our proposal (Sect. 4 reports on their effects via experiments), we assume that a lower weight might be assigned for the primary color that the user has difficulty. For instance, a lower weight is assigned to the red primary color (R) for those users suffering with the Protan color blindness type. The weight values ranges in [0–1] and sum up 1.

In order to calculate the colors’ distance (line 3), the Algorithm 2 extracts the primary colors RGB from the hexadecimal code of the color. For example, the function Red(ct) extracts the red color from the ct. The function \(\varGamma \) is responsible for converting the hexadecimal code of the colors to decimal.

The algorithm repeats the same procedure for the three primary colors. The primary red color from the adapted color is subtracted from the value of the primary red color of the preferred color. This subtraction is raised to the square and multiplied by the specific weight of the red color W[r], such that, r stands for the vector index of the red weight. The same procedure occurs for the green and blue primary colors. The algorithm sums up the results of the three primary colors. Finally, it calculates the square root of this result and obtains the similarity value between the user’s preferred color and the adapted color (from the recoloring technique). The variable \(\sigma \) stores the result, which is the Algorithm 2 output.

In case the context is a image, the chosen recoloring technique is executed to the image. When the context is composed by Web page elements, such as bottoms, the adaptation procedure explores indirectly the colors from the image recoloring algorithms. These are applied to the values referring to colors in Cascading Style Sheets (CSS), changing the colors of those elements in the interface. After the technique application, the adapted interface is made available (rendered by the browser).

4 Experimental Analyses

We assessed the effectiveness of our approach on several scenarios and configurations relying on different recoloring techniques. The goal is to show the efficacy of the algorithm in the selection of the adaptation technique best suited to distinct scenarios and preferences.

4.1 Subjects and Procedure

Our goal is to test the algorithm with different weight values and evaluate the obtained results with users in scenarios of map visualization, which often have accessibility problems in real life. We started this study by defining two distinct interaction scenarios that may cause confusion to different types of color blindness. In particular, we used a colored Brazilian map imageFootnote 1. The map corresponds to the risk of dengue fever in Brazil. In the scenario 1, the map was colored with colors not optimal to the Deuteranopia type of color blindness (cf. Fig. 1a), and in the scenario 2, the colors used should cause confusion to a user with Protanopia.

We invited two users to participate in the evaluation procedure. The first user (\(User_1\)) refers to a color blind person with Deuteranopia, a computer scientist with 35 years-old; the second involved (\(User_2\)) a user with normal vision, a geographer with 31 years-old, in which, the Protanopia is simulated in our tests. Both participants present a high level of familiarity with computers. Based on the defined scenarios, the first task of the participants was to assign their preferred colors based on the map images presented to them.

Relying on the original image of the scenarios and the preferred colors selected by the users, we considered three configurations exploring four techniques to run the experiments. Regarding the configurations, we first applied the algorithm without considering the weights of RGB (\(Cf_1\)). Afterwards, the second configuration (\(Cf_2\)) assigned the lowest weight for the problematic color according to the color blindness type. For the Deuteranopia, the G (green) value received the lower value, while for the Protanopia, it was the R (red) one. To analyze the influence of the weights, in the third configuration (\(Cf_3\)) the problematic colors received the highest weight value in the algorithm execution. In our experiments, we used three recoloring algorithms, defined as \(A_1\) [12], \(A_2\) [8] and \(A_3\) [6]. The fourth technique refereed to a manual defined image map created by a designer \(A_M\).

After analyzing the similarity values outcome, we selected one adapted image for each scenario and involved the participants to evaluate them compared to the original map image (cf. Fig. 1b for scenario 1). We considered the technique that reach the lowest similarity value to choose the adapted image. In particular, the users judged two aspects based on the recolored images. Firstly, they evaluated to which extent the adapted image is better or worst with respect to information identification than the original one. The second question inquired to which extent the adapted image remains better or worst regarding the aesthetics compared to the original one. To this end, the participants should select a likert scale bar ranging from −5 to +5, where the smaller the number, the worse the relation is and the bigger the better; the 0 scale (middle of the bar) stands for neutral evaluation regarding the compared images.

Fig. 1.
figure 1

Colored map used in the evaluation of scenario 1 regarding the Deuteranopia type of color blindness. Figure 1a presents the original image and Fig. 1b shows the resulted adapted image using the technique [6]. (Color figure online)

Full size image

4.2 Results

Table 1 presents the achieved results for the Deuteranopia color blindness type. The table presents the weight values tested in the three configurations and the obtained similarity results. For the three configurations, the technique \(A_3\) (Huang) obtained the lowest similarity value. The remaining techniques followed the same order in all configurations tested. The \(A_M\) (Manual) achieved the highest similarity value revealing as the last option for the adaptation in this scenario. The fact that regardless the configuration the same technique appeared with the lowest similarity value can be explained by several aspects including the number of preferred colors used, their choices, as well as the number of available recoloring techniques to apply. This is further discussed in the next section.

Table 1. Results of similarity values for the color blindness type \(\beta \) = Deuteranopia. Three configurations considered with the respective weight values. \(T_{Sim}\) refers to the similarity value.
Full size table

Table 2 presents the achieved results for the Protanopia color blindness type. These results diverge from those presented at Table 1. First, the recoloring technique that appears with the lowest similarity value differs from the Deuteranopia scenario. Second, the order of the techniques regarding the \(T_{sim}\) changes from one configuration to other. The \(A_M\) (Manual) appears as the second option in two configurations, which differs from results obtained for the Deuteranopia scenario. Here, regardless the weight values, the algorithm \(A_2\) (Kuhn) presents the lowest similarity value.

Table 2. Results of similarity values for the color blindness type \(\beta \) = Protanopia. Three configurations considered with the respective weight values. \(T_{Sim}\) refers to the simililarity value.
Full size table

Table 3 presents the findings regarding the participants evaluation of the adapted images compared to the original. For the scenario 1, the image adapted with \(A_3\) (Huang) was used, while for the scenario 2, we used the adapted image by \(A_2\) (Kuhn). Results point out positive judgments for both identification of information and aesthetics. While \(User_1\) assigned that identification of information showed slightly convincing than aesthetics, the \(User_2\) evaluated both at the same level.

Table 3. Results of participants’ judgments regarding information identification and aesthetics. The values correspond to the likert scale answer.
Full size table

5 Discussion

The experimental results show that the proposed color similarity algorithm is able to select a different technique according to the users’ preferences. In the first scenario, the Huang’s technique produced adapted colors closer (in terms of color distance) to the preferences of the user with Deuteranopia. In the second scenario, Kuhn’s technique produced the best results for the preferences of the second user. This indicates that our proposal enables selecting the best suitable technique for each specific user, instead of choosing a unique technique for all users and contexts, indifferently.

The results revealed that the parameters regarding weighted colors presented had minor effects on the choice of the techniques. That is, the users selected preferred colors, which impose a big difference in the calculation of the distance for each technique. Consequently, the weight parameters have not enough influence to change the technique order according to the obtained similarity results. The exception was the second configuration of Table 2 that produced a different order than the first and the third configurations. This indicates that if further recoloring algorithms are available, specially when they present closer results, the weighted parameters can be decisive for the choice. Moreover, our proposal reuses characteristics from existing recoloring techniques and remains extensible to additional recoloring algorithms.

As Table 3 shows, in both scenarios, the chosen techniques obtained good results on the likert scale. The information identification aspect received better values than the aesthetic one. It is important to note, except for manual adaptation, the recoloring techniques do not take into account aesthetic arguments in the color adaptation. Their design was predominant to guarantee a good visualization of the image results. Thus, this investigation concludes that our proposed algorithm produced acceptable results in providing recoloring adaptation of users’ interface in the studied scenarios.

Although this study presented several benefits, the study has limitations in terms of size (number of users) and scope (context of use). We only analyzed the feedbacks of two users in the same context of use, i.e., interacting with maps. Extensions of this study may include a bigger number of users with various profiles and different color blindness types. We might explore various types of images and web interface elements (e.g., buttons, tables, formulates and menus).

Despite the limitations, the study served the purpose of demonstrating the execution of the proposed algorithm. We collected users’ impressions about its results, by showing the feasibility and potentialities of the proposal. A study with strong statistical validity would require long-term and costly field studies, including a large number of users and the development of systems using the proposed algorithm. We judge this is out of the scope of this paper, which focused on presenting a novel algorithm.

The results also demonstrated open questions to be investigated in further researches. Firstly, the application of the weighted color parameters must be inquired in details. We judge the investigation of one plausible hypothesis the possibility of users selecting the preferred colors according to their types of color blindness. This can make the weight parameters less relevant to the algorithm choice output. We consider relevant to investigate how to articulate the use of our defined approach with other aspects including: (1) the modeling of the knowledge about the context of use; (2) the characteristics of the recoloring techniques; and (3) the types of color blindness.

A potential future work refers to the integration of this proposal in a framework that enables the effective and efficient development of real applications that make use of colors similarity computation. This includes problems related to platform interoperability, performance, security, among other issues that must be analyzed when use in large scale is prompted. Future studies also include the users’ willingness to choose preferred colors as well as the usability aspects of the interface that allows the choice of colors.

6 Conclusion

Color blind users face several difficulties when interacting with the Web. These difficulties include, for instance, the identification of relevant information on colored maps and the use of Web interface elements. The literature proposes approaches for improving the accessibility for color blind users, by involving design methods and image recoloring techniques. However, the majority of the existing solutions are restricted to specific situations or types of use. They fail in not taking into account the individual users’ needs and preferences. We investigated an approach to choose the recoloring adaptation technique that best fit the users’ need and preferences in a given interaction scenario. This article presented an algorithm for calculating colors similarities, which selects the recoloring technique that most closely approximates to the colors preferred by the user. Experimental analysis with two real-users illustrated the execution and results from the algorithm in practice. Our findings highlighted the potentialities and limitations of the proposed approach. Further research involves to develop a framework that explore the colors similarity algorithm with structures that represents the knowledge of the domain. Future work also includes field studies and detailed laboratory experiments.