WCAG 1.4.1: Use of Color

WCAG 1.4.1 Use of Color is a level A success criterion from WCAG 2.0. Colour must not be the only way to convey information. An error, a required field or a chart series needs another cue.

People who cannot distinguish red and green miss errors that are only a colour change.

How to test

Take a screenshot and view it in greyscale. Errors, links and chart keys should still be clear.

How to fix

Add text, an icon with a name, or a pattern as well as colour.

Example that fails

Required fields are marked only by a red border.

Example that passes the check

Required fields show the word Required and a red border.

Shopify

In theme CSS and form sections, add the word Required or an error message, not only a red outline.

WooCommerce

WooCommerce error lists should stay as text. Do not hide the error message and leave only a red field.

WordPress

Form plugins should show an error message, not only a colour.

Wix

Set the field error to show text. Do not rely on the field turning red.

Related fixes