Action Performed:
Prerequisite:
- Using Windows + Chrome, open the page https://new.expensify.com/settings/about
- Measure the contrast of the light yellow numerical text (located under the animation) against the background color
Expected Result:
Regular size text has a minimum contrast ratio of 4.5:1, and Large text (24 px, or 18.5 px+bold) has a minimum contrast ratio of 3:1
Actual Result:
The numerical text color #F6E2C0 on a background of #D18000 results in a contrast ratio of approximately 2.44:1, which fails the WCAG 2.1 AA minimum of 4.5:1 for normal text. As a result, users with low vision or color blindness may not be able to read the text.
HTML:
v9.2.45-6
Area issue was found in:
Settings-About
Failed WCAG checkpoints
WCAG 1.4.3 Contrast (Minimum)
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
User impact:
People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.
Suggested resolution:
Use a different shade for the text to meet a contrast ratio of at least 4.50:1. For example, #2B2B2B would give a contrast ratio of 4.58:1.
Environment(s)
Windows Windows 10 - Chrome
Screenshots/Videos
Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36605/community-issues/6997174
Issue reported by: NA
Slack conversation: NA
Issue Owner
Current Issue Owner: @rushatgabhane
Action Performed:
Prerequisite:
Expected Result:
Regular size text has a minimum contrast ratio of 4.5:1, and Large text (24 px, or 18.5 px+bold) has a minimum contrast ratio of 3:1
Actual Result:
The numerical text color #F6E2C0 on a background of #D18000 results in a contrast ratio of approximately 2.44:1, which fails the WCAG 2.1 AA minimum of 4.5:1 for normal text. As a result, users with low vision or color blindness may not be able to read the text.
HTML:
Area issue was found in:
Settings-About
Failed WCAG checkpoints
WCAG 1.4.3 Contrast (Minimum)
https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum
User impact:
People with low vision often have difficulty reading text that does not contrast with its background. This can be exacerbated if the person has a color vision deficiency that lowers the contrast even further. Providing a minimum luminance contrast ratio between the text and its background can make the text more readable even if the person does not see the full range of colors. It also works for the rare individuals who see no color.
Suggested resolution:
Use a different shade for the text to meet a contrast ratio of at least 4.50:1. For example, #2B2B2B would give a contrast ratio of 4.58:1.
Environment(s)
Windows Windows 10 - Chrome
Screenshots/Videos
Version Number: NA
Reproducible in staging?: NA
Reproducible in production?: Yes
Email or phone of affected tester (no customers): NA
Logs: https://stackoverflow.com/c/expensify/questions/4856 NA
Notes/Photos/Videos: Any additional supporting documentation Yes
Expensify/Expensify Issue URL: https://platform.applause.com/company/12102/products/36605/community-issues/6997174
Issue reported by: NA
Slack conversation: NA
Issue Owner
Current Issue Owner: @rushatgabhane