Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

SC 1411 -- Contrast of focus state below 3:1 #10

Open
damiansian opened this issue Jan 4, 2025 · 13 comments
Open

SC 1411 -- Contrast of focus state below 3:1 #10

damiansian opened this issue Jan 4, 2025 · 13 comments
Labels
bug Something isn't working needs-design Needs input from design on what to do

Comments

@damiansian
Copy link

damiansian commented Jan 4, 2025

URL

https://demo.fileyourstatetaxes.org/en/nj/landing-page

Issue

The contrast of the visible focus indicator is too low in certain use cases. The minimum ratio for the contrast indicator must be 3:1 to the adjacent background. We see lower the 3:1 in certain areas of the UI.

Image

WCAG

SC 1.4.11: Non-text Contrast (Level AA)

User impact

Users with low vision benefit from stronger contrast in the user interface. Therefore, a 3:1 contrast minimum is required for the focus indicator of interactive controls.

Suggested fix

Should be

box-shadow: 0 0 0 5px #21C834, inset 0px 2px 0px rgba (0,0,0,0.15)
@damiansian damiansian converted this from a draft issue Jan 4, 2025
@damiansian damiansian added the bug Something isn't working label Jan 4, 2025
@mmazanec22 mmazanec22 added the needs-design Needs input from design on what to do label Jan 8, 2025
@amanifarooque
Copy link

Guidance from CFA design is to use #005C0F!

@damiansian
Copy link
Author

@amanifarooque

#005C0F creates a very strong contrast on white, and the blue of the disclosure. But luminosity-wise, it's too close to the dark blue of the banner.

Contrast testing results showing failure at 1.6:1

Possible solutions

  • Create a focus style for the banner with a lighter color, or
  • Use #1F883D (recommended)

Results

#1F883D over #E7F6F8 (light blue of disclosure) = 4.1:1 Pass
#1F883D over #FFFFFF (light blue of disclosure) = 4.5:1 Pass
#1F883D over #112F4E (dark blue of banner) = 3:1 Pass

@damiansian damiansian moved this from To triage to In progress in NJ Innovate -- NJ Direct File Accessibility Jan 8, 2025
@amurthy2
Copy link

@damiansian Hi! I ran some tests on my end and it looks like #1A8CFF might work for focus state (this is close to what USWDS uses and should work across state primary colors and the blue reveals) LMK what you think!

@damiansian
Copy link
Author

damiansian commented Jan 10, 2025

@amurthy2

That works. Let me know when I can retest :)

Also, you may consider putting a 2px offset on the focus style like this:
button with a 2px offset on the focus style's stroke

I find it really makes the focus super clear. Just a suggestion though.

@amurthy2
Copy link

sounds good! feel free to go ahead and retest!

@damiansian damiansian moved this from In progress to In review in NJ Innovate -- NJ Direct File Accessibility Jan 10, 2025
@damiansian damiansian moved this from In review to Ready for retest in NJ Innovate -- NJ Direct File Accessibility Jan 10, 2025
@damiansian
Copy link
Author

@amurthy2

I retested in Stage/Demo and no changes had been made. I cleared cache and tried an incognito window as well.

When this is ready for me to retest in stage/demo, please mark the ticket status to "Ready to retest". I'm moving to "Needs rework" as I have retested and found the same issue to be present.

@damiansian damiansian moved this from Ready for retest to Rework needed in NJ Innovate -- NJ Direct File Accessibility Jan 10, 2025
@mmazanec22 mmazanec22 moved this from Rework needed to Ticket created in NJ Innovate -- NJ Direct File Accessibility Jan 10, 2025
@tristanvanech
Copy link

@damiansian we'll be working on the fix here, not CFA, so @mmazanec22 will give us the go-ahead to retest

@damiansian
Copy link
Author

@tristanvanech

Can you please ensure I have the required permissions and credentials to access the other environment?

@tristanvanech
Copy link

we will post the heroku staging link here once it's ready to test! you won't need any additional access to view and test

@mmazanec22
Copy link

@amurthy2 here's the PR with the new focus styling: codeforamerica/vita-min#5349

@mmazanec22 mmazanec22 moved this from Ticket created to In progress in NJ Innovate -- NJ Direct File Accessibility Jan 10, 2025
@tristanvanech
Copy link

@damiansian here's that staging link for ya! https://statefile.pr-5349.getyourrefund-testing.org/en/nj/landing-page

@damiansian
Copy link
Author

@mmazanec22

This is looking really solid! I see a bit of overlapping of the focus state and the adjacent text.

Blue focus touches adjacent text

I'm not sure if you'd be open to the idea that link text can have a different visual focus than controls like buttons, selectboxes, inputs and such. At Adobe we solved for this by adding an additional underline to a tags. The CSS here plays nicely with descenders in text (i.e, the squiggly bit of the "g" in the screen shot").

two underlines on link text in keyboard focus state

Reference:
https://react-spectrum.adobe.com/react-spectrum/Link.html

@mmazanec22
Copy link

mmazanec22 commented Jan 13, 2025

@damiansian I'm open to that but it probably requires some time/coordination for the designers on both teams to figure out how they want this to look.

In the meantime, if I reduce the size of the focus highlight, will this be ok to merge?

@mmazanec22 mmazanec22 moved this from In progress to In review in NJ Innovate -- NJ Direct File Accessibility Jan 23, 2025
@mmazanec22 mmazanec22 moved this from In review to Ready for retest in NJ Innovate -- NJ Direct File Accessibility Jan 23, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
bug Something isn't working needs-design Needs input from design on what to do
Projects
Status: Ready for retest
Development

No branches or pull requests

5 participants