0

When I look around, I see many websites, apps, and forms consist of text-fields that have a grayish frame. Do text fields have any accessibility rules when it comes to frame's contrast?

Is it ok to use input fields such are these: enter image description here

enter image description here

enter image description here

Improve this question

1 Answer 1

Reset to default
2

The first example you show is probably ok (it is hard to tell with a static image as we can't test contrast easily).

The second example is almost certainly not in accordance with WCAG.

The third example is probably not ok either, but yet again hard to tell "at a glance".

There is a guideline that inputs and controls should have a contrast ratio of 3:1 minimum with their surroundings.

This is covered under WCAG 1.4.11 Non-text contrast.. You may also want to read 1.4.3 contrast (minimum) as that has some related points.

You can test colour contrast with an online tool such as WebAims colour contrast checker by inputting the border colour and the surrounding colour and ensuring it is greater than 3:1.

Despite the fact it is hard to tell whether your examples meet minimum standards, I would adjust all 3 of them anyway to increase the contrast with their surroundings as these are minimums, not targets and increased contrast helps everybody (i.e. if you are using your phone in bright light) identify controls easily!

Improve this answer
3
  • 1
    The strange thing is that I checked different input-fields in various design systems that obligated to WCAG and they have much lower contrast for a text field's border. I checked Shopify Polaris, Atlassian, Salesforce's Lightning, or even Gov.UK. Any rational idea why?
    – Uzi Cohen
    Commented Sep 25, 2020 at 16:32
  • 1
    @UziCohen I think WCAG compliance guidelines is dependent on its target audiences. In most cases public facing business are the ones who 'must' take care of it. In fact it is a mandat in many countries.
    – Ashumk
    Commented Sep 26, 2020 at 3:07
  • 1
    Where on Gov.uk have you found accessibility errors? As for border contrast, it is one of the WCAG items that people often forget. Obviously designers are often not that up on WCAG and it goes from there. Also (as with many WCAG rules), they are not clear, for example buttons can just be button text, they do not have to have a background to show the hitbox area, that to me is a big hole in the rules. That is why complying with WCAG is not as good as aiming for accessibility and user testing. Follow WCAG to see what is recommended, but go over and beyond if you can.
    – GrahamTheDev
    Commented Sep 26, 2020 at 7:17

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.