Improve the color contrast of IconButton when used in Expandable component

[tbusillo]

Bug Report 🐛

I am more than happy to submit a PR for this, but wanted to submit an issue/get any feedback prior to doing so

There are several areas in the UI where color contrast can be improved, but one area that has the greatest impact on vision impaired and non-impaired users can be seen in the Expandable component's use of the IconButton.

This is an issue not just in terms of usability, but also in terms of inclusiveness and compliance with accessibility standards/guidelines (WCAG 1.4.3).

Color contrast between foreground and background colors for graphical objects/UI components should be, at minimum, a 3:1 ratio. Below are the current contrast ratios for two examples.

Example 1

Contrast contrast:

Example 2

Color contrast:

To Reproduce ✔️

1. Go to http://www.testing-playground.com.
2. Find the expandable component's (e.g., one under the top-right pane, one on the bottom-left pane).
3. Click on the expandable section and observe the color changes between expanded/collapsed, and hover vs. non-hovered.

Expected behavior 🤔

Hoverable and non-hoverable color states, especially for interactive elements, have sufficient contrast and are made more visible (regardless of contrast/accessibility).

Suggested solution 🔦

This is taking place due to the SVG icons using fill="currentColor" then inheriting from the light variant found in [testing-playground/src/components/IconButton.js], which is light: 'text-gray-400 hover:text-gray-600'.

I don't think anything is being passed into the variant prop, so it's defaulting to light [ref].

Option 1: Introduce a text-gray-500 variant, with a color of #728DA7. This color's contrast would be sufficient for both elements.

Option 2: Change the light variant's non-hovered text color to text-gray-600

Examples of what this would look like can be seen at https://play.tailwindcss.com/vWbA6C62QF and below.

Your Environment 💻

• browser: Chrome
• os: Mac
• any other relevant information

Additional comments

[smeijer]

Hi @tbusillo , thanks for the extended report! I'm happy to accept a pull for this. Please choose the option that you think is best.

[tbusillo]

@smeijer Cool! Will try to get something in this week and thank you for taking a look/being open to the change!