📘 DOC: Example/Template color contrast ratios

[stramel]

I noticed by default in the examples/templates, the color contrast ratios come up in the accessibility portion of the Lighthouse Audit.

Primarily seems to be these 2 colors:

--theme-accent(--color-orange): #ff5d01 - against white provides ratio of 3.08

and

--theme-text-lighter(--color-gray-400): #9ca3af - against white provides ratio of 2.53

For smaller font sizes, the minimum ratio should be 4.5 to meet AA standards.
For larger font sizes, the minimum ratio should be 3.0 to meet AA standards.

It would great to provide no accessibility issues out of the box on our examples/templates.

[jonathantneal]

I’ll take this one. I recently added an accessibility audit to the docs site that will catch these kinds of coloring issues.

[sarah11918]

Hi @stramel 👋 I'm sorry that there was no recent feedback on this issue, but we did recently redesign the doc site themes and colours, and I know we have some outstanding issues/PRs as we finalize things there.

So, I'm going to close this issue here, with thanks for pointing out the contrast ratio. I know we absolutely did look at this when creating a new theme, and I think we might still be fine-tuning it. So, this request is captured elsewhere, but you're welcome to re-open new issues at any time!