The borders of the input boxes on my checkout form are very light grey. How do I check they are visible enough?
Input and button borders, icons and other parts needed to use the page fall under non-text contrast, which asks for at least 3:1 against the colour next to them. Type the border colour into 'Text color' and the page colour into 'Background color', then read the 'UI components and graphics' line. #E0E0E0 on white gives 1.32:1 and fails; #949494 gives 3.03:1 and passes.
Why the 4.5:1 limit does not apply here
4.5:1 is for written text. An input border is not text; it is what tells a shopper where to tap to type their name, phone number and address. That is why WCAG 2.1 added a separate criterion, 1.4.11, asking for 3:1 on the parts of the interface needed to use the page: input borders, a button outline if that is what identifies the button, meaningful icons, checkboxes, and the focus ring that appears when someone moves through the form with a keyboard.
Tidy checkout forms often use white fields on a white page, so the border is the only thing drawing the field. If that border is too faint, the shopper sees the labels but not the boxes.
How to check a border in the tool
- Get the exact border colour from your theme settings, or from a screenshot of the form with the Image color picker.
- Open the Color contrast checker and type the border colour in 'Text color'. The label does not matter here; the field accepts any colour.
- In 'Background color', type the colour touching the border on the outside: the page or the card the form sits on.
- Ignore the text lines and read 'UI components and graphics (needs 3:1)'.
Results for three common greys
- #E0E0E0 on white: 1.32:1, fail. This is the usual light grey in many themes.
- #CCCCCC on white: 1.61:1, still a fail, even though it looks clearer.
- #949494 on white: 3.03:1, a pass for UI components.
To reach a passing shade without trial and error, choose the target '3:1 (AA large text and UI components)' in the suggestions section. From either #E0E0E0 or #CCCCCC, the tool suggests the same #949494 at 3.03:1, because it is the first point on the path toward black that reaches the target.
Check against the colour that really touches the border
The criterion compares with adjacent colours, not always with white. Put the form on a light grey card such as #F5F5F5 and the same #949494 gives 2.78:1 and fails. Check each border against whatever it touches in your real design. If the field has its own fill that clearly sets it apart from the page, what matters then is that fill against its surroundings, so check it the same way.
Do not forget the focus ring: many themes remove it or make it very pale, yet keyboard users rely on it to see which field they are in. Passing 3:1 means the border is visible in terms of colour; it does not mean the whole form is easy to use or meets accessibility requirements.
Common questions
Must every input border pass 4.5:1?
No. Borders are not text, and they need 3:1. The text a shopper types inside the field does need 4.5:1 against the field background.
Are decorative icons included?
The criterion covers what is needed to understand or use the page. A cart icon that works as a button is included; pure decoration is not.
My border is 1 px wide. Is a passing colour enough?
The tool checks colour only and knows nothing about line thickness. A very thin border can be hard to see even in a passing colour, so look at it on a real phone.