diff --git a/src/app/globals.css b/src/app/globals.css index 5a0fe441c..35070fe23 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -16,15 +16,19 @@ body { } } -/* Search input placeholder — WCAG AA contrast on dark indigo hero background */ +/* Search input placeholder — WCAG AA contrast on indigo-600→indigo-900 gradient. + * placeholder-white/95 (and InheritedTailwind .placeholder-white/95) gives >=4.5:1 + * contrast once alpha-composited over the bg-white/10 field tint. The previously + * shipped 0.85 white failed AA on the lightest gradient edge (indigo-600 ≈ 4.21:1). + */ .search-input::placeholder { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, 0.95); } .search-input::-webkit-input-placeholder { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, 0.95); } .search-input::-moz-placeholder { - color: rgba(255, 255, 255, 0.85); + color: rgba(255, 255, 255, 0.95); } diff --git a/src/app/search/SearchResultsClient.tsx b/src/app/search/SearchResultsClient.tsx index dcff10214..63eeef02d 100644 --- a/src/app/search/SearchResultsClient.tsx +++ b/src/app/search/SearchResultsClient.tsx @@ -730,7 +730,7 @@ export default function SearchResultsClient({ } }} placeholder="Search sneakers, laptops, espresso machines..." - className="h-14 w-full rounded-2xl border border-slate-200 bg-white pl-12 pr-4 text-base text-slate-900 shadow-sm outline-none transition focus:border-amber-400 focus:ring-4 focus:ring-amber-100" + className="h-14 w-full rounded-2xl border border-slate-200 bg-white pl-12 pr-4 text-base text-slate-900 placeholder:text-slate-600 shadow-sm outline-none transition focus:border-amber-400 focus:ring-4 focus:ring-amber-100" aria-label="Search products" role="combobox" aria-autocomplete="list" diff --git a/src/components/HomeProductSearch.tsx b/src/components/HomeProductSearch.tsx index 81648f123..012c0ab7d 100644 --- a/src/components/HomeProductSearch.tsx +++ b/src/components/HomeProductSearch.tsx @@ -75,7 +75,7 @@ export function HomeProductSearch() { } }} placeholder="Search products..." - className="search-input w-full rounded-xl border-2 border-white/20 bg-white/10 py-5 pl-14 pr-4 text-lg text-white placeholder-white/85 transition-all focus:border-white focus:bg-white/20 focus:outline-none focus:ring-4 focus:ring-white/20" + className="search-input w-full rounded-xl border-2 border-white/20 bg-white/10 py-5 pl-14 pr-4 text-lg text-white placeholder-white/95 transition-all focus:border-white focus:bg-white/20 focus:outline-none focus:ring-4 focus:ring-white/20" aria-label="Search products" aria-invalid={Boolean(error)} aria-describedby={error ? errorId : undefined}