Towards Effective Visual Communication with Positive user Experience: High Contrast and Visibility vs. user-Friendliness/Positive Perception

Proper contrast used for elements within websites or applications is one of the key factors providing their visibility and ability to attract user attention. While usability guidelines and standards such as WCAG 1 assume the existence of minimal contrast for optimum user experience, maximal contrast for positive user experience has not been deﬁned. Recent studies showed that too high a contrast can be harmful for user experience, while visibility is reduced if it is too low. In the present study, experiments were performed to examine the level of user-friendliness and visibility for selected color pairs. We calculated the color contrast according to the WCAG standard. As a result, it was possible to ﬁnd color combinations not necessarily with a high contrast but delivering visibility and not diminishing user experience. Finally, a ColoUR Picker Tool was developed that supports designers in the design of effective visual communication, which is understood as searching for a balance between user-friendliness, visibility, and color contrast. Research expands current efforts towards effective web design and increased user experience.


Introduction
Graphical components within online applications, mobile apps, or other computer systems are often used to impact user behavior, deliver messages, or attract attention for other purposes. They can be used for online marketing activity in the form of visual advertisements, as a call-to-action components, as well as elements of user interfaces. One goal can be motivating the user to perform the desired actions 2 . Effects such as habituation-based banner blindness 3 or change blindness 4 negatively affect the performance of visual communication due to problems noticing messages. Designers often increase the visual intensity of elements within websites to attract user attention, and this can lead to a decline in user experience and even loss of users 5,6 . Intensive content makes searching for information difficult and increases users' cognitive load, inducing frustration and other negative emotions 7 . From another point of view, visual components with low visibility will fail to deliver messages or initiate assumed actions. For effective communication, it is important to determine the point at which the conversion rate represented by the number of acquired interactions relative to the number of visitors is maximized while influence is minimized to reduce adverse impacts 8 .
To achieve the above goals, non-invasive attention-catching techniques can direct attention to a specific section of the website 9 . It is important to identify entry points within the website and salient areas for attracting the user's visual attention 10 . Habituation effects can be overcome by altering the type, magnitude, or schedule of a stimulus within a website 11 . One strategy to design effective visual messages is to use an appropriate contrast-based color combination 12 . As has been shown, contrast can influence behavioral intentions 13 .
In general, contrast is connected to visual system sensitivity because of the differences between viewed stimulus 14 . There are many possible definitions of contrast, wherein some include color, and others do not. Such a multiplicity of contrast notions is extremely inconvenient; various definitions of contrast are used in different situations. The most famous contrast definitions are known as Weber contrast 15 , Michelson contrast 16 , and RMS contrast 17 . In this article, we needed a formula for contrast between two colors. The contrast between the background and the foreground was investigated in the visual communication area of a website. Therefore, we used the color contrast formula recommended as per the WCAG standard 1 . According to these suggestions, an appropriate contrast between text and background eases, and for some users allows for, the reading of information contained on websites. The mathematical formula to calculate the contrast ratio between two colors uses the "relative luminance", which is defined as the relative brightness of any point in a colorspace, normalized to 0 for the darkest black and 1 for the brightest white 1 . In each group of color combinations adjusted by contrast between used colors, the combination attracting user attention can be determined along with visible but irritating combinations. There are other possible combinations that deliver too low a visibility to be considered effective. Therefore, it is worth noting that a proper selection of contrast is an important part of the design of informative messages within websites, advertisements, and headers with call-to-action buttons.
Most guidelines and standards for designers suggest a usage of contrast with a minimal value, but maximal values are not discussed. Recent studies showed that high contrasts may negatively affect the user experience of reading 18 and can even be perceived as intrusive. Experiments based on configurations of contrast for best and worst experiences showed that a maximal contrast ratio with a value of 21 was selected as the worst setup. With bright colors and a high contrast, user experience can be lowered. The need to search for maximal contrast values has been emphasized. Another study showed that a high contrast can be effective for user interfaces, but for longer contact during reading, it can result in negative experiences 19 . Apart from a low user experience, the wrong selection of contrast can also lead to cybersickness 20 . Furthermore, too low a contrast within messages can result in low visibility and problems with message delivery. Both situations, with a focus on used color combinations, are depicted in Figure 1 (Case 1 and Case 2), where too high a visual intensity leads to user frustration, irritation, or weariness, while too low a visibility delivers low response. During the marketing process, Case 1 and Case 2 will not generate beneficial interactions. A comfortable situation for a user takes place when a balance between contrast, user-friendliness, and visibility is established ( Figure 1: Case 3). The approach proposed in this study makes it possible to search for properly adjusted combinations of colors taking into account their contrasts thanks to the use of ColoUR DB (Color User Response Database) created during perceptual experiments.

