loading...
Cover image for Accessibility for the colour blind #3: Forms

Accessibility for the colour blind #3: Forms

teamallnighter profile image Chris Connelly ・1 min read

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!??!?!?

Labeling

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!

Posted on by:

teamallnighter profile

Chris Connelly

@teamallnighter

My name is Chris. I love webdev so much I quit my well paying job of fifteen years to go back to school and start my own freelance compant

Discussion

markdown guide