The EightShapes Contrast Grid is a great way to visualize the color contrast between all colors in your palette.
When you land on that page, you'll notice that the URL expands to the very hack-friendly convention of: https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp.
In this PR, I did a little string work on our variable.json file to generate a custom EightShapes Contrast Grid URL link at the top of the theme styleguide page so we can visualize the color palette as it exists at any point in time.
I'm 100% sure there is a more elegant way to write that liquid spill that powers this feature. If you have any suggestions for refactoring, I would be very receptive :)
The EightShapes Contrast Grid is a great way to visualize the color contrast between all colors in your palette.
When you land on that page, you'll notice that the URL expands to the very hack-friendly convention of:
https://contrast-grid.eightshapes.com/?version=1.1.0&background-colors=&foreground-colors=%23FFFFFF%2C%20White%0D%0A%23F2F2F2%0D%0A%23DDDDDD%0D%0A%23CCCCCC%0D%0A%23888888%0D%0A%23404040%2C%20Charcoal%0D%0A%23000000%2C%20Black%0D%0A%232F78C5%2C%20Effective%20on%20Extremes%0D%0A%230F60B6%2C%20Effective%20on%20Lights%0D%0A%23398EEA%2C%20Ineffective%0D%0A&es-color-form__tile-size=compact&es-color-form__show-contrast=aaa&es-color-form__show-contrast=aa&es-color-form__show-contrast=aa18&es-color-form__show-contrast=dnp.In this PR, I did a little string work on our
variable.jsonfile to generate a custom EightShapes Contrast Grid URL link at the top of the theme styleguide page so we can visualize the color palette as it exists at any point in time.I'm 100% sure there is a more elegant way to write that liquid spill that powers this feature. If you have any suggestions for refactoring, I would be very receptive :)