# PR: Fix Insufficient Text-to-Background Contrast in Code Blocks (Issue #886)

[NalinDalal]

Problem / Issue

• Issue: Code blocks, especially the function keyword, had insufficient text-to-background contrast (e.g., #D73A49 on #F7F7F7), failing WCAG 2.1 AA (minimum 4.5:1 contrast ratio).
• Source: Shiki syntax highlighter was generating correct colors, but downstream CSS (e.g., .code-box, bg-bg-gray-40) was overriding the background, muting the intended high-contrast theme.
• Symptoms: axe DevTools flagged <span style="color:#D73A49">function</span> as having a contrast ratio of 4.26:1 (below 4.5:1).

How We Checked for the Issue

• Ran axe DevTools on http://localhost:4321/tutorials/get-started/.
• Inspected the DOM and CSS cascade for code blocks and syntax-highlighted spans.
• Searched the codebase for .code-box, bg-bg-gray-40, and color overrides.
• Verified that Shiki was outputting the correct inline styles, but the background was being set by a utility class or CSS rule.

How We Tackled It

1. Removed the bg-bg-gray-40 class from code block containers to prevent the light gray background from overriding the theme.
2. Set .code-box background to pure white (#fff) in the main global styles for maximum contrast.
3. Ensured no CSS rules override Shiki's inline colors for code spans.
4. Deleted the old manual patch that forced the function keyword to black, as it was a workaround, not a real fix.
5. Cleaned up styles by removing the now-unnecessary code-contrast-fix.scss file and its import.

What Changes Were Made

• Edited src/components/CodeContainer/index.astro to remove bg-bg-gray-40 from code block classes.
• Updated styles/global.scss to set .code-box { background-color: #fff !important; } and removed the import for code-contrast-fix.scss.
• Deleted src/styles/code-contrast-fix.scss.
• Searched and confirmed no color overrides exist for .code-box or .astro-code in the codebase.

How We Ensured the Issue Was Tackled

• Rebuilt the site and cleared browser cache.
• Re-ran axe DevTools: the contrast issue for code blocks is no longer reported.
• Inspected the DOM: code blocks now have a white background and Shiki's inline colors are respected.
• Confirmed that the fix is robust and does not rely on manual color patches.

Next Steps

• Address other accessibility issues flagged by axe (button labels, link distinction, heading order, landmarks) in separate PRs.

---

This PR closes #886 and ensures all code blocks meet WCAG 2.1 AA contrast requirements.

[ksen0]

Hi @NalinDalal , thank you for your effort here but as I mentioned in #886, there was already someone working on this; additionally, the approach this PR takes is not quite comprehensive enough, and themes rather than overrides would be preferred. Thanks for understanding!