# Automated Image-Based User Interface Color Theme Generation
## 4 Model Framework and Architecture
### Selecting Color Candidates
To increase the contrast, the model first tries to modify the lightness of the background color--increasing it in a light mode and decreasing it in a dark mode--until the desired contrast is achieved or the background color reaches the boundary of the sRGB color gamut (Algorithm 5). If adjusting the lightness of the background color does not lead to the desired contrast, the lightness of the specified color is gradually adjusted. If changing a color's lightness places them outside the sRGB color gamut, they are mapped to the boundary of the color space along the chroma path. To calculate the contrast, we have used an equation outlined by the World Wide Web Consortium (W3C) within the Web Content Accessibility Guidelines (WCAG) 2.1 [49]:

\[C=\frac{L_{1}+0.05}{L_{2}+0.05} \tag{4}\]

where \(L_{1}\) and \(L_{2}\) are relative lightness values calculated as:

\[L=0.2126\times R^{\prime}+0.7152\times G^{\prime}+0.0722\times B^{\prime} \tag{5}\]

Values \(R^{\prime}\), \(G^{\prime}\), \(B^{\prime}\) are calculated as:

\[ \begin{split} R^{\prime}&=\left\{\begin{matrix}R \ /12.92&R\ \leq 0.03928\\ \left(\left(R+0.055\right)/1.055\right)^{24}&\text{ \ \ otherwise}\end{matrix}\right\}\\ G^{\prime}&=\left\{\begin{matrix}G\ /12.92&G\ \leq 0.03928\\ \left(\left(G+0.055\right)/1.055\right)^{24}&\text{ \ \ otherwise}\end{matrix}\right\}\\ R^{\prime}&=\left\{\begin{matrix}B\ /12.92&B\ \leq 0.03928\\ \left(\left(B+0.055\right)/1.055\right)^{24}&\text{ \ \ otherwise}\end{matrix}\right\}\end{split}  \tag{6}\]

where \(R\), \(G\), \(B\) are color values in the sRGB color space, normalized between 0 and 1. The user can choose between two contrast levels defined by the WCAG (AA, AAA) or turn off contrast adjustments. For the more stringent AAA level, the contrast between the specified color and the background must be at least 7:1, while the AA level requires a contrast of 4.5:1. Figure 5: Color themes computed with different options for color harmony adjustment: off (**left**), monochromatic (**middle**), and analogous (**right**). ```
functionincreaseContrast(\(c\), \(bg\), target) \(d\leftarrow\)contrast(\(c\).J, \(bg\).J) \(gamut\leftarrow\)true while\(d\leq\) targetdo \(J_{1}\gets c\).J \(J_{2}\gets b\).J if gamutthen if\(J_{2}\geq J_{1}\)then else \(J_{2}\gets J_{2}-1\) endif if\(J_{2}<0\ \vee J_{2}>100\)then \(gamut\leftarrow\) false else \(bg\).J \(J_{2}\) \(bg\gets colorMapping(bg)\) endif if\(J_{1}\geq J_{2}\)then \(J_{1}\gets J_{1}+1\) else \(J_{1}\gets J_{1}-1\) endif \(c\).J \(J_{1}\) \(c\leftarrow\) colorMapping(\(c\)) endif \(d\leftarrow\)contrast(\(c\).J, \(bg\).J) endwhile return\(c\), \(bg\) endfunction
```
**Algorithm 5** Contrast enhancement

Since the secondary color is also used to differentiate interactive elements, it must be sufficiently different from the tertiary color. Therefore, the model utilizes a function to increase the difference between these two colors. As can be seen from Algorithm 6, the model initially attempts to increase the difference between the colors by gradually modifying the lightness of the most contrasting color according to the preferred mode. If this does not achieve the desired difference, it progressively adjusts the lightness of the less contrasting color. By default, the color difference between these colors should be at least 5 units, nevertheless, the user can modify this value in the model settings. If changing the brightness of color causes it to be outside of the sRGB color gamut, it is mapped to the boundary by reducing its chromaticity--moved along the chroma path.