Improve readonly input APCA Lc values for a11y

[qheaden-stack]

Summary

This PR modifies the font color for readonly inputs to improve their contrast, matching the recommendations by APCA for accessibility friendly contrast values.

Here are before and after screenshots of the readonly input in various color modes:

Before & After for Light Mode:

Before & After for Dark Mode:

Before & After For Light Mode High Contrast:

Before & After For Dark Mode High Contrast:

After for Dark Mode High Contrast:

[netlify]

✅ Deploy Preview for stacks ready!

Name	Link
🔨 Latest commit	9634fa6
🔍 Latest deploy log	https://app.netlify.com/sites/stacks/deploys/66b4ca797c5d2e00085edffa
😎 Deploy Preview	https://deploy-preview-1799--stacks.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[CGuindon]

Tested in the PR env

[dancormier]

This looks good! The tests pass and the text contrast looks good while keeping it differentiated from the writable input. Thanks for making this fix @qheaden-stack!

The only thing I'm curious about is if we should increase the contrast on that lock icon:

I'm not sure we have any requirements specifically for supplementary icons (WCAG requires a 3:1 ratio for icons I believe, but we don't base our contrast targets on WCAG), but the icon is Lc 27 by APCA's measurement which seems real low.

@CGuindon any thoughts on bumping the lock icon from 300 to 400? Here's the input with the lock at 400 (Lc 69):

The 350 stop is also an option if we wanna split the difference (Lc 36):

[dancormier]

@CGuindon isn't available today so I'm gonna go ahead and merge this PR, but we can always tweak later if we decide to change the icon color.

[CGuindon]

Illustration minimums are 350 — bumping to 400 is fine.