USWDS - Checkbox and radio: Update tile color definitions

[amyleadem]

Summary

Updated radio and checkbox tile styling to have lighter borders.

This change reverts border color styles to be more similar to what they were in 3.4.0 and could help with comprehension for users with visual processing disorders.

Note
This is the first part of the effort to make checkbox and radio tile styles more accessible to users with visual processing disorders. We will need to dive deeper into what we can do to reduce visual noise so that the content is easier to focus on. Issue #5487 tracks the larger effort for this.

Breaking change

This is not a breaking change.

Related issue

Closes #5490

Related pull requests

Changelog PR

Preview link

• Radio tile
• Checkbox tile
• Disabled form inputs

Problem statement

In release 3.5.0, we updated disabled styles for our form elements, which inadvertently darkened the color of the borders on the checkbox and radio tile boxes. This color changed increased the visual noise, which can have a negative impact on users with visual processing disorder.

Reference: Color definition change in 3.5.0

Solution

The tile borders are not actually representing disabled states, so we can make the component more resilient by defining the border colors with system tokens instead.

The disabled states will continue to use disabled color tokens ("disabled"/"gray-50") and will now meet color contrast requirements.

Testing and review

• Confirm that tile border styles more closely align with those found in release-3.4.0
  • Note: Disabled states will look darker than in 3.4.0. This is expected. Disabled styles should meet contrast standards and also align with other current disabled form inputs.
• Confirm that the switch from disabled state colors to system colors make sense.
• Confirm no unexpected visual regressions

[mejiaj]

Those screenshots were very helpful! Thanks for updating. I tested:

• Default checkbox & radio.
• Checkbox & radio with tests uncommented.

[mahoneycm]

Any thoughts on making the border a bit darker at gray-30?

Adds an extra step between the actual disabled element element and the default which might help to distinguish the difference between the two for lower visioned users

[amyleadem]

I lean towards keeping the border color "gray-20". My reasoning is that I don't think that the border color should do much work to indicate that the element is disabled. Instead, it should be the lightened text and radio button color that carries that lift.

In my mind, this PR primarily exists to restore the styles from 3.4.0, which are more closely aligned with "gray-20". Secondarily, the aim is to reduce visual noise to make this easier to read for users with visual processing disorders. Lightening the borders is likely not enough for that effort, but it is a step in the right direction.

Curious what you and others think!

[mahoneycm]

That's totally fair! Definitely want to make sure it's readable for all. If that means relying more so on the text and radio/checkbox input color, so be it!

[amyleadem]

Putting this PR in draft because it is not clear if this will help or harm users with visual processing disorders. Additionally, according to this comment from @mahoneycm, the style change was intentional to meet contrast standards.

The a11y team is actively engaging with this topic and I recommend we hold off on integrating this change until we can have more discussions about best practice here.

[amyleadem]

Opening this PR again after further discussion with the team. We are treating this as a visual regression fix that reduces visual noise. We will follow up with more investigation into how current tile styling affects users with visual processing disorders in issue #5487.

[thisisdano]

Thanks for all the thought on d discussion on this one. This change is a good step forward, and we'll keep taking more!