Check quote-form text and controls in both light and dark modes

List the form states that change with the theme

Open the published form in every theme the site supports. Inspect labels, helper text, entered answers, placeholders, links and validation errors. Then focus a field and select a checkbox or service option. Theme changes can update backgrounds without updating all component text or indicators, so the main page can look readable while the form's active state is difficult to see.

Measure text separately from necessary control cues

WCAG's text-contrast criterion uses 4.5:1 for normal text and 3:1 for qualifying large text, with specified exceptions. Its non-text criterion separately addresses necessary control cues. Use the correct current criterion for each element rather than one blanket rule. A narrow form review does not establish complete accessibility conformance.

Source checks: W3C: Understanding Contrast (Minimum) · W3C: Understanding Non-text Contrast

Check rendered states instead of isolated swatches

Ask the maintainer or reviewer to inspect computed rendered colors, including opacity and background beneath the element. Measure actual pairs with a suitable contrast tool. Record the element and state, not just the brand color name. Where text sits on a photograph or variable background, inspect the relevant rendered region rather than assuming a single solid-color pair.

• List supported themes and relevant form states: default, focus, selected, error and pending.
• Measure normal labels, helper text and entered answers against their rendered backgrounds.
• Check necessary borders, indicators and icons against adjacent colors under the applicable criterion.
• Add clear text or structural cues where status otherwise depends only on color.
• Retest the complete quote request after changing theme-specific component styles.

Avoid relying on color alone for status

Do not round a just-below-threshold ratio up to a pass. A pale placeholder is not a substitute for a persistent readable label. Fixing a red error color can leave the error's text too faint in dark mode. Avoid assuming every border is required; identify the cue necessary to perceive and use the control.

Record the actual tested combinations

Keep a state matrix with actual color combinations, measured ratios and unresolved items. Recheck the elements changed by the repair and the neighboring states. The measurements establish contrast for those rendered combinations. They do not prove that every user can operate the form or certify the whole website's accessibility.

Keep theme tests with form maintenance

Store theme-specific form tokens and the test matrix with the design handoff. When a plugin or component changes, retest its active and error states. Ask the owner to approve readable results rather than preserving a brand color at the expense of the task. Other accessibility checks, such as labels and keyboard operation, remain separate work.

Worked example: illustrative normal-text color pairs

For example, a form uses opaque #64748B helper text on #FFFFFF for 16-pixel normal-weight text. Its calculated contrast is approximately 4.759:1, which passes the normal-text 4.5:1 threshold. Reusing #64748B on the dark background #0F172A produces approximately 3.751:1, which fails that threshold.

Changing the dark-theme helper text to #CBD5E1 on #0F172A produces approximately 12.024:1. These are opaque sRGB teaching pairs, not measurements of a real website. Displayed ratios are rounded for readability, while each pass/fail decision uses the unrounded calculation. The maintainer must still inspect actual opacity, backgrounds and form states, and test required control cues separately.

Questions about this task