Color Contrast API

The Color Contrast API is really simple. First you need to include color-checker.js which is about ~1MB in size. Download the source file here.

<script src="color-checker.js" charset="utf-8"></script>

This file exposes a single global function, which takes two hex codes from the url or takes two hex codes from a function. This returns a data for you to use.

// URL
www.example.com/?f=000000&b=ffffff

// Function
checkColors("ffffff", "000000");

The data is sent via an array to the front end and you can access it like this.

var contrast = colorData.contrast;

Here's a list of all the data you can call to the frontend.

Foreground: Returns foreground HEX code
Background: Returns background HEX code
Contrast: Returns true contrast ratio
Rounded Contrast: Returns rounded contrast ratio
AA Headline: Returns true or false if ratio is greater than 3
AAA Headline: Returns true or false if ratio is greater than 4.5
AA Text: Returns true or false if ratio is greater than 4.5
AAA Text: Returns true or false if ratio is greater than 7
AA Component: Returns true or false if ratio is greater than 3
Foreground Luma: Returns foreground luma value used to get contrast ratio
Background Luma: Returns background luma value used to get contrast ratio

Check out the Color Contrast Checker Demo to see what you could build.