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

Update default theme skin to meet WCAG 2.0 AA contrast ratio thresholds #67

Closed
tony-ho opened this issue Jul 17, 2018 · 3 comments
Closed

Comments

@tony-ho
Copy link
Contributor

tony-ho commented Jul 17, 2018

Description

The default theme has a number of elements that fail the Web Content Accessibility Guidelines (WCAG) 2.0 AA contrast ratio thresholds (https://dequeuniversity.com/rules/axe/2.2/color-contrast).

The Lighthouse Accessibility audit identifies the failing elements:

  • hyperlinks/buttons
  • quote/blockquote
  • footer text

The failing elements can be addressed with the following CSS changes:

Hyperlinks/buttons

  • Increase contrast of $accent-color with change from #00848a to #00838a

Quote/blockquote/footer

  • Increase contrast of $text-color with change from #222831 to #181c22, or
  • Change color value from tint($text-color, 40%) to tint($text-color, 35%) to reduce tint for blockquote, q (_base.scss) and .site-footer (_footer.scss)

The first approach can be implemented with a new theme skin.

Alternatively, the default theme can be updated directly with the $accent-color change, and either the $text-color change or reduced tint.

I'm happy to create a pull request if any of these approaches are acceptable.

Environment

  • Basically Basic version: 1.4.0
  • Ruby gem or remote theme version: Both
  • Jekyll version: 3.7.3
  • Git repository URL:
  • Operating system: All
  • GitHub Pages hosted (if yes provide URL to site):

Expected behavior

Increase the default theme skin score to 100 on the Lighthouse Accessibility audit.

Steps to reproduce the behavior

  1. In Google Chrome, go to https://mmistakes.github.io/jekyll-theme-basically-basic/markup/markup-html-elements-and-formatting/
  2. Open Chrome DevTools.
  3. Click the Audits tab.
  4. Click Perform an audit. DevTools shows you a list of audit categories. Untick all except Accessibility.
  5. Click Run audit. Once completed, the Lighthouse report lists the elements that do not have a sufficient contrast ratio.
@mmistakes
Copy link
Owner

Thanks for this. If you have time to submit a pull request that would be great.

@tony-ho
Copy link
Contributor Author

tony-ho commented Jul 17, 2018

Sure. Would you prefer the changes to be in a new, separate theme, or made to the existing default theme?

@mmistakes
Copy link
Owner

In the existing.

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

No branches or pull requests

2 participants