Skip to content

Add WCAG AAA colour contrast option to theme editor#2282

Merged
delucis merged 13 commits intomainfrom
chris/aaa-contrast
Sep 4, 2024
Merged

Add WCAG AAA colour contrast option to theme editor#2282
delucis merged 13 commits intomainfrom
chris/aaa-contrast

Conversation

@delucis
Copy link
Copy Markdown
Member

@delucis delucis commented Sep 4, 2024 •
edited
Loading

Description

  • Adds a toggle to the Starlight theme editor to allow people to opt in to shades that pass WCAG’S AAA requirements (7:1 contrast ratio for body text).
  • Preview: https://deploy-preview-2282--astro-starlight.netlify.app/guides/css-and-tailwind/#color-theme-editor
  • The getPalettes() function used to generate a colour palette now takes a minimum contrast to enforce and uses it for the shades which are currently marginal (pass AA requirements but not AAA).
  • Contrast calculations are done with culori’s wcagContrast() method. I used that to compute a contrast and then colours without sufficient contrast have their luminance incremented/decremented in 0.5% steps until the contrast requirement is met.

Browser testing

Tested on macOS with:

  • Chrome 128.0.6613.113
  • Firefox 129.0.2 and 130.0
  • Safari 17.6

Tested on Android with:

  • Firefox

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Sep 4, 2024 •
edited
Loading

⚠️ No Changeset found

Latest commit: 1b2a4c4

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

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

@github-actions github-actions bot added the 📚 docs Documentation website changes label Sep 4, 2024
@netlify
Copy link
Copy Markdown

netlify bot commented Sep 4, 2024 •
edited
Loading

✅ Deploy Preview for astro-starlight ready!

Name Link
🔨 Latest commit 1b2a4c4
🔍 Latest deploy log https://app.netlify.com/sites/astro-starlight/deploys/66d8d513ec74000008e023e7
😎 Deploy Preview https://deploy-preview-2282--astro-starlight.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
Lighthouse
Lighthouse		 1 paths audited
Performance: 100 (no change from production)
Accessibility: 100 (no change from production)
Best Practices: 100 (no change from production)
SEO: 92 (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
Copy link
Copy Markdown
Contributor

astrobot-houston commented Sep 4, 2024 •
edited
Loading

Lunaria Status Overview

🌕 This pull request will trigger status changes.

Learn more

By default, every PR changing files present in the Lunaria configuration's files property will be considered and trigger status changes accordingly.

You can change this by adding one of the keywords present in the ignoreKeywords property in your Lunaria configuration file in the PR's title (ignoring all files) or by including a tracker directive in the merged commit's description.

Tracked Files

Locale File Note
en guides/css-and-tailwind.mdx Source changed, localizations will be marked as outdated.
Warnings reference
Icon Description
🔄️ The source for this localization has been updated since the creation of this pull request, make sure all changes in the source have been applied.

@astrobot-houston
Copy link
Copy Markdown
Contributor

astrobot-houston commented Sep 4, 2024 •
edited
Loading

size-limit report 📦

Path Size
/index.html 6.15 KB (-0.02% 🔽)
/_astro/*.js 22.33 KB (+0.01% 🔺)
/_astro/*.css 13.72 KB (0%)

HiDeoo
HiDeoo approved these changes Sep 4, 2024
View reviewed changes
Copy link
Copy Markdown
Member

@HiDeoo HiDeoo left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What a lovely PR, really amazing addition to the theme editor 👏

delucis and others added 3 commits September 4, 2024 22:29
@delucis @HiDeoo
Align preset and contrast picker focus styles
5072db0 
Co-Authored-By: HiDeoo <494699+HiDeoo@users.noreply.github.com>
@delucis @HiDeoo
Add link to more information about AA/AAA contrast levels
943e308 
Co-Authored-By: HiDeoo <494699+HiDeoo@users.noreply.github.com>
@delucis
Merge branch 'main' into chris/aaa-contrast
1b2a4c4
@delucis delucis merged commit 782def0 into main Sep 4, 2024
@delucis delucis deleted the chris/aaa-contrast branch September 4, 2024 21:51
@jsparkdev jsparkdev mentioned this pull request Sep 5, 2024
Merged
@HiDeoo HiDeoo mentioned this pull request Sep 5, 2024
Merged
HiDeoo added a commit to HiDeoo/starlight that referenced this pull request Sep 7, 2024
@HiDeoo
Merge branch 'main' into hd-feat-docs-components
1ac47f1 
* main: (37 commits)
  [ci] format
  i18n(ko-KR): update `manual-setup.mdx` (withastro#2294)
  i18n(ko-KR): update `configuration.mdx` (withastro#2295)
  [ci] release (withastro#2292)
  Add support for SSR (withastro#1255)
  Add Markdoc preset and example (withastro#2249)
  Refactor sidebar persistence logic for better slow device performance (withastro#2242)
  [ci] format
  Add docs.ryzekit.com to showcase (withastro#2291)
  Update astro dependency to 4.15.3 across monorepo (withastro#2289)
  [ci] release (withastro#2290)
  Prevent Zod errors from crashing build (withastro#2288)
  i18n(fr): update `guides/css-and-tailwind` (withastro#2286)
  i18n(ko-KR): update `css-and-tailwind.mdx` (withastro#2284)
  Add WCAG AAA colour contrast option to theme editor (withastro#2282)
  [ci] release (withastro#2283)
  Parse `<StarlightPage />` frontmatter asynchronously (withastro#2279)
  Ensure unhandled directives are restored without any extra whitespace (withastro#2281)
  i18n(fr): update `resources/plugins` (withastro#2278)
  i18n(ko-KR): update `plugins.mdx` (withastro#2277)
  ...
@Nin3lee Nin3lee mentioned this pull request Sep 23, 2024
Merged
@morinokami morinokami mentioned this pull request Nov 2, 2024
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@HiDeoo HiDeoo HiDeoo approved these changes

Assignees

No one assigned

Labels

📚 docs Documentation website changes

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@delucis @astrobot-houston @HiDeoo