DEV Community

Cover image for Accessibility for the colour blind #3: Forms
Chris Connelly
Chris Connelly

Posted on

Accessibility for the colour blind #3: Forms

Ok.... So this one is a big one for me. I have MAJOR issues seeing forms. Especially when people use white on... a little less white... With light grey text... WTF!??!?!?


Using a placeholder without a label is problematic because placeholder text usually lacks sufficient contrast. Apple has this problem with their registration form:

Alt Text

Using labels works a lot better.

Alt Text

But even then the border is too light and I personally would have issues seeing that.

Adding a darker / thicker border or even some shadow helps even more.

Alt Text

Required Fields

The picture below is a perfect example. I cannot tell which one of these if any... or all of them are required...

Alt Text

Instead try:

  • Marking required fields with an asterisk.

  • Even better, marking required fields with “required.”

  • Where possible, remove optional fields altogether.

In the next article I'll be wrapping up this series with a few more examples and tooling!

Top comments (0)