WCAG colour checker

About five years ago I created a small PHP class that would check the contrast of a foreground and background colour and give a report on whether it was accessible in accordance with the WCAG recommendations (so either AA or AAA compliant).

I’ve recently had cause to dig out that script which gave me the opportunity to also create a version in javascript.

Usage is very simple… Say I have these two colours:

vivid red – rgb(207, 46, 46) – #cf2e2e

and

cyan blueish grey – rgb(171, 184, 195) – #abb8c3

If I used then in combination, with say the red being the background colour and the grey being the text colour, the PHP code would look something like:

var_dump(WCAG::accessibility('abb8c3', 'cf2e2e'));

The result of which would show the contrast ration and if it passes WCAG 2.0 for AA, AA with large fonts, AAA, and AAA with large fonts… No surprise really that the combination above would fail!

array(2) {
   'ratio' => string(4) "2.54"
   '2.0' => array(4) {
      'aa' => bool(false)
      'aa-18pt' => bool(false)
      'aaa' => bool(false)
      'aaa-18pt' => bool(false)
   }
}

But try that with the red background and white text and we’d see a different result:

// var_dump(WCAG::accessibility('fff', [207, 46, 46]));

array(2) {
   'ratio' => string(4) "5.14"
   '2.0' => array(4) {
     'aa' => bool(true)
     'aa-18pt' => bool(true)
     'aaa' => bool(false)
     'aaa-18pt' => bool(true)
   }
 }

You can supply the colours in full or short hex format – with or without the # – or as a RGB array.

The javascript version is just as simple to use. So why not check out the repository with the code, fork is and contribute if you’d like – examples are included in the repo.