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?

6
  • 1
    Is the border a different colour to the text within?
    – JonW
    Commented Jun 5, 2023 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
    Commented Jun 5, 2023 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
    Commented Jun 5, 2023 at 14:20
  • The current contrast is 4.9
    – Burns
    Commented Jun 5, 2023 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
    Commented Jun 5, 2023 at 16:11

1 Answer 1

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.

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
    Commented Jun 5, 2023 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
    Commented Jun 5, 2023 at 14:15
  • yes true, thanks
    – Burns
    Commented Jun 5, 2023 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. Commented Jun 5, 2023 at 23:32

Your Answer

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

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