You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Tab to focus the "privacy policy", "terms of service" or "licenses" links.
Notice if the links have any other visual cues besides color to be distinguished from surrounding text.
Expected Result:
Color should not be the only way to differentiate the link from the surrounding text. There should be additional cues, such as a border, bold or italic text, along with the color differentiation. A contrast ratio of 3.00:1 should be provided between the link text and adjacent text to meet the requirement.
Actual Result:
Only color is used to distinguish links from normal text. The blue links (#0185FF) against dark grey surrounding text (#7D8B8F) have a color contrast ratio of 1.02:1.
Terms of service -> Only color is used to distinguish links from surrounding text.
Privacy policy -> Only color is used to distinguish links from surrounding text.
Licenses -> Only color is used to distinguish links from surrounding text.
About -> Only color is used to distinguish "Terms of service" and "Privacy policy" links from surrounding text.
Set password -> Only color is used to distinguish links from surrounding text.
Workaround:
No workaround
Area issue was found in:
Landing page, Terms of service page, Privacy policy page, Licenses page, About overlay, Set password page
Failed WCAG checkpoints
1.4.1
User impact:
The low-vision and color-blind users might not be able to distinguish the links from surrounding text.
Suggested resolution:
Provide some additional decoration for the link (e.g. bold or larger font or a permanent underline), so that link can be easily differentiated from surrounding text. The 3.00:1 color contrast ratio between the link text and adjacent text can be achieved by using the darker blue color for the link text. An example of color to use is #003D75, which will give a color contrast ratio of 3.09:1 against the current color of surrounding text (#7D8B8F). https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html https://www.w3.org/WAI/WCAG21/Techniques/general/G183
Platform:
Where is this issue occurring?
Web
Version Number:
**Reproducible in staging?:**Yes
Reproducible in production?: Notes/Photos/Videos: Any additional supporting documentation Issue reported by:
So the terms of service page is hosted on UseDot and it's technically not part of the NewDot app. @stitesExpensify@kadiealexander do you still think it's worth addressing these issues, or should we punt and focus on the app itself?
Action Performed:
Expected Result:
Color should not be the only way to differentiate the link from the surrounding text. There should be additional cues, such as a border, bold or italic text, along with the color differentiation. A contrast ratio of 3.00:1 should be provided between the link text and adjacent text to meet the requirement.
Actual Result:
Only color is used to distinguish links from normal text. The blue links (#0185FF) against dark grey surrounding text (#7D8B8F) have a color contrast ratio of 1.02:1.
HTML:
<a href="https://use.expensify.com/terms" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-xoduu5 r-1otgn73"><span class="css-901oao css-16my406" style="color: rgb(1, 133, 255); font-family: GTAmericaExp-Regular; font-size: 9px; text-decoration-color: rgb(1, 133, 255);">terms of service</span></a>...<a href="https://use.expensify.com/privacy" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-xoduu5 r-1otgn73"><span class="css-901oao css-16my406" style="color: rgb(1, 133, 255); font-family: GTAmericaExp-Regular; font-size: 9px; text-decoration-color: rgb(1, 133, 255);">privacy policy</span></a>...<a href="https://use.expensify.com/licenses" role="link" class="css-4rbku5 css-18t94o4 css-1dbjc4n r-1loqt21 r-xoduu5 r-1otgn73"><span class="css-901oao css-16my406" style="color: rgb(1, 133, 255); font-family: GTAmericaExp-Regular; font-size: 9px; text-decoration-color: rgb(1, 133, 255);">licenses</span></a>
Other occurrences:
Workaround:
No workaround
Area issue was found in:
Landing page, Terms of service page, Privacy policy page, Licenses page, About overlay, Set password page
Failed WCAG checkpoints
1.4.1
User impact:
The low-vision and color-blind users might not be able to distinguish the links from surrounding text.
Suggested resolution:
Provide some additional decoration for the link (e.g. bold or larger font or a permanent underline), so that link can be easily differentiated from surrounding text. The 3.00:1 color contrast ratio between the link text and adjacent text can be achieved by using the darker blue color for the link text. An example of color to use is #003D75, which will give a color contrast ratio of 3.09:1 against the current color of surrounding text (#7D8B8F).
https://www.w3.org/WAI/WCAG21/Understanding/use-of-color.html
https://www.w3.org/WAI/WCAG21/Techniques/general/G183
Platform:
Where is this issue occurring?
Version Number:
![Bug5179545_color_-links-_about](https://user-images.githubusercontent.com/88733897/134516441-f6e95a3d-c9f5-40c4-815f-99e6e16db6a2.png)
![Bug5179545_color_-links-_landing_page](https://user-images.githubusercontent.com/88733897/134516452-bcf552b1-e36e-4c35-b552-f065395975d7.png)
![Bug5179545_color_-links-_set_password](https://user-images.githubusercontent.com/88733897/134516468-5bdf2632-fbe6-4aad-910b-b5f40f50e146.png)
![Bug5179545_Licenses_-_links_are_identified_only_by_means_of_color](https://user-images.githubusercontent.com/88733897/134516479-f07bdf12-ba90-4ff9-9011-08c512caac36.png)
![Bug5179545_Privacy_policy_use_of_color](https://user-images.githubusercontent.com/88733897/134516496-f00a597b-0ca3-4f4f-a5d5-22248fcce393.png)
![Bug5179545_Terms_of_service_-_links_are_identified_only_by_means_of_color](https://user-images.githubusercontent.com/88733897/134516500-c6a3020a-f71b-4f45-a7fa-ffedd5890065.png)
**Reproducible in staging?:**Yes
Reproducible in production?:
Notes/Photos/Videos: Any additional supporting documentation
Issue reported by:
View all open jobs on GitHub
The text was updated successfully, but these errors were encountered: