Background
The current color used to highlighted text is not contrasted enough on the page's background either when, either when unselected and selected. At the moment, the highlighted text is using opacity, which makes the color even less contrasted on the background.
 | Checks and Suggestions combined in a page |
 | This issue is particularly pronounced with the duplicate links suggestion |
We need to find possible solutions to make the highlighted text more contrasted on the page's background without losing the accessibility contrast for links.
Considerations
- Links within the text are contrasted enough just when placing on the color-50 value (e.g. yellow-50), so we cannot use a darker color in order to keep the 4.5:1 contrast with links.
- Currently, opacity is used to prevent highlights from obscuring text, which was a previous technical limitation. However, with mix-blend-mode: multiply created in T269145 we could use a non-opacity color.
- We need to consider non-test cases (images, references, etc.) where the highlighted works different than in text.
- The highlight is rendered as rectangular DOM overlays rather than true text lines, so in complex layouts (e.g., with subscripts, floated images, or references) the shapes break apart.
- The Custom Highlight API would allow applying styles directly to highlighted text (e.g. underline). However, browser support is still partial, and it does not cover non-text elements (e.g. images, references).
Possible solutions
 |  |  |
| Approach 1 | Approach 2A | Approach 2B |
- Approach 1: Update color of highlighted lines to make them more contrasted.
- Unselected highlighted: background-color-interactive using opacity-medium 0.65 to avoid this gray to be as prominent as when selected
- Selected Check: background-color-warning-subtle
- Selected Suggestion: background-color-progressive-subtle
- Approach 2: Update de color + Include underline to differentiate between unselected and selected states
- 2A: Include a dashed underline for when the highlighted is selected
- 2B: Include underline when the highlighted is unselected, so it's clearly differentiate from selected state while it's visible when non selected
Acceptance criteria (or Done)
Design
- Explore solutions to increase the contrast of highlighted text
Implementation
- Implement the decided solution
