This repository has been archived by the owner on Apr 12, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 21
Make color matrix accessible #94
Merged
+304
−36
Merged
Changes from all commits
Commits
Show all changes
14 commits
Select commit
Hold shift + click to select a range
f7c07c9
Add _data/palette.yml.
toolness 80c0c9e
Render color palette w/ site.data.palette.
toolness 6a6edbe
Add WIP html color matrix.
toolness 6dc2f0f
Merge branch '18f-pages-staging' into html-color-matrix
toolness 62f57bf
Remove leading hash from hex values in _data/palette.yml.
toolness 1e1c1ce
Add wcag_color_contrast gem.
toolness 5059a23
Blank out matrix entries based on contrast ratio.
toolness 4f55ccd
Replace 'NOPE' with svg symbol, add legend.
toolness c92d4b8
Show human-friendly contrast ratios.
toolness 8b1ba42
Add mobile-friendly color matrix.
toolness a322668
add a comment about Marge size
toolness 9767c20
better layout for first column of color matrix.
toolness fc455ec
Fix typo, color -> contrast.
toolness 38e74be
Make color matrix accessible.
toolness File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2,3 +2,4 @@ source 'https://rubygems.org' | |
|
|
||
| gem 'jekyll', '3.1.6' | ||
| gem 'redcarpet', '3.3.3' | ||
| gem 'wcag_color_contrast', '0.0.1' | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| - name: white | ||
| hex: 'FFFFFF' | ||
|
|
||
| - name: light | ||
| hex: 'B3EFFF' | ||
|
|
||
| - name: bright | ||
| hex: '00CFFF' | ||
|
|
||
| - name: medium | ||
| hex: '046B99' | ||
|
|
||
| - name: dark | ||
| hex: '1C304A' | ||
|
|
||
| - name: black | ||
| hex: '000000' |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,85 @@ | ||
| <svg class="usa-matrix-symbol-definitions"> | ||
| <symbol id="usa-matrix-bad-contrast-ratio" viewBox="0 0 100 100"> | ||
| <rect width="100" height="100" fill="#f0f0f0"/> | ||
| <line x1="0" y1="100" x2="100" y2="0" stroke="white" stroke-width="4"/> | ||
| </symbol> | ||
| </svg> | ||
|
|
||
| <div class="usa-matrix-legend"> | ||
| <svg><use xlink:href="#usa-matrix-bad-contrast-ratio"/></svg> | ||
|
|
||
| <p class="usa-sr-invisible" aria-hidden="true"> | ||
| Please don't use these color combinations; they do not meet a color | ||
| contrast ratio of 4.5:1, so they do not conform with the standards of | ||
| Section 508 for body text. This means that some people would have | ||
| difficulty reading the text. Employing accessibility best practices | ||
| improves the user experience for all users. | ||
| </p> | ||
| </div> | ||
|
|
||
| <table class="usa-table-borderless usa-matrix"> | ||
| <thead> | ||
| <tr> | ||
| <td scope="col"></td> | ||
| {% for foreground in site.data.palette %} | ||
| <td scope="col"> | ||
| <div class="usa-matrix-desc"> | ||
| {{ foreground.name | capitalize }} text<br> | ||
| <small>#{{ foreground.hex }}</small><br> | ||
| </div> | ||
| <strong class="usa-matrix-foreground-{{ foreground.name }} usa-sr-invisible" aria-hidden="true"> | ||
| Aa | ||
| </strong> | ||
| </td> | ||
| {% endfor %} | ||
| </tr> | ||
| </thead> | ||
|
|
||
| <tbody> | ||
| {% assign reversed_palette = site.data.palette | reverse %} | ||
| {% for background in reversed_palette %} | ||
| <tr> | ||
| <td scope="row"> | ||
| <div> | ||
| <div class="usa-matrix-square usa-color-{{ background.name }}"></div> | ||
| <div class="usa-matrix-desc"> | ||
| {{ background.name | capitalize }} background<br> | ||
| <small>#{{ background.hex }}</small> | ||
| </div> | ||
| </div> | ||
| </td> | ||
| {% for foreground in site.data.palette %} | ||
| {% assign ratio = foreground.hex | contrast_ratio with: background.hex %} | ||
| {% if ratio >= 4.5 %} | ||
| <td class="usa-matrix-valid-color-combo"> | ||
| <div class="usa-matrix-square usa-color-{{ background.name }}" | ||
| title="The contrast ratio of {{ foreground.name }} on {{ background.name }} is {{ ratio | human_readable_contrast_ratio }}." | ||
| role="presentation"> | ||
| <strong class="usa-matrix-foreground-{{ foreground.name }} usa-sr-invisible" aria-hidden="true"> | ||
| Aa | ||
| </strong> | ||
| </div> | ||
| <div class="usa-matrix-color-combo-description"> | ||
| <strong>{{ foreground.name | capitalize }}</strong> text on | ||
| <strong>{{ background.name }}</strong> background | ||
| <span class="usa-sr-only">is 508-compliant, with a contrast ratio of {{ ratio | human_readable_contrast_ratio }}.</span> | ||
| </div> | ||
| </td> | ||
| {% else %} | ||
| <td class="usa-matrix-invalid-color-combo"> | ||
| <div title="The contrast ratio of {{ foreground.name }} on {{ background.name }} is {{ ratio | human_readable_contrast_ratio }}, which does not conform with the standards of Section 508 for body text." role="presentation"> | ||
| <svg class="usa-matrix-square"> | ||
| <use xlink:href="#usa-matrix-bad-contrast-ratio"/> | ||
| </svg> | ||
| </div> | ||
| <div class="usa-sr-only"> | ||
| Do not use {{ foreground.name }} text on {{ background.name }} background; it is not 508-compliant, with a contrast ratio of {{ ratio | human_readable_contrast_ratio }}. | ||
| </div> | ||
| </td> | ||
| {% endif %} | ||
| </td> | ||
| {% endfor %} | ||
| </tr> | ||
| {% endfor %} | ||
| </tbody> | ||
| </table> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| require 'liquid' | ||
| require 'wcag_color_contrast' | ||
|
|
||
| module ContrastRatio | ||
| def contrast_ratio(color1, color2) | ||
| WCAGColorContrast.ratio(color1, color2) | ||
| end | ||
|
|
||
| def human_readable_contrast_ratio(ratio) | ||
| if ratio < 4 | ||
| ndigits = 1 | ||
| elsif ratio < 5 | ||
| ndigits = 2 | ||
| else | ||
| ndigits = 0 | ||
| end | ||
|
|
||
| "#{ratio.round(ndigits)}:1" | ||
| end | ||
| end | ||
|
|
||
| Liquid::Template.register_filter(ContrastRatio) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,170 @@ | ||
| // "Marge" is a cross between USWDS's "Medium" and "Large" breakpoints. | ||
| // It's the equivalent of Bootstrap's "Medium" size. | ||
| $marge-screen: 992px; | ||
|
|
||
| // The WAI-ARIA specification states the following about aria-hidden: | ||
| // | ||
| // Authors MAY, with caution, use aria-hidden to hide visibly rendered | ||
| // content from assistive technologies only if the act of hiding this | ||
| // content is intended to improve the experience for users of assistive | ||
| // technologies by removing redundant or extraneous content. Authors | ||
| // using aria-hidden to hide visible content from screen readers MUST | ||
| // ensure that identical or equivalent meaning and functionality is | ||
| // exposed to assistive technologies. | ||
| // | ||
| // Unfortunately, however, the U.S. Web Design Standards forcibly set | ||
| // anything with aria-hidden to display: none, making it difficult to | ||
| // address the above use case. The following rule allows us to override | ||
| // this default and create content that is visible to sighted users but | ||
| // irrelevant to non-sighted users. | ||
| .usa-sr-invisible[aria-hidden="true"] { | ||
| display: block !important; | ||
| } | ||
|
|
||
| .usa-matrix-foreground-white { | ||
| color: $color-white; | ||
|
|
||
| // https://css-tricks.com/adding-stroke-to-web-text/ | ||
| text-shadow: | ||
| -1px -1px 0 #000, | ||
| 1px -1px 0 #000, | ||
| -1px 1px 0 #000, | ||
| 1px 1px 0 #000; | ||
| } | ||
|
|
||
| .usa-matrix-foreground-light { | ||
| color: $color-light; | ||
| } | ||
|
|
||
| .usa-matrix-foreground-bright { | ||
| color: $color-bright; | ||
| } | ||
|
|
||
| .usa-matrix-foreground-medium { | ||
| color: $color-medium; | ||
| } | ||
|
|
||
| .usa-matrix-foreground-dark { | ||
| color: $color-dark; | ||
| } | ||
|
|
||
| .usa-matrix-foreground-black { | ||
| color: $color-black; | ||
| } | ||
|
|
||
| .usa-matrix td { | ||
| vertical-align: top; | ||
| } | ||
|
|
||
| .usa-matrix-square { | ||
| width: 4em; | ||
| height: 4em; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
|
|
||
| strong { | ||
| text-shadow: none; | ||
| } | ||
| } | ||
|
|
||
| .usa-matrix-symbol-definitions { | ||
| display: none; | ||
| } | ||
|
|
||
| .usa-matrix-legend { | ||
| position: relative; | ||
|
|
||
| svg { | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| width: 35px; | ||
| height: 35px; | ||
| } | ||
|
|
||
| p { | ||
| margin-left: 45px; | ||
| font-size: 0.75em; | ||
| } | ||
| } | ||
|
|
||
| td[scope="row"] > div { | ||
| display: flex; | ||
|
|
||
| .usa-matrix-desc { | ||
| flex: 1; | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: $marge-screen) and (max-width: "#{$large-screen - 1}") { | ||
| table th, table td { | ||
| padding: 0.5em; | ||
| } | ||
|
|
||
| .usa-matrix-desc { | ||
| font-size: 0.75em; | ||
| } | ||
|
|
||
| td[scope="row"] > div { | ||
| flex-direction: column; | ||
|
|
||
| .usa-matrix-desc { | ||
| padding-top: 0.5em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: $large-screen) { | ||
| td[scope="row"] > div { | ||
| .usa-matrix-desc { | ||
| padding-left: 0.5em; | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @media (min-width: $marge-screen) { | ||
| .usa-matrix-color-combo-description { | ||
| @include sr-only(); | ||
| } | ||
| } | ||
|
|
||
| @media (max-width: "#{$marge-screen - 1}") { | ||
| .usa-matrix-legend { | ||
| display: none; | ||
| } | ||
|
|
||
| table.usa-matrix { | ||
| display: block; | ||
|
|
||
| thead { | ||
| display: none; | ||
| } | ||
|
|
||
| tbody { | ||
| display: block; | ||
|
|
||
| tr { | ||
| display: block; | ||
|
|
||
| td.usa-matrix-valid-color-combo { | ||
| display: flex; | ||
| align-items: center; | ||
|
|
||
| .usa-matrix-color-combo-description { | ||
| flex: 1; | ||
| padding-left: 1em; | ||
| } | ||
| } | ||
|
|
||
| td.usa-matrix-invalid-color-combo { | ||
| display: none; | ||
| } | ||
|
|
||
| td[scope="row"] { | ||
| display: none; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -38,3 +38,4 @@ | |
| // Custom styles ---------- // | ||
|
|
||
| @import 'styleguide'; | ||
| @import 'color-matrix'; | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
IMO this
.usa-sr-invisibleclass is a valid use case for accessible content, and we should push it upstream to USWDS if possible. I'm curious what our other accessibility folks think about it.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Oh! I just discovered that this was actually a bug filed at uswds/uswds#1120, and it was fixed just 2 days ago. So another option here is to just use the very latest uswds... which, come to think of it, we're already doing via a git submodule, so this mostly just involves me
git pull'ing myweb-design-standardsdirectory.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ack, I was wrong--our usdws checkout is actually from commit
16e8619(October 2015). I'm a bit hesitant about updating it to the very latest version that fixes this issue, however, because I'm not sure if there will be other breakages with the style guide... Could use any advice anyone has here!There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
So I gave this a bit of thought and my inclination is to commit this as-is, but add a new issue to upgrade to the new uswds and remove the
.usa-sr-invisibleclass. That way we can deal with any possible regressions in a separate PR and keep this one nicely scoped to just the color matrix.There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't know a whole bunch about how the two work together, but I'm inclined to agree with you @toolness — if upgrading is likely to introduce a lot of other conflicts, let's keep this issue focused on the color matrix, and file another for upgrading to the latest web design standards package.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Agreed. I think it's best to roll with this for now and upgrade in a new issue.