Figure 1.
A designer without additional support may fall under one of two cases: selected colors may have a visual intensity that is too high (Case 1) or too low (Case 2). In Case 1, colors cause irritation, frustration, and irritability, which leads to over-stimulation. In Case 2, the colors calm the user down, visibility is decreased, experiences and emotions are subdued, reading visual message requires little effort, and visual message is virtually forgotten by the user. Our research focused on the development of Case 3, in which the balance between the user-friendliness, visibility, and contrast of colors is property adjusted. Data collected during the experiment were entered into a knowledge database called ColoUR DB (Color User Response Database). We used the results to develop a user-friendly color ranking and implement a tool for designers that we called the ColoUR Picker Tool ( Figure 6).
Research questions have arisen regarding what contrast within web elements will attract user attention without negatively affecting user experience. What is the best way to keep the lowest possible contrast while acquiring acceptable results in terms of user-friendliness and readability? The motivation for this study was the overwhelming problem of correctly selecting colors on websites or on other visual components, which, if not solved, can result in a reduction in the effectiveness of information transfer. Therefore, we propose an approach for detecting the optimal visual intensity resulting in user-friendly and visible messages based on a selection of contrasts between primary and secondary colors, where the primary color is the fixed color of the visual message and the secondary color is the complementary color. Primary and secondary colors can be in the background, in images, in pictograms, in text, etc. The proposed approach makes it possible to find a balance between user experience and 2/11 visual intensity. The overall results presented in detail in the Results section showed that it is possible to maintain a low contrast and still effectively deliver messages in a user-friendly manner.

Results
The following section discusses results from a perceptual experiment with the main goal to analyze human preferences that are related more to the contrast between colors then to the color itself. We would like to identify the color connections that humans pay most attention to in a positive manner. The selected colors should bring an awareness to the content but without irritation or weariness. For the collected data, the perceptual experiment was conducted based on the forced-choice procedure according to 21 . The procedure is described in more detail in the Methods section. To avoid ambiguities, we created a consistent naming convention for all subsequent sections, described below.

Characteristics of the stimulus and experiment conditions
In order to find the most eye-catching but user-friendly pairs of colors, 72 images were prepared as follows: for each of the analyzed colors (black, gray, green, blue, violet, red, orange, yellow, and white), one color was fixed as primary (and set as a background or a pictogram), and the second color for each generated pictogram was chosen from the set of remaining colors and called the secondary color. We used it as opposed to the primary color as a pictogram or a background, respectively. Example images with a black primary color are depicted in Figure 2. The choice of colors for the experiment is presented in the Methods section.

Figure 2.
The example test images used in the experiment. In the figure, the images were composed from a 'black' color set as primary for the background (top row) and for the pictogram (bottom row), and the remaining colors (blue, grey, green, orange, red, violet, white, and yellow) were set as secondary colors. We assume that the effect of contrast between two colors does not depend on whether they are used as the background or pictogram.
The experiment was conducted by 35 naive observers who were confirmed to have normal or corrected-to-normal vision. The age of the observers ranged between 20 and 68. For additional reliability, each observer repeated each experiment three times, but no two repetitions took place on the same day in order to reduce the learning effect. According to 22 , collecting 30-60 repetitions per condition is sufficient. By condition we understand two matched colors (pictogram and background) represented by a pair of objects.
The images are shown on a 50% gray background. The same background was used for the intervals between displayed pairs of images. The experiment was conducted on a Microsoft Surface Pro 4 computer with a 12 inch display that was calibrated with X-Rite i1 Publish Pro 2. For comparison, only images with the same primary color were taken (see Figure 3). This enables reliable comparisons by users, as introducing more than three colors (one primary and two secondary) would make the experiment difficult to conduct or even lead to inconsistent results.

