Make color matrix accessible

[toolness]

This is an attempt to make the color matrix accessible, and also generally easier to modify if needed, by converting it to HTML. It fixes #51.

For the duration of this PR, you can view the proposed changes live at https://brand-html-color-matrix.apps.cloud.gov/visual-style/#colors.

Here's a screenshot of the HTML color matrix on Large screens (≥1201px, as defined by USWDS):

I also defined a new breakpoint called Marge (≥992px), which is like a cross between USWDS's Medium (≥600px) and Large. It's based off Bootstrap's "Medium" size.

On Marge screens, the table cell padding is condensed, the fonts are a bit smaller, and the first column is laid out vertically:

Finally, anything smaller than Marge gets the mobile treatment, which is a compromise between @rtwell's awesome mockups in #51 (comment), the existing markup, and time constraints. It looks more like a list than a table, and non-508-compliant color combinations are simply hidden from view:

I think that @rtwell's original mockups are still a good ideal to strive for; perhaps we should keep an issue around to eventually "upgrade" the mobile version to be closer to those?

Notes

• On desktop, hovering over the color squares (including the 508-non-compliant ones) shows a tooltip indicating the color contrast ratio. For instance, hovering over the top-left square has a tooltip that says "The color ratio of white on black is 21:1".
• The HTML markup for the palette and color matrix entries are generated dynamically. The palette is now stored in _data/palette.yml.
• The contrast ratio of the color matrix entries is dynamically generated via the wcag_color_contrast gem. Curiously, it claims that the color contrast of medium on light is 4.68:1, which is greater than the WCAG minimum ratio of 4.5:1, so that combination is present on this new matrix, but it is not present on the old one. Any ideas on this @jenniferthibault @rtwell ?
• Hopefully this code can be reused in any other projects we do that involve style guides and color palettes, such as perhaps the cloud.gov style guide.
• I've tested the matrix out on the latest versions of Edge, Firefox, Chrome, and Safari. It looks fine on all of them.
• I've also tested out the color matrix in NVDA and VoiceOver and it sounds decent in both.

To Do

• Blank-out 508-unfriendly color combinations.
• Change the blanked-out 508-unfriendly entries to look more like they do in the original image.
• Actually make sure the table reads well on screen readers.
• Figure out what to do on mobile devices.

[toolness]

IMO this .usa-sr-invisible class 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.

[toolness]

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 my web-design-standards directory.

[toolness]

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!

[toolness]

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-invisible class. That way we can deal with any possible regressions in a separate PR and keep this one nicely scoped to just the color matrix.

[jenniferthibault]

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.

[shawnbot]

Agreed. I think it's best to roll with this for now and upgrade in a new issue.

[shawnbot]

Nice work, @toolness! 👍 🚀

[jenniferthibault]

Thank you @toolness ! Apologies for letting this slip. 👍 to your suggestion of filing a new issue to "upgrade" to @rtwell 's mobile designs.

And to check in on the outstanding question of why bright and medium combos were left out—that may have been an error on my part. While that combo is permitted from a 508 perspective, I don't think it's one we want to encourage in the visual identity, but we can clarify that elsewhere.

Merging! 🚀 !!

[charleshalldesign]

Please excuse the random unsolicited commentary, but there seems to be a great deal of attribution placed on Article 508 regarding color contrast. I just want to point out the difference in law and interpretation. For web products, only section 1194.22(c) addresses color – and not contrast. Other sections for other product types address contrast – mostly to provide users the means to control contrast, and then to not override that control. Color contrast for web products actually comes from WCAG 2.0 1.4.3 Level AA & AAA, which states: “The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following: Large, Incidental & Logotypes”.

I think it is important to differentiate between Article 508 and WCAG – especially in reference to the Web.

[shawnbot]

Hi @hallmedia, thank you for the unsolicited commentary—seriously! The Access Board recently issued the final rule in their "508 Refresh" that effectively includes the important parts of WCAG 2.0 in Section 508. From the announcement:

In fact, the rule references Level A and Level AA Success Criteria and Conformance Requirements in WCAG 2.0 and applies them not only to websites, but also to electronic documents and software.

So, for our purposes, Section 508 and WCAG 2.0 are basically interchangeable. 🍻

[Lyanbart]

Hello all, I'm brand new to GitHub so please be gentle on me. This tool (https://toolness.github.io/accessible-color-matrix/) is really fantastic but I was wondering if there was any way to increase the number of colour swatches to test from 6 to 20 (and if so, how)? I'm desperately trying to test text and background combos for a 20-strong colour palette and can't find any online tools that seems to allow for that. If you know of any please let me know. Many thanks.

[geekygirlsarah]

Hey @Lyanbart! The tool you're looking at was made by @toolness, who was at 18F in the past. It looks like the tool was used for this issue, but this repository (18F/brand) isn't for that tool (toolness/accessible-color-matrix). You can try to ask over at the issues for at that repository, which is https://github.com/toolness/accessible-color-matrix .