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)

Answer 2

Yes actually there is a standard for this. Unfortunately most design firms and and tools seem to be unaware of it. According to WCAG 2.0 for Non-text Contrast

Success Criterion 1.4.11 Non-text Contrast

The visual presentation of the following have a contrast ratio of at least 3:1 against adjacent color(s):

• User Interface Components Visual information required to identify user interface components and states, except for inactive components or where the appearance of the component is determined by the user agent and not modified by the author;

• Graphical Objects Parts of graphics required to understand the content, except when a particular presentation of graphics is essential to the information being conveyed.

Buttons are User Interface Components so they need a contrast ratio of at least 3:1 against adjacent colors.