-
Notifications
You must be signed in to change notification settings - Fork 0
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
Comments
Guidance from CFA design is to use |
#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. Possible solutions
Results#1F883D over #E7F6F8 (light blue of disclosure) = 4.1:1 Pass |
@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! |
sounds good! feel free to go ahead and retest! |
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 we'll be working on the fix here, not CFA, so @mmazanec22 will give us the go-ahead to retest |
Can you please ensure I have the required permissions and credentials to access the other environment? |
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 |
@amurthy2 here's the PR with the new focus styling: codeforamerica/vita-min#5349 |
@damiansian here's that staging link for ya! https://statefile.pr-5349.getyourrefund-testing.org/en/nj/landing-page |
This is looking really solid! I see a bit of overlapping of the focus state and the 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 Reference: |
@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? |
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.
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
The text was updated successfully, but these errors were encountered: