Background
The current background-color-warning-subtle (yellow-50) and background-color-error-subtle (red-50) used to indicate the selection of highlighted text is not contrasted enough on the page's background. These values work well for the Edit Check card because it uses the border color, but they are not contrasted enough when using in highlighted text.
Links within the text are contrasted enough just when placing on the color-50 value (e.g. yellow-50), so we should not use a darker color for accessibility reasons.
We need to find possible solutions to make the highlighted text accessible enough on the page's background without losing the contrast for links.
Possible solution
Use yellow-50 and include a border-color-warning so the contrast is enough visible with the page's background. This means including a border (underline) within each highlighted line.
Acceptance criteria (or Done)
Design
- Explore solutions to increase the contrast of highlighted text
Implementation
- Implement the decided solution