5

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.

yellow button with blue text

  • 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.

2
  • 2
    I hope you don't mind, I've included a simple button image using your provided details to the post. Feel free to replace it if the actual button is significantly different. Dec 22, 2017 at 16:09
  • That yellow "makes my eyes burn". It has an intensity that makes it difficult to look at for a long period of time. I believe there is a term for a color's "burning intensity" but I don't know it off the top of my head.
    – Benjamin S
    Aug 16, 2022 at 16:26

2 Answers 2

4

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.

1
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.