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

Modified code snippets' theme color palette to achieve better contrast #980

Merged
merged 1 commit into from
Jun 29, 2024

Conversation

jasongao97
Copy link
Contributor

@jasongao97 jasongao97 commented Jun 7, 2024

This pull request modifies the colors used in our code snippet highlighting to ensure a minimum color contrast ratio of 4.5:1 for better accessibility. The specific changes are as follows:

1. Keyword Colors:

.hljs-doctag,
.hljs-keyword,
.hljs-meta .hljs-keyword,
.hljs-template-tag,
.hljs-template-variable,
.hljs-type,
.hljs-variable.language_ {
  /* prettylights-syntax-keyword */
  /* color: #d73a49; */
  color: #c32837;
}

2. Built-in and Symbol Colors:

.hljs-built_in,
.hljs-symbol {
  /* prettylights-syntax-variable */
  /* color: #e36209; */
  color: #aa4908;
}

3. Comment and Formula Colors:

.hljs-comment,
.hljs-code,
.hljs-formula {
  /* prettylights-syntax-comment */
  /* color: #6a737d; */
  color: #606771;
}

4. Name, Quote, and Selector Tag Colors:

.hljs-name,
.hljs-quote,
.hljs-selector-tag,
.hljs-selector-pseudo {
  /* prettylights-syntax-entity-tag */
  /* color: #22863a; */
  color: #1e7631;
}

These changes have been tested using the WAVE Evaluation tools.

It will resolve #951

Copy link

netlify bot commented Jun 7, 2024

Deploy Preview for nature-of-code-pdf ready!

Name Link
🔨 Latest commit 1032a1f
🔍 Latest deploy log https://app.netlify.com/sites/nature-of-code-pdf/deploys/6662b0334f07420008c8a06f
😎 Deploy Preview https://deploy-preview-980--nature-of-code-pdf.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

Copy link

netlify bot commented Jun 7, 2024

Deploy Preview for nature-of-code-2nd-edition ready!

Name Link
🔨 Latest commit 1032a1f
🔍 Latest deploy log https://app.netlify.com/sites/nature-of-code-2nd-edition/deploys/6662b03337cc460008133dfc
😎 Deploy Preview https://deploy-preview-980--nature-of-code-2nd-edition.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

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

@shiffman
Copy link
Member

shiffman commented Jun 8, 2024

This looks great! @tuantinghuang if you want to double-check it please go ahead and then I will merge!

@shiffman
Copy link
Member

Going to go ahead and merge this we can always adjust later!

@shiffman shiffman merged commit 42cf5ac into main Jun 29, 2024
9 checks passed
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.

[a11y] check color contrast for code syntax highlighting
2 participants