color-combination-tool

a simple color combination tool ☺︎

This is a tool to help you find random color combinations that work. This tool pairs colors that pass WCAG at an AA level, and pass at an AAA level when used with type 18pt or higher. You can preview it here.


How to Use

  1. Color Controls: The ⟳ button will generate random color combos until you find one that's perfect for you.
  2. Fine or Not Fine? See that text saying "This is fine." in the box? If your color combination is good to go, it'll say "This is fine." However, if the contrast isn't WCAG compliant, it'll change to "This is not fine." – that's your cue to adjust as needed.
  3. Tweak Colors: The two color buttons below the box let you pick specific colors by clicking on them. Play around with the colors until you get the combination you're after.

Tools Used

  • HTML
  • CSS
  • JavaScript
  • jQuery
  • Chroma.js
  • ☼ Have fun!