Description
Title
[Content] Insufficient text-to-background contrast
Description
The text color used in the following element has insufficient contrast with its background color. This results in very low readability, especially for users with low vision or color vision deficiencies. According to WCAG 2.2 Level AA, normal text must have a contrast ratio of at least 4.5:1, and large text (over 18 pt or 14 pt bold) must meet 3:1. The detected text on the page does not satisfy these thresholds.
Steps to Reproduce
- go to /tutorials/setting-up-your-environment/
- Locate to the following element:
<span style="color: rgb(215, 58, 73); opacity: 1; background-color: rgb(247, 247, 247);"><img src="chrome-extension://jbbplnpkjmmeebjpijfedlgcdilocofh/img/icons/contrast.svg" class="wave5icon" tabindex="0" role="button" alt="CONTRAST ERRORS: Very low contrast" style="border: none; vertical-align: middle; cursor: pointer; width: 44px; height: 44px; z-index: 1000; position: relative;">function</span>
Actual Behavior
The word "function" is rendered in #D73A49 (a red tone) on a #F7F7F7 (light gray) background. This color combination produces a contrast ratio that is below 4.5:1, violating WCAG 2.1 Level AA contrast requirements for normal-sized text.
Expected Behavior
Text should maintain sufficient color contrast against its background to ensure readability. For normal-size text, the minimum ratio is 4.5:1; for large text (over 18pt or 14pt bold), 3:1. The color combination used should meet or exceed these thresholds.
Environments
No response
Suggested Fix
Increase the contrast between the foreground (text) color and the background color.
Reference
WCAG:
WCAG-T:
- G18: Ensuring that a contrast ratio of at least 4.5:1 exists between text (and images of text) and background behind the text
- G145: Ensuring that a contrast ratio of at least 3:1 exists between text (and images of text) and background behind the text
What is your operating system?
None
Web browser and version
No response