User-friendliness and visibility evaluation with rankings
To stabilize the results between images given for the same primary color, the analysis was performed on the scores that were computed for every primary color separately (standardization). Different people are likely to use different adjectives when rating images, resulting in a different scale being associated with each observer. The easiest way to unify the scales across observers, and thus make their data comparable, is to apply a linear transformation that makes the mean and the standard deviation equal for all observers. The result of such a transformation is called the z-score (see Eq. 1).
In our test we did not have a reference image nor Likert scale, so we used a modification of the approach and used only standard deviation σ i that was computed as usual across all images for a given primary color rated by an i-th observer. The mean value of votes was ignored. The method is dedicated to a small number of measurements. The higher the value of the scores, the more eye-catching and user-friendly image is.
After standardization, data were normalized, which enabled an easier comparison of the results. The results for every primary color are depicted in Figure 4b. Every plot contains the color ranking arranged according to the four user-friendliness and visibility ranges: < 0; 0.25), < 0.25; 0.5), < 0.5; 0.75), and < 0.75; 1 >. To compare the results with the typical approach given by the WCAG standard 1 , contrast values were normalized as well and are displayed for the same color pairs.
During the experiment, users evaluated colors within nine primary colors: black, gray, green, blue, violet, red, orange, yellow, and white. Each primary color was fixed as a background or pictogram, as shown in Figure 2. The goal was to investigate whether a change (negative) in the primary color influences the user assessment of user-friendliness and visibility. Experiment results analysis showed that users did not see much difference between the primary color as a background and the primary color as a pictogram. For the same primary and secondary color pairs, where primary color was either a background or a pictogram, the average difference between user responses was 0.11. Therefore, values can be averaged. It can be assumed that we have primary and secondary colors, where the primary color can be either a background or a pictogram.
The schema of the research procedure is depicted in Figure 4a. The procedure consisted of five steps. The first step was to carry out the experiment with users according to the procedure described in the beginning of this section. The experiment was carried out in controlled laboratory conditions on a group of 41 users. Users were tasked with selecting color pairs, which according to their perception were more user-friendly and allowed them to easily read messages. The experiment was repeated three times for each user. The collected data were subjected to statistical analysis, including standardization and normalization. This enabled their comparison and drawing objective conclusions. Afterwards, ColoUR DB was created. ColoUR DB contains data on preferences for the user-friendliness and visibility of primary and secondary colors. In addition, color contrast was calculated for each color pair according to the WCAG 1 recommendation. The procedure for calculating the color contrast is described in the Methods section. ColoUR DB allows one to group colors in terms of user-friendliness, visibility, and color contrast and to create a color ranking within each primary color. The color ranking shows the values of user-friendliness, visibility, and contrast that each color pair has achieved. Finally, as the research result, we developed the tool for designers-the ColoUR Picker Tool.
The color ranking shown in Figure 4b is the main result of the performed research. The color ranking is ordered by user-friendliness and visibility based on user response. Results are presented for primary colors A through I, linked to a set of secondary colors (X axis). All data have been normalized and divided into four ranges with division values 0, 0.25, 0.75, and 1 (Y axis). In the range <0; 0.25), there are pairs of primary and secondary colors rated by users as the least user-friendly and visible. In the range <0.75; 1), there are pairs of primary and secondary colors rated by users as the most user-friendly and visible. Each pair of primary and secondary colors has two values: user-friendliness and visibility (pink plot) and contrast (black plot). Discrete values are connected by a line for better data visualization. The ranking for user-friendly and visible colors does not always match that of color contrast. Primary and secondary color pairs having the highest contrast coefficients were not rated highest by users in terms of user-friendliness and visibility: see Cases C, D, E, F, H, or I in Fig. 4b. On the other hand, primary and secondary color pairs with the lowest contrast coefficient reached a high level of user-friendliness and visibility, e.g., D: Green-White; A: Black-Blue.
In Figure 5a, a visualization of all the color pairs involved in the experiment is presented. They have been divided into four ranges according to the color ranking: <0; 0.25), <0.25; 0.5), <0.5; 0.75), and <0.75; 1>. The <0.75; 1> range shows the most user-friendly and visible colors according to user responses. Each square shows a combination of a primary color (border) and a secondary color (fill). Dot markings mean that the color pair reached the contrast level required by the WCAG; two dots mean an AA level, and three dots mean an AAA level. The absence of a dot means that the colors have not reached the required WCAG level. Most of the color pairs that meet the WCAG requirements have also been found to be user-friendly and visible. However, a long viewing of contrasting colors can negatively affect the user. It can cause fatigue, irritation, and a  On the X axis, there is a set of secondary colors. The Y axis represents the normalized values obtained in the experiment. Each graph shows two plots. The first one (pink) shows the user-friendliness and visibility of color pairs-primary and secondary colors. The data come from the users' responses obtained during the experiment presented in the Results section. The second one (black) shows the contrast calculation for the same color pairs. Contrast was determined according to the WCAG 1 standard presented in the Methods section.

