Accessibility Colour Palettes

8 days ago : 2 min read

My Color Contrast App is based on the idea of allowing you to pick your own colors, branding etc. but then being able to plug it into this react app to ensure that the colors align with one-another across the board. This way whether it's light/dark mode or even a multitude of different themes on the site, you know that each color's shade is the same and interchangeable.

I.e. red-100 has the same contrast to white as blue-100, green-100, etc.

This is important as Hex/Rgb is hard to read for contrast, and HSL's L value isn't a good value for contrast as greens are much lighter and blues are much darker regardless of the L value.

The Todos:

  • Design a mobile friendly version (Though, this is an edge case)
  • Implement Server-Side State with login credentials
  • Long-press on editor fields
  • Create download file / Copy CSS Custom Variables from State
  • Better Tests (I'm still new to testing everything, but I'm getting better)

What I'm stuck on:

I'm not sure the best way is to be able to dynamically create a downloadable file based on state. It's just a text file with a .sketchpalette file extension that will work with the Sketch Palette plugin.

Similarly, to be able to copy the state as CSS Custom Variables I've read somewhere I would need to populate a textfield with the state output, and copy from that rather than directly from a function.

I'm still new to testing, having only really worked on my website with tests and then this one too. I'm at about 95% coverage which I'm happy about as it covers as the User would interact rather than implementation, however, if anyone can point out major potholes I've missed, please, let me know! I'd love to be able to improve!