react-doctor/no-gray-on-colored-background

Use a darker shade of the background color for text, or white/near-white for contrast. Gray text on colored backgrounds looks washed out

Validation prompt

Confirm the detector match and collect the required evidence before deciding whether an edit is warranted.

Fires when className contains a gray-family text utility (text-gray|slate|zinc|neutral|stone-NNN) and a chromatic background utility such as bg-blue-500. This is a color-family heuristic, not a contrast calculation: it cannot resolve theme variants, opacity, gradients, inherited colors, overlays, or the final computed foreground and background. Pale tints with dark neutral text can already pass, so measure the rendered contrast before changing tokens.

Evidence boundary

The diagnostic proves only that the detector’s modeled source pattern matched. It does not prove runtime impact, product intent, rendered failure, or that one remediation is correct.

Establish the environment, repository policy, exceptions, and required rendered or runtime evidence before deciding the occurrence.

The design tag controls activation and discovery. It does not determine the rule’s proof class.

Record one outcome:

• Confirmed failure: The required evidence establishes the violation.
• Rejected: A documented exception or false-positive predicate applies.
• Needs evidence: Named evidence can still be collected.
• Unavailable: Required evidence cannot be collected in this run.
• Waived with evidence: An authorized, scoped exception applies to an established failure.
• Observation: The review records an optional tradeoff without claiming a defect.

A waiver records its scope, authority, evidence, and review condition. It is not a pass or false positive.

Default severity is registry metadata. Use the occurrence’s JSON severity after repository configuration when ordering real findings.

Fix prompt

Apply this candidate correction only after the required evidence confirms the risk.

Choose foreground and background tokens that fit the existing theme, then verify their rendered contrast: at least 4.5:1 for normal text, or 3:1 only for large-scale text (at least 24 CSS px regular or 18.66 CSS px bold). Include opacity, overlays, gradients, and interaction/theme states in the measurement; do not switch mechanically to white or a same-hue token without checking the result. See https://webaim.org/articles/contrast/

Repository-wide copy prompt

Use this repository-wide prompt only after validating each occurrence. For one occurrence, use the guidance above.