Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve color contrast of syntax highlighting #185

Merged
merged 1 commit into from
Dec 16, 2021

Conversation

geoffrich
Copy link
Member

The color contrast of the syntax highlighting in the code samples did not meet WCAG AA standards (4.5 for small text), which could make it hard to read for people with low vision. This PR updates the colors used to match that threshold. This reduces the count of color contrast Axe violations to 233 from 1493 instances.

Contrast changes (checked using https://contrast-ratio.com with #f6fafd background):

  • code-comment: was 3.93, now 5.23
  • code-function: was 4.01, now 4.5
  • code-string: was 3.49, now 4.65
  • code-number: was 2.84, now 4.89
  • code-template-string: was 3.05, now 4.85

Before:
image

After:
image

I made a similar PR against the old site repo (sveltejs/svelte#5681), but it looks like those changes got lost at some point in the migration. This PR uses those changes as a base but leaves all colors as HSL and does not change tokens that now meet the 4.5 threshold.

@vercel
Copy link

vercel bot commented Dec 16, 2021

@geoffrich is attempting to deploy a commit to the Svelte Team on Vercel.

A member of the Team first needs to authorize it.

@vercel
Copy link

vercel bot commented Dec 16, 2021

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/svelte/svelte-dev/8prGdqCJXGELwWApLse9jn4sve2X
✅ Preview: https://svelte-dev-git-fork-geoffrich-a11y-contrast-svelte.vercel.app

@Rich-Harris
Copy link
Member

thank you!

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.

None yet

2 participants