By AltGrade Editorial · Reviewed by AltGrade · Last updated

Fix low contrast on controls

Faint borders and pale icons fail even when the text beside them is dark.

People cannot see where the field is.

Steps

  1. Measure the border and the icon, not only the text.
  2. Aim for 3:1.
  3. Darken strokes.

Failing example

An input border of #eeeeee on white.

Better example

The border is near-black.

Shopify

Darken Shopify input borders and header icon strokes in the theme CSS.

WooCommerce

Update WooCommerce quantity and input borders.

WordPress

Set WordPress form borders to a dark neutral.

Wix

In Wix, set a darker border on inputs.

WCAG

Shopify steps · Shopify · Missing alt text