Work with Atul to move accessibility color picker forward

[amberwreed]

Opportunity to advance functionality of a very useful tool for visual design in the accessibility world.

• [x] Meet with Atul to understand the his availability & if this is an 18F tool
• [ ] Develop prioritized list of tasks to be take on
• [ ] Better understand goals and objective from the Accessibility Guild

[ericronne]

cc'ing myself, would love to participate, too 👍

[austinhernandez]

@ericronne I have a meeting set up with Atul tomorrow to answer some of the discovery questions @amberwreed wrote above. I can invite you to that or fill you in later.

[ericronne]

@austinhernandez thx! I'm off tomorrow, so let's try to sync up on monday

[austinhernandez]

Description

Atul created this accessible color matrix for the visual design team which helps us quickly meet the 508 accessibility standards for color contrast ratio. It was originally created on Atul's own time, outside of 18F while learning Elm. The tool now has has public domain on it, brand colors, and he is happy to have it live with 18F. The only caveat is that he would like to keep it in Elm. There is a possibility of converting to JS but would love to keep it because it pushes development skills to learn a new language and would require overhead to convert.

User needs this meets

• Color palette and on 18F sites which are accessible for people with visual impairments (colorblindness, Irlen sydrome, etc.]
• Allows anyone (specifically designers) to easily create color palette that meet accessibility guidelines

Team needs this meets

• Creates an easy-to-use tool for visual designers looking for color patterns that are 508 compliant
• Enables team members across 18F creating documents to develop compliant documentation without the help of the visual design team, accessibility guild, or additional research.
• Upholds 18Fs commitment to providing accessible content to the public
• An open source tool for use in the design community outside of 18F which is good for publicity

Support needed

• [x] Atul would need to implement changes
  • The tool was written in a scripting language called Elm (which is not a language commonly used at 18F) so there would either be a learning curve for anyone to code in this language or a ticket created for an improvement Atul would need to make
  • May be a conflict for the front-end guild's guide of acceptable programming languages for 18F projects I believe "unofficial" languages are allowed for non-mission-critical 18F internal projects. Also, translating it to another language would require more time than @toolness can afford to give at the moment. So we plan to keep it in Elm for now. – @ericronne
• [ ] Approval of changes from the accessibility guild
  • Do we need to add AA and AAA support of accessibility?
• [ ] Branding guidlines
• [ ] Hosting - where does it live?
• [ ] Implement existing feedback from design, front-end, and accessibility teams

Dependencies

• [ ] 18F style guide
• [ ] File all enhancements as issues on github repo
• [ ] Looking for enhancements that would help improve the tool
• [ ] Feedback from different sources needs to be Develop prioritized list of tasks to be take on
• [ ] Better understand goals and objective from the Accessibility Guild

Next steps

• [ ] Needs approval from front-end management team that we can support Elm internally
• [ ] Repo needs to move from personal repo to 18F
• [ ] Atul is developing a prioritized list of feedback, enhancements, and tasks to be take on (e.g. better color picker widget, AAA support, etc.)
• [ ] Find place for this tool to live (18F website, standalone page, internal only, etc)
• [ ] Implement feedback from other teams
• [ ] Visual designer brand feedback
• [ ] Roll out to teams that would use this frequently then iterate

We can close this issue when...

• [ ] Teams align on scripting language
• [ ] Styles created for 18F that match brand guidelines
• [ ] Feedback is implemented to make tool useful to teams that would use it
• [ ] Released organization-wide

Issue collaborators

@ericronne

[ericronne]

@toolness

[ericronne]

@gemfarmer opened a related issue in our Accessibility repo.

After an initial inquiry, it seems that no front-ender currently has the bandwidth to convert this from Elm. However, @toolness, @gemfarmer, and i feel that the tool will be useful for some time, regardless of programming language. Since we have a blip of time this week, we're going to jump on some design mods.

[ericronne]

Here's an invision prototype with some changes to try, provided @toolness has the bandwidth to implement.

Whereas the current version works best as a reference, these mods hopefully make it better suited to the job of crafting a palette.

[ericronne]

Sketch file

[gemfarmer]

Cool prototype. @ericronne What are your thoughts on the editing be done in the actual grid instead of above it?

[ericronne]

Could be interesting feature. I'm curious to see how much the enhanced editor meets that need.

[ericronne]

The contrast indicators would update live as you play with the sliders.

[ericronne]

Please note that i've only had time to play with the "widget" portion of this. Supporting content is needed, too. (The overall page design is not final.)

[gemfarmer]

I'm going to recommend we tool around more with the interaction with the color picker UI, instead of the color picker UI, itself. Seems like lower hanging fruit.

[ericronne]

um huh?