Button passes contrast test however button's background and div's background are low contrast

Question

I have been going back and forth with design about this. I think there should be a contrast with the button and the div that holds the button, however, design says there is no rule about that. I try to research about this topic all around the internet and this is my last resource to find out about this. Here is an image that shows what I am talking about.

The button color and the text are accessible, however the background of the div and the background of the text have low resolution.

Please help and thank you in advance:

Batuque.

Answer 1

It passes contrast test because it's considering the white text against the button background. As such, the contrast is good. If you want to contrast the button against the background, then you will need to consider your button's background against the container background. For example, running your sample labeled as 7 on WebAIM contrast checker, I get that it fails teh test, with a result of Contrast Ratio: 2.1:1

However...

It's true that there are no rules about this, so you'll need to test this out. Additionally, it's possible you're facing the very common flat design conundrum: you can't distinguish a button from other elements. If this is the case, a better way to distinguish buttons is to use shadows and shape. A rounded corner with a shadow will convey that this is a button and most users will understand this at first sight.

Accessibility and Contrast

One thing to consider is that for accessibility requirements, there's nothing about container against block elements in WCAG2. See below:

1.4.3 Contrast (Minimum): The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: (Level AA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

1.4.4 Resize text: Except for captions and images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA)

1.4.5 Images of Text: If the technologies being used can achieve the visual presentation, text is used to convey information rather than images of text except for the following: (Level AA)

Customizable: The image of text can be visually customized to the user's requirements;

Essential: A particular presentation of text is essential to the information being conveyed.

Note: Logotypes (text that is part of a logo or brand name) are considered essential.

1.4.6 Contrast (Enhanced): The visual presentation of text and images of text has a contrast ratio of at least 7:1, except for the following: (Level AAA)

Large Text: Large-scale text and images of large-scale text have a contrast ratio of at least 4.5:1;

Incidental: Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.

Logotypes: Text that is part of a logo or brand name has no minimum contrast requirement.

In short

If you're going for accessibility (which it seems so, and that's great!), you really don't need to contrast buttons per se, the contrast should be in the text. However, it's a good idea to make them stand out if you want users to actually see the buttons (hence... click on them)