0

Simple question but I can't find the correct way to test.

I have a normal button, that is transparent but has a border colour with some opacity. I'm not convinced that the contrast ration is high enough.

Similar to this enter image description here

When I check with Chrome it seems to pass but I'm not convinced it is checking correctly. I know the bg (behind the transparent button) and button text colour contrast is sufficient but I want to test the border.

Does anyone know a tool to check this please?

Improve this question
6
  • 1
    Is the border a different colour to the text within?
    – JonW ♦
    Jun 5 at 13:47
  • yes, border is the same colour but has opacity on it. I guess what I am asking is the button text with the correct contrast enough or should the border also have the sufficient contrast.
    – Burns
    Jun 5 at 14:01
  • Are you sure the text has enough contrast? Or are you following the "A" ratio as it is 3.26:1 or is it because of the poor image quality?
    – jazZRo
    Jun 5 at 14:20
  • The current contrast is 4.9
    – Burns
    Jun 5 at 14:22
  • 1
    To be honest, I'm not sure why you'd add opacity to the border other than to make the button look less noticeable - but the whole point of a button is for it to be noticeable. So I would set the border the same colour and opacity as the text label itself.
    – JonW ♦
    Jun 5 at 16:11

1 Answer 1

Reset to default
3

This is precisely why one should not fully rely on automated accessibility validators. They are useful to point out problems that are measurable and overlooked, but aren't good at finding more refined design flaws. Your test with Chrome was right though according to WCAG 2.1 about success criterion 1.4.11:

This success criterion does not require that controls have a visual boundary indicating the hit area, but if the visual indicator of the control is the only way to identify the control, then that indicator must have sufficient contrast.

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

So the question is if this button looks enough like a button to your users. To be sure make the contrast ratio of the border at least 3:1.

Improve this answer
4
  • 1
    Thank you. I guess according to this: "If a button with text also has a colored border, since the border does not provide the only indication there is no contrast requirement beyond the text contrast (1.4.3 Contrast (Minimum)). 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." If I understand correctly, because I am using text in my button the border contrast is not as important.
    – Burns
    Jun 5 at 14:07
  • Since the image shows very little context I can't really advice on that. It is a judgement that you have to make for yourself. In theory it is not wrong. But that border is probably useful for people who can see it perfectly fine, so why not make it useful for everybody?
    – jazZRo
    Jun 5 at 14:15
  • yes true, thanks
    – Burns
    Jun 5 at 14:21
  • @Burns you are exactly right. The button border does not have any contrast requirements (1.4.11) provided the text in the button has sufficient contrast (1.4.3). That doesn't mean you shouldn't have a good border, but WCAG does not require it. As long as the button text has contrast and it's obvious that the button text implies it's a button (such as an action word like "add to cart"), then the border is not required. It's a little subjective, as jazzro mentions. In your case, I don't know if "danger" is a sufficient enough to imply a button without seeing its context.
    – slugolicious
    Jun 5 at 23:32

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.