[fix] example custom class button has insufficent color contrast

[shkeating]

ReactUSWDS Version: 5.4.0 & USWDS Version: 3.6.0

Describe the bug

Our custom class button example in storybook does not have sufficient color contrast. If you're new to storybook, it is a tool we use to display the components for this project and is a part of our documentation. Basic understanding of CSS is all you need to fix this issue, though so no worries if you are new to accessibility or design systems!

To fix this issue, we need to head to go into a stylesheet we have set up for custom storybook examples. In the repo, the path to this file is .storybook/custom-styles.scss. You'll need to replace the hex code #fa9441 provided for .custom-class to a darker color, because right now our orange is too light for the white text to be easily read.

In the screenshot above ANDI suggests that #bf5906 would be a good replacement, but really any dark color will do. I'll go over in Expected behavior below how to verify you have made a good selection.

To Reproduce

Steps to reproduce the behavior:

1. Go to https://trussworks.github.io/react-uswds/?path=/story/components-button--custom-class

2. Click on the Open canvas in a new page icon in the top right corner (see image below)
   

3. run the accessibility checker of your choice (we like to use ANDI free and very easy to install)

4. in the ANDI dropdown, select color contrast

5. click on the Next Element button to select the button in the ANDI inspector

6. See error

Expected behavior

In short, the expected behavior is that the button is legible for folks who rely on the visual cue of the button.

If you aren't sure though, you can validate using the automated accessibility checker of your preference, or in ANDI by taking the following steps:

1. Make sure you are in Google Chrome, contrast playground does not behave as expected in Firefox.
2. Open the button canvas using the process listed under To Reproduce
3. Click on the ANDI bookmarklet
4. Navigate to the color contrast tools
5. select the button by clicking the Next Elementbutton
6. click the Contrast Playground button

7. you can click the shortcuts to get the contrast level required for compliance as close as possible to your inital color, or you can click on the background color swatch and adjust it to any color that yields a passing result.

Additional context

• More on Color contrast ratios on the WCAG 2.1 Understanding Docs
• file path to file needing the fix: .storybook/custom-styles.scss