5/11
negative perception of the news. It is worth looking at other pairs of colors (also in other ranges) that are user-friendly and equally visible to the user. The density of the color arrangement in the individual color's user-friendliness and visibility range as well as the contrast levels are shown in Figure 5. Fifty percent of all color pairs did not meet the WCAG standard. The remaining color pairs are spread by 25% for the AA and AAA levels. This may mean that the designer, guided by the contrast, has a very small selection of colors. When analyzing the distribution of colors for user-friendliness and visibility, almost 50% of all color pairs are in the last range, <0.75; 1>. Four percent of all color pairs are in the range <0; 0.25>. The remaining color pairs are evenly distributed in the ranges <0.25; 0.5) and <0.5; 0.75).
(a) (b) shows what the color distribution looks like in individual ranges. The first range shows colors that have been assessed by users as the least user-friendly and visible. Colors recognized by users as the best in terms of user-friendliness and visibility can be found in the fourth range. Each square shows a combination of a primary color (border) and a secondary color (fill). Dots markings mean that the color pair reached the contrast level required by the WCAG; two dots mean the AA level, and three dots mean the AAA level.

ColoUR Picker Tool and ColoUR DB
The research results were implemented as a tool for designers-the ColoUR Picker Tool, an application that runs in a web browser environment. The Chrome browser is recommended. The ColoUR Picker Tool allows you to select primary and secondary colors from the color wheel, set the primary color as a background or a pictogram, and visualize the remaining colors as pictograms, background, or text. Figure 6 shows example screens and the sample selection process. The results are displayed to the designer in the form of a color ranking and a user-friendliness, visibility, and contrast index. The ColoUR Picker Tool retrieves data from ColoUR DB acquired earlier during the perceptual experiment. ColoUR DB contains 72 combinations of primary and secondary colors. There are two metrics for each color pair: the contrast calculation and the user-friendliness with visibility from user responses. Normalized data is displayed on a scale from 0 to 100% for each metric. The ColoUR Picker Tool is available on Github-https://visual-communication.github.io/ColoUR-Picker.

Discussion
Among the best combinations in terms of user-friendliness and visibility, a large number contains neutral colors. Combinations of primary colors with white are the highest in the rankings (Figure 4b: A, B, E, F, G). Next in user-friendliness and visibility rankings are combinations of primary colors with black (Figure 4b: D, E, H, I). There were surprisingly low user ratings when the secondary color was gray. In most of the sets, combinations with this color were perceived as not very user-friendly or visible (Figure 4b: A, B, E, F, G).
Combinations of warm and cold colors were deemed user-friendly and visible. Warm colors include red, orange and yellow, and cold colors include green, blue, and violet. In the range <0.75;1>, which contains the most user-friendly and visible 6/11 Figure 6. Research results were made available as the ColoUR Picker Tool. On the left side, the color wheel allows one to choose primary and secondary colors. On the right side, one can see a graphical presentation of research for the selected color pair. Rankings from user responses show the scale of user-friendliness and visibility for the selected color pair. The user can see how color pairs rank from low to high in terms of user-friendliness and visibility. Color visualization can be toggled by assigning a primary color to the background or foreground. Below is an index for contrast, user-friendliness, and visibility. The contrast was calculated according to recommendations of the WCAG standard. The user-friendliness and visibility of the color sets were experimentally tested on a group of users. A case study was followed. (A) In the first step, one chooses green as the primary color. On the right side, the user can see how the green color matches other colors. Color matches rank from lowest to highest in terms of user-friendliness and visibility. A picture and text preview are shown. Statistics are presented below for the best color match by default. There is a contrast calculation as well as user-friendliness and visibility based on users' responses. In this case, for a green-blue color pair, the level of user-friendliness and visibility is much higher than the calculated contrast indicates. (B) In the previous step, the primary green color assigned to the background was visualized. Now what the presented colors look like when the green primary color is assigned to the foreground is shown. For this purpose, we switch the view from the background to the foreground. (C) In this step, the most important part of the research can be seen. By choosing an appropriate secondary color, the contrast, user-friendliness and visibility can be known for the chosen color set. One or more secondary colors can be selected. ColoUR Picker Tool is available on Github-https://visual-communication.github.io/ColoUR-Picker colors, most are combinations of a warm and cold color. Interestingly, two pairs in this range are combinations of two warm colors: Orange-Yellow and Red-Yellow (Figure 5a.) For the user-friendliness and visibility ranges, primary and secondary color pairs with their reverses can be found (Figure 5a.) In the <0;0.25) range, such pairs include Blue-Violet (primary and secondary) and Violet-Blue (primary and secondary). In the <0.25;0.5) range, there are five such pairs, e.g., Blue-Gray, Gray-Orange, and Green-Yellow. In the <0.5;0.75) range, there are three such pairs, and in the <0.75;1> range, there are 13. It can be assumed that these color pairs are universal regardless of the context and type of design.
The results show that visibility goals can be achieved together with user-friendliness and elements with not too high a contrast. For selected pairs of colors, even a low and medium contrast delivers a positive experience together with visual performance ( Figure 5). Avoiding high contrast is justified according to earlier studies and by the fact that current guidelines assume only the lowest contrast, despite the fact that too high a contrast can be perceived as intrusive 18 . Too high a contrast can especially negatively affect user experience during reading or during longer contact with the content. Elements of the user interface can be highlighted to increase visibility contact longer than 15 min, while high contrast content can result in negative experience 19 . Reducing contrast while maintaining an informative function is also important due to the possible cybersickness consequences of the high contrast used 20 .
Research application: The research has applications in broadly understood visual messaging, e.g., graphical interfaces (web, desktop, and mobile), printing, advertising products (printed and digital), web design, and graphic component design, e.g., banners, advertisements, menus, icons/pictograms, and forms, wherever a designer is faced with the decision of a choice of colors that, on the one hand, must attract attention to a specific project areas and, on the other hand, must be user-friendly, visible, and well composed with the entire project. Let's look at specific use cases: • A website accent color is imposed on the designer, e.g., Blue. If one seeks to design the appearance of text and menu icons, they can set the primary color to blue and, using our research, choose a matching secondary color. They can further achieve a strong contrast, user-friendliness, or visibility effect or perhaps all three of these.
• Visual messages on pages are often blinding, with high amounts of red. The designer can choose red as a primary color and match a secondary color so that the message is visible but less contrasting. Thanks to this, the message will be more user-friendly, and the user will be able to read all content.
• In a brand book, a logotype is presented in various color versions.

Methods
The study has been approved by Bioethics Committee Agreement no KB-0012/24/2020, Bioethical Commission of Pomeranian Medical University, Szczecin -09.03.2020. The authors confirm that all experiments were performed in accordance with relevant guidelines and regulations. All analyzed data were fully anonymized. Before the experiment the participants provided informed written consent to have data from the perceptual experiment used in research. Informed consent was obtained from all participants.

Screening Observers
The observers may have reported implausible impression scores because they misunderstood the experiment instruction, or did not engage in the task and gave random answers. If the number of participants is low, it is easy to spot unreliable observers by inspecting the plots. However, when the number of observers is very high or it is difficult to scrutinize the plots, the ITU-R.REC.BT.500 standard, Annex 2.3.1, provides a numerical screening procedure. The procedure involves counting the number of trials in which an observer's result lies outside the +/ − 2 standard deviation range and rejecting those observers for whom a) more than 5% of the trials are outside that range and b) the trials outside that range are evenly distributed so that the absolute difference between the counts of trials exceeding the lower and the upper bound of that range is not more than 30%. We performed this procedure on our data and found that four participants needed to be removed. A large font size means at least 18 points or, in the case of bold text, 14 points. A contrast coefficient of 1:1 is the worst contrast of white text on a white background (or, the best contrast is black text on a white background, and its coefficient is 21:1.

Contrast calculation
The WCAG standard defines contrast using a numerical approach as a ratio between the luminance (brightness) components of two colors, calculated based on their RGB components. It is calculated using the following procedure: Step 1. Measure the relative luminance of each letter (unless they are all uniform) using the formula: Step 2. Measure the relative luminance of background pixels immediately next to the letter using the same formula.
Step 3. Calculate the contrast ratio using the following formula: (L1 + 0.05) ÷ (L2 + 0.05), where L1 is the relative luminance of the lighter foreground or background color, and L2 is the relative luminance of the darker foreground or background color.
Step 4. Check that the contrast ratio is equal to or greater than 7:1 It is also possible to use Color Contrast Analyser software recommended by WCAG (https://www.tpgi.com/color-contrastchecker).

Choice of colors for the experiment
Color theory encompasses a multitude of definitions, concepts, and design applications. There are basic categories of color theory that are logical and useful: the color wheel, color harmony, color contrast, the context of how colors are used, etc. When choosing colors for the experiment, we abided by the following rules: • a low number of colors (a maximum of 10). Too many variants would affect the user's perception and the course of the experiment.
• neutral color inclusion: white, black, and gray. They serve a calming and reassuring role in web design.
• saturated colors, which are most often chosen as eye-catching elements on a website.
By analyzing trends and design patterns for websites published on awwwards.com or colormatters.com, one can see that there is a "Vibrant Colors Modulated by Neutral" trend, according to which basic, saturated colors as the main elements of websites are used increasingly often, e.g. in advertisements, slogans, menu, and buttons. They are combined with neutral colors to soften them and increase visibility.
We have based our choice on the traditional color wheel, also known as the Isaac Newton (1666) circular diagram, which was the basis for much later research and many systems and theories. In one variant, the color wheel can be divided into three parts, which consist of the primary colors red, yellow, and blue. Mixing these colors creates the secondary colors orange, green, and purple. Finally, we based the experiment on nine colors: red, yellow, blue, orange, green, purple, black, gray, and white.

Experimental method
Our approach is based on perceptual experiments. To identify colors that match in the most noticeable way, we introduced forced-choice metrics. Below we explained the procedure we used.
In ordering by the forced-choice pairwise comparison procedure, the observers are shown a pair of images (of the same scene) corresponding to different conditions and are asked to indicate the more eye-catching image (see Fig. 3). Observers are always forced to choose one image, even if they see no difference between them (hence the name "forced-choice"). There is no time constraint within which one must make their decision. The method is popular, but is highly tedious if a large number of conditions need to be compared. However, as reported in 22 , it results in the smallest measurement variance and thus produces the most accurate results.