Form control contrast
Silktide checks that form fields, such as text boxes and dropdown menus, stand out visually from the area around them. A field that blends into the page is hard for people with reduced vision to find and use.
Why this matters
To fill in a form, you first have to see where the fields are. A white input with no border on a white page is invisible to many people with low vision - they cannot tell where to click or type. Forms are usually the most consequential part of a website (contact, checkout, sign-up), so fields that can't be found translate directly into lost inquiries and sales. This is also a requirement.
How to fix it
- Give the control a visible border or outline with a of at least 3:1 against the background around it. This is usually a one-line change in your stylesheet.
/* Field invisible against a white page */
input { background: #fff; border: 1px solid #f2f2f2; }
/* Fixed: border contrasts at least 3:1 with the background */
input { background: #fff; border: 1px solid #767676; }
- Alternatively, fill the control itself with a color that contrasts at least 3:1 with its surroundings.
How Silktide tests this
- Find every visible text input, text area, and dropdown (
<input>,<textarea>, and<select>) on the page, skipping any elements you have excluded from checking. - Skip input types whose appearance is drawn by the browser or operating system: checkboxes, radio buttons, submit/reset/image buttons, file pickers, and hidden inputs.
- Resolve the control's effective background color and the background color of the area surrounding it, taking transparency and parent elements into account.
- Pass the control if its fill contrasts at least 3:1 with the surrounding background. Otherwise, test each of the control's border and outline colors against the surrounding background, and pass if any of them reaches 3:1.
- Report controls where nothing reaches 3:1, showing the best contrast found.
Troubleshooting
Effects we cannot measure
Drop shadows, glows, gradients, and background images have no single color to
measure, so contrast provided only by such effects is not credited. Similarly,
a control positioned over multiple different backgrounds (for example with
position: absolute) may not be measurable. If a flagged control is genuinely
distinct, the finding.
Buttons, checkboxes, and radios are not checked
Buttons don't need a visible boundary as long as their label is readable, and checkboxes and radio buttons are usually drawn by the browser, so this check deliberately leaves them out.
Custom-styled dropdowns
Some component libraries hide the native control and draw their own replacement. Silktide skips the hidden native control, and the visible replacement is assessed like any other element where possible.