2

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. enter image description here

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.

  • Knowing the rules is a good starting point to work out when you need to deviate from it because it doesn't suit your purpose. If you find that it meets the requirements but not the needs of the users, then I suggest creating contrast for these sections. – Michael Lai Jun 20 '17 at 23:39
  • What exactly is the question? If it is how to raise contrast in this particular design it is better suited on Graphicdesign SE. One way to make surfaces more distinguishable is by adding a border but if that’s ok in your design depends on a lot of things. – jazZRo Jun 22 '17 at 6:56
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)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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