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