[Button] Contrast for some default variants is too low

Describe the bug According to chrome lighthouse, some variants are not a high enough contrast.

I am using a standard:

<Button minWidth="sm" variantColor="blue">Text</Button>

with css reset and default theme. It appears a number of variant colors don’t pass contrast ratios for lighthouse. I did a little investigation and a few tools all confirmed that the button I had created with the default theme was not considered accessible. Here are a few testers that failed it:

https://color.a11y.com/Contrast/

https://www.aditus.io/button-contrast-checker/

The second tester also called out the contrast of the focus outline for blue as being too low.

I only tested with blue but when i passed the chakra docs through these testers it looked like other colors might also fail.

Expected Behavior Variants in the default theme to pass accessibility standards.

Link to minimal reproduction Please provide a codesandbox link or GitHub repo with a minimal reproduction of the issue.

Steps to Reproduce Create a button using variantColor and run lighthouse on the page. Deploy the page to vercel and run either of the contrast checkers on it.

Suggested solution(s)

Bold text has less stringent contrast requirements but it seems like the solution is to darken the buttons with light text or lighten the buttons with black text.

[jmiazga]

I created a quick app to run the contrast tools against: https://chakra-buttons-a11y.vercel.app/

You can see the results here: https://www.aditus.io/button-contrast-checker/chakra-buttons-a11y-vercel-app-2020-08-10-at-20-15-46-345

[segunadebayo]

Thanks for reporting this @DavidJFelix

@with-heart, let’s plan to do a sweep across all components to check their color contrasts and improve them.