Skip to content

fix(tokens): update code-color token to meet WCAG AA contrast#4269

Open
e0d wants to merge 1 commit intorelease-23.xfrom
e0d/fix-code-color-contrast
Open

fix(tokens): update code-color token to meet WCAG AA contrast#4269
e0d wants to merge 1 commit intorelease-23.xfrom
e0d/fix-code-color-contrast

Conversation

@e0d
Copy link
Copy Markdown

@e0d e0d commented May 2, 2026

The light theme code-color token (#E83E8C) failed WCAG 1.4.3 contrast requirements, achieving 3.81:1 on white and 3.56:1 on off-white backgrounds — both below the 4.5:1 minimum for normal-weight text.

Updated color.code.base to reference {color.brand.500} rather than a raw hex value. This resolves the contrast failure (#9D0054, ~9:1 on white) and aligns with the established pattern of component tokens referencing palette tokens (e.g. success → green, info → teal). It also ensures that theme overrides to brand-500 automatically propagate to inline code text color.

Compiled output: --pgn-color-code-base: var(--pgn-color-brand-500)

Identified via WCAG 2.2 AA audit using static source analysis and automated page scanning (OpenEdX_ActionRowComp.pdf, 01 May 26).

AI assistance: Code change, contrast analysis, and token architecture review developed with Claude (claude-sonnet-4-6). Conversation informed the audit findings, color selection, and token pipeline tracing.

Description

Include a description of your changes here, along with a link to any relevant Jira tickets and/or Github issues.

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
  • Does your change adhere to the documented style conventions?
  • Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
  • Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
  • Were your changes tested in the example app?
  • Is there adequate test coverage for your changes?
  • Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

  • Verify your changes were released to NPM at the expected version.
  • If you'd like, share your contribution in #show-and-tell.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

The light theme code-color token (#E83E8C) failed WCAG 1.4.3 contrast
requirements, achieving 3.81:1 on white and 3.56:1 on off-white
backgrounds — both below the 4.5:1 minimum for normal-weight text.

Updated color.code.base to reference {color.brand.500} rather than a
raw hex value. This resolves the contrast failure (#9D0054, ~9:1 on
white) and aligns with the established pattern of component tokens
referencing palette tokens (e.g. success → green, info → teal). It
also ensures that theme overrides to brand-500 automatically propagate
to inline code text color.

Compiled output: --pgn-color-code-base: var(--pgn-color-brand-500)

Identified via WCAG 2.2 AA audit using static source analysis and
automated page scanning (OpenEdX_ActionRowComp.pdf, 01 May 26).

AI assistance: Code change, contrast analysis, and token architecture
review developed with Claude (claude-sonnet-4-6). Conversation
informed the audit findings, color selection, and token pipeline
tracing.

Co-authored-by: Claude <claude@anthropic.com>
@netlify
Copy link
Copy Markdown

netlify Bot commented May 2, 2026

Deploy Preview for paragon-openedx-v23 ready!

Name Link
🔨 Latest commit 7a58021
🔍 Latest deploy log https://app.netlify.com/projects/paragon-openedx-v23/deploys/69f64cf6cb1ca00008a86623
😎 Deploy Preview https://deploy-preview-4269--paragon-openedx-v23.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

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

@codecov
Copy link
Copy Markdown

codecov Bot commented May 2, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.40%. Comparing base (51702d5) to head (7a58021).

Additional details and impacted files
@@              Coverage Diff              @@
##           release-23.x    #4269   +/-   ##
=============================================
  Coverage         94.40%   94.40%           
=============================================
  Files               242      242           
  Lines              4309     4309           
  Branches           1020     1020           
=============================================
  Hits               4068     4068           
  Misses              237      237           
  Partials              4        4           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants