Fixes code example colour contrast

[delucis]

Description

• Addresses a colour contrast issue reported in Accessibility audit with several findings (serious and best practise) #2693
• Expressive Code performs colour contrast correction automatically, but we had misconfigured a background colour setting, so Starlight’s default theme was not being properly taken into account in these calculations.
• This PR fixes that and ensures code blocks have sufficient text contrast.
• Shout out to @hippotastic for helping with the solution.

[changeset-bot]

🦋 Changeset detected

Latest commit: b322788

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@astrojs/starlight	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[netlify]

✅ Deploy Preview for astro-starlight ready!

Name	Link
🔨 Latest commit	b322788
🔍 Latest deploy log	https://app.netlify.com/sites/astro-starlight/deploys/6781912c08fa700009ce1acb
😎 Deploy Preview	https://deploy-preview-2708--astro-starlight.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 100 (no change from production) Accessibility: 100 (no change from production) Best Practices: 100 (no change from production) SEO: 100 (no change from production) PWA: - View the detailed breakdown and full score reports

---

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

[astrobot-houston]

size-limit report 📦

Path	Size
/index.html	6.89 KB (0%)
/_astro/*.js	21.19 KB (0%)
/_astro/*.css	13.76 KB (+0.07% 🔺)

[hippotastic]

Just a heads up: The code block styles on this page seem to be broken for me on iOS Safari in the deploy preview, not sure why that is the case:

https://deploy-preview-2708--astro-starlight.netlify.app/environmental-impact/#caching

The live site looks good. I can't imagine this one-line change causing this, so there might be something else going on.

(Edit: The preview now also works after doing a rebuild with a cleared cache. Apparently this was a content collections caching issue unrelated to this particular change or EC. I'd be happy to let Astro know about any config changes requiring cache invalidation if an API is made available.)

[delucis]

Just a heads up: The code block styles on this page seem to be broken for me on iOS Safari in the deploy preview, not sure why that is the case:

deploy-preview-2708--astro-starlight.netlify.app/environmental-impact#caching

Oh that’s very odd… and I can reproduce the exact same behaviour in the dev server too. It appears that the Expressive Code styles are not loaded at all on that page:

[delucis]

Figured out this was a caching issue due to how the Astro 5 content collection implementation caches Markdown across builds. Rebuilding on Netlify with a clear cache fixed it.

This does make this change a bit riskier than it appears. Users might need to astro sync --force or manually remove the cache (e.g. via UI in deployment environments) to avoid issues when upgrading.

[delucis]

Would have loved to release this as a patch, but I think it will be safer in our next minor. At that time we can bump the astro peer dependency to 5.1.0 to include withastro/astro#12767 which should help a bit with CC caching issues (plus forcing an Astro version bump will ensure the cache is flushed).

[hippotastic]

LGTM! I checked the contrast in various pages, including tricky areas like marked lines including comments that had issues in the live site, and now the contrast levels are accessible everywhere.