How to Make Long Forms Easier to Read on Smartphones with Color: Organizing Input Fields

When people scroll through a long form on a smartphone, they may lose track of what they are entering and what remains to be checked. Rather than adding a different color to every field, group related questions together and keep colors consistent for the same purposes. Here is an example based on a registration form for a local running event.

Organize fields into meaningful groups instead of giving each one a different color

Start by dividing the form into sections such as “Contact details,” “Participation details,” and “Review and consent.” Give each section a short heading, keep its heading close to the associated fields, and leave a little more space before the next section. This helps people understand their location as the fields continue down a long mobile page.

Repeat the same pale color for section heading bands and use a common white surface behind the fields. A contact section does not need to be blue while a participation section is green. Do not depend on small differences between pale background colors to separate groups; reinforce the structure with heading weight, numbering, and spacing.

Identify required and optional fields with words next to their labels, not color alone. A faint placeholder inside an input should not replace a visible label, since it may disappear when someone starts typing. Reserve error colors for actual validation problems rather than using them to decorate ordinary groups of fields.

A seven-color example for a running-event registration form

Imagine a single-page registration form with three sections. “1 Contact details” asks for a name and email address; “2 Participation details” asks for an event category and preferred T-shirt size; and “3 Review and consent” contains the important notices and a consent checkbox. The following HEX codes (hexadecimal color values used on the web) are an example palette for this form.

Use pale blue-gray ■#F3F6F8 for the page background and white ■#FFFFFF for the field panels. These two surfaces contrast by approximately 1.09:1, so that subtle difference should not be the only way to define a group. Use dark slate ■#283B49 for body text and field labels, providing approximately 11.59:1 contrast against white ■#FFFFFF.

Give every section heading band the same light blue ■#E6F0F5 background with dark slate ■#283B49 lettering. The heading text contrasts at approximately 10.01:1 against the band. Add a number to headings such as “1 Contact details.” The band itself differs from the white input surface ■#FFFFFF by only approximately 1.16:1, so use spacing and bold headings to make the division clear.

For field instructions and optional notes, use a quieter blue-gray ■#4D6270 against white ■#FFFFFF. This combination has approximately 6.37:1 contrast. Use gray-blue ■#71838F for input outlines; it contrasts at approximately 3.93:1 against the white input surface ■#FFFFFF, helping the input area remain visible. If the same outline is used around the group panels, it contrasts at approximately 3.62:1 against the page background ■#F3F6F8.

Instead of placing a strongly colored button inside each group, finish the form with a single “Review registration details” action. Give this button a deep blue ■#145C76 background and white ■#FFFFFF text, with a contrast ratio of approximately 7.44:1. The button also contrasts at approximately 6.86:1 against the page background ■#F3F6F8. To show keyboard focus (the field currently selected for keyboard input), the same deep blue ■#145C76 can be used as an outer outline around a field on a white ■#FFFFFF surface.

Check grouping when text is enlarged or the form is partly completed

Scroll through the form at mobile widths and check whether each heading remains close enough to its fields. Enlarge the text to make sure instructions are not clipped. With the on-screen keyboard open, it also helps when the current field’s label remains visible. If the visitor moves to a review page, check that they can return to correct a field without losing the information already entered.

Visual grouping alone may not tell screen-reader users how related controls belong together. In HTML (the markup language used to structure web pages), related choices can be grouped with fieldset and given a group title with legend. Each individual field also needs an appropriate label.

WCAG 2.2 (Web Content Accessibility Guidelines) generally requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. Visual details necessary to identify inputs, such as their outlines, generally need at least 3:1 against adjacent colors. HueRoll can compare a selected color with white or black, but it cannot directly compare arbitrary pairs of colors or automatically determine AA or AAA compliance. Check combinations such as the light blue heading band ■#E6F0F5 and dark slate text ■#283B49 with a separate contrast calculation before using them.