/color-contrast-checker

A simple tool for calculating the contrast ratio between two HEX values. Based on WCAG 2.0 Level AA standards.

Primary LanguageHTML

Color Contrast Checker

Click here for live version

Live version on Azure

Based on the WCAG 2.0 level AA color contrast requirements. Made for 10k Apart Contest.

How to use

  • Input two color HEX values to calculate the contrast ratio.
  • If the constrast ratio is below 4.5 (red), adjust a color by clicking on 'Lighten' or 'Darken' until the contrast ratio is above 4.5 (green). Note: The approved ratio is 3 for large text.
  • Toggle a color to be white or black by clicking on 'Black' or 'White'.

Widget

Click on 'Launch Widget' to open the page in a new window adjusted to the size of the calculator (only available on bigger devices). This provides the user to have the calculator open while developing / designing without having to change tabs.

Run Locally

  1. Fork and clone this repo
  2. Run npm install
  3. Run gulp
  4. The website will automatically open in a new tab

Made with:

  • HTML
  • SCSS
  • Vanilla JS

Web page stats:

  • Performance grade: 100
  • Page size: 7.5kb
  • Faster than 99% of tested sites on pingdom (Tested from their San Jose, CA location)

In Development:

  • Chrome extension with color picker