Contrast ratio for button background color?

Question

I am working with making a website WCAG II compliant. The designers are asking to use yellow buttons (specifically, #fcdb31) with blue text on top of them on white backgrounds.

• While the blue type on the yellow buttons DOES pass accessibility, do we need to be concerned that the yellow button color on a white background would not pass accessibility?
• Do button background colors even need to adhere to the same contrast ratios that the type does?

I don't want to unnecessarily change the button color if this is not something that needs to be done to be compliant.

Answer 1

Both pass colour contrast test ..check here:

http://leaverou.github.io/contrast-ratio/#%230000ff-on-%23fcdb31

http://leaverou.github.io/contrast-ratio/#%23fcdb31-on-%230000ff

But, if you ask me as a designer, both the settings are not pleasing to eyes.

Answer 2

According to W3.org it passes. Because the blue is distinct against the yellow and the hit-area doesn't need to be defined...

"This success criterion does not require that controls have a visual boundary indicating the hit area"

Source: https://www.w3.org/WAI/WCAG21/Understanding/non-text-contrast.html

but they add...

"Note that for people with cognitive disabilities it is recommended to delineate the boundary of controls to aid in the recognition of controls and therefore the completion of activities."

I don't feel great about that... but it's what I found while researching the same problem.