How Should You Choose Error Colors for Mobile Forms? How to Make Errors Noticeable on Small Screens

On a mobile form, an error can go unnoticed when the on-screen keyboard or a fixed button covers the message. Choosing a striking red is not enough. To make errors recognizable on a small screen, design the input border, explanatory text, and message placement together so visitors know which field needs attention and how to fix it.

Use a consistent error color for the field and its explanation

Choose a reasonably dark error color that contrasts with the surrounding surface. Rather than changing the field border alone, add a specific message immediately below it, such as “Please select a session.” The words identify the problem and suggest a correction even when the border’s color difference is difficult to perceive.

On a phone, an error list placed only at the beginning of a form may be far away from the field someone is editing. If there are several errors, show a concise count and leave a short explanation beside each affected field. Highlight the places that need attention instead of filling the entire screen with alarming color that competes with the rest of the form.

Choose when validation happens—for example, after a submission attempt or when a completed field is checked—instead of immediately painting every required field as invalid before the visitor starts entering information. After the visitor corrects a value, validate it again and clear the error styling only when the issue is resolved.

A color scheme for a pottery workshop registration form

Imagine a mobile pottery workshop registration page where a required session has not been chosen and the participant count is entered as zero. This example form accepts one to four participants. The following HEX values (color codes written using hexadecimal digits after a # sign) are a proposed palette for this page.

Set the page background to pale blue-gray ■#F5F7FA, the form surface to white ■#FFFFFF, and labels and ordinary text to dark navy ■#23364A. Dark navy against the white form surface ■#FFFFFF has a contrast ratio of approximately 12.37:1, and against the page background ■#F5F7FA the ratio is about 11.52:1.

Use muted blue-gray ■#647788 for the borders of ordinary input fields. It contrasts at approximately 4.63:1 against the white input surface ■#FFFFFF and 4.31:1 against the surrounding page background ■#F5F7FA. The field outline remains distinguishable without making unaffected inputs look like errors.

For invalid fields, change the border to deep raspberry ■#972F46. Against a white input ■#FFFFFF, that border has a contrast ratio of approximately 7.47:1. Place “Please select a session” beside the session control and “Enter a participant count from 1 to 4” below the number field. Use the same deep raspberry ■#972F46 for this text on a pale pink ■#FFF0F3 message background, providing approximately 6.76:1 contrast.

Pale pink ■#FFF0F3 differs from the white input surface ■#FFFFFF by only around 1.10:1. Do not rely on the pale tint alone to identify an error; keep the dark message and colored border. When a field receives keyboard focus, you can add a separate dark blue ■#1B587C outer outline. That blue contrasts at approximately 7.68:1 against white ■#FFFFFF. Leave space between the focus outline and the error border so both states remain identifiable.

For the “Review registration details” button, choose deep teal ■#196667 with white ■#FFFFFF text. Its text-to-button contrast ratio is approximately 6.69:1, while the button contrasts at approximately 6.24:1 against the page background ■#F5F7FA. Reserve deep raspberry ■#972F46 for errors instead of using it as the main action color, keeping the action and warning roles distinct.

Check whether the message remains visible with the keyboard open

If validation finds errors after submission, tell the visitor “Two fields need your attention” and provide a way to reach the first affected field. Test with the mobile keyboard visible: the field and its explanation must remain on screen rather than moving behind the keyboard. Leave space so a sticky submit bar and the device’s bottom controls do not cover the messages.

Preserve the values already entered in other fields while someone corrects an error. Also test enlarged text and landscape orientation so messages do not become clipped. Where appropriate, HTML (the markup language that structures web pages) attributes such as aria-invalid and aria-describedby can convey an invalid state and associate explanatory text with the relevant input.

WCAG 2.2 (Web Content Accessibility Guidelines) requires automatically detected input errors to identify the affected field and describe the problem in text. When a correction is known, it also requires appropriate suggestions, subject to specified exceptions. Normal-sized text generally needs at least 4.5:1 contrast against its background, and visual information needed to identify controls generally needs 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. For combinations such as the error text ■#972F46 on the pale message background ■#FFF0F3, calculate the contrast separately before use.