[A11y] - WCAG 2.1 - Guideline 1.4.3 List of Color Contrast Issues

[aliciajbrookshire]

Describe the bug

Password requirement text on activate account page does not meet minimum contrast requirements

Expected behavior

1.4.3
Contrast (Minimum)
Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no contrast requirement.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Login as admin and create a new user with a valid email that you will be able to activate
3. Go to email and open new user's activation link
4. Assert: User is navigated to https://boilerplate-client-react.shift3sandbox.com/auth/activate-account page
5. Use WAVE tool to identify color contrast issues
6. Confirm password requirements text does not meet contrast ratio requirements

Screenshots

Desktop (please complete the following information):

Asus Laptop
Windows 10
Chrome 113.0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

[aliciajbrookshire]

Describe the bug

When in dark mode Users button does not meet minimum color contrast requirements when navigated to with keyboard

Expected behavior

1.4.3
Contrast (Minimum)
Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no contrast requirement.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Toggle to dark mode
3. Login as admin
4. Tab to Administration button
5. Click Enter and use down arrow key to scroll down to users
6. Confirm background color is that used in light mode, but text is white as is used in dark mode
7. Now use mouse to select Users, notice that it is now white background with black text

Screenshots

Desktop (please complete the following information):

Asus Laptop
Windows 10
Chrome 113.0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

[aliciajbrookshire]

Describe the bug

When in dark mode Language preferences drop-down options do not meet color contrast requirements when navigated to with keyboard

Expected behavior

1.4.3
Contrast (Minimum)
Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no contrast requirement.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Login as any user type
3. Click on user profile
4. Navigate App Settings with tab until you get to the Language Preference section and click enter on the English button
5. Use the up arrow key to select English
6. Notice the text changes to white

Screenshots

Desktop (please complete the following information):

Asus Laptop
Windows 10
Chrome 113.0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html

[aliciajbrookshire]

Describe the bug

When in dark mode, red delete user and delete farm text does not meet minimum contrast requirements

Expected behavior

1.4.3
Contrast (Minimum)
Level AA

The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no contrast requirement.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://boilerplate-client-react.shift3sandbox.com/
2. Login as admin
3. Click Directory
4. Click Delete next to any farm
5. Use WAVE tool to identify color contrast issues
6. Confirm red delete message text does not meet color contrast requirements
7. Click cancel
8. Click Adminstration > Users
9. Click ... next to any user > click Delete
10. Use WAVE tool to identify color contrast issues
11. Confirm same issue as in step 6 above

Screenshots

Desktop (please complete the following information):

Asus Laptop
Windows 10
Chrome 113.0.5672.127

Additional context

https://www.w3.org/WAI/WCAG21/Understanding/contrast-minimum.html