donnieberg/accessible-color-palette

Generate beautiful, accessible color palettes

accessible-color-palette's Issues

URL should reflect state

This is a very helpful tool, thank you for releasing it.

I'd like to be able to send my colleagues a URL to a particular example scheme, for example

https://colorsafe.co/?background=%2330c386&font-size=18&font-family=Tahoma&color=%23002a2a

I'd like this URL to always reflect the current state of the app, so for example, if I clicked on an alternate colour in the app, the URL would change to

https://colorsafe.co/?background=%2330c386&font-size=18&font-family=Tahoma&color=%23082213

That would aid collaboration and ultimately bring more accessible UIs into the world.

Thanks for your consideration.

Color Tile screen scroll bug

The final screen with the color tiles does not correctly scroll into view in Firefox.

For reference, I made this screen recording showing the issue.

My guess is that there's a bug in how (or when) the scroll offset is being calculated.

Steps to reproduce

1. Use colorsafe.co in Mozilla Firefox (36.0, Mac OS X Yosemite).
2. Click "Get Started"
3. Click "Generate Color Palette"
4. Observe the extra spacing between the page's header and the color tiles.

Add license file

Hi,

I am wondering if you'll allow the inclusion of an open source license for this project. There are some fascinating logic in this project that I would like to use in my own projects (particularly in my personal website), but would require some minor changes in order to work in my own environment.

It is my understanding that I am not allowed to do this due to copyright infringement, since you do not explicitly specify a license which your code is under. Will you consider including an open source license?

Thanks!

Minify and concatenate CSS and JavaScript

I ran colorsafe.co through Google's PageSpeed Insights tool and it came back with several useful recommendations.

Full Google PageSpeed Insights report

Minification

• Minify i.css: "Minifying http://colorsafe.co/css/i.css could save 1.2KiB (21% reduction) after compression."
• Minify tinycolor.js, app.js, /bootstrap-colorpicker-module.js, etc.: "Minify JavaScript for the following resources to reduce their size by 6.2KiB (9% reduction)."

Concatenation

Similarly, concatenating CSS and JavaScript files into single CSS and JS files greatly reduces page load time by eliminating unnecessary HTTP requests.

• Concatenate CSS files into a single app.css file.
• Concatenate JavaScript files into a single app.js file.

It appears you're already using Gulp to some degree so additional minification and concatenation might be pretty straightforward.

Contrast ratio for AA large text is 3.0

According to WCAG2.0, guideline 1.4.3 Contrast (Minimum) for large text:

Large-scale text and images of large-scale text have a contrast ratio of at least 3:1.

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

Current ratio in Colorsafe is 1:3.1, it is a mistake.

Use <button> instead of <a href="javascript:void(0)">

There are a number of instances where the pattern ` is used. For instance, the "close" button on the slide out left sidebar uses this pattern.

Anchors are typically used for linking between and within documents with URLs or fragment identifiers as hrefs. I recommend using the <button type="button"> element and attaching the relevant behavior to that element in place of <a href="javascript:void(0)">.

Copy-to-clipboard does not work

Selecting a color echoes "Copied!", but nothing is actually copied to the clipboard.

Issue seems to lie in ZeroClipboard. I double-checked the implementation, and it seems correct, according to the package's README, but stepping through minified code in Chrome is a disaster, so I'll leave the rest of bug triaging to you guys.

If in need of an alternative, I highly recommend clipboard.js.

Drop down menu's texts are in white.

Drop down menu's texts are in white, they are probably affected by the ".inputColor" class.

Add `role="contentinfo"` to slide out left panel

The contentinfo landmark role, according to the spec:

A large perceivable region that contains information about the parent document. Examples of information included in this region of the page are copyrights and links to privacy statements.

I'd say the slide out left panel fits that description nicely!