Contrast Ratio Calculator

Making sure webistes are accessible is a big deal these days. Websites should be mindful of their audience to make sure people with disabilities are not excluded from the site content. Color contrasts between foregrounds and backgrounds is an easy miss when checking that a site is accessible, but one that is vital to hard of sight users.

For more information about website contrast ratios, visit WebAIM’s Contrast and Color Accessibility page.

Making it easier

Using the Contrast Ratio Calculator library, calculating contrast ratios can be automatic in any site.

Color Objects

Colors can be made into their object representation by using the Color class. The color objects can be created by either the hexidecimal representation of the color or the RGB representation of the color.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

<?php
namespace HarmsTyler\ContrastRatioCalculator;

class Color
{
    //...
    public static function fromRgb(array $rgb): self {}
    public static function fromHex(string $hex): self {}
    //...
}

1
2
3
4

<?php
$color1 = Color::fromHex('ffffff');
$color2 = Color::fromRgb([255,255,255]);
// $color1->getHex() === $color2->getHex()

Calculating the Contrast

Once color objects have been created, the Contrast Ratio class can be used. The Contrast Ratio class requires two color objects on insantiation, a primary and a secondary color (typically foreground and background colors). The contrast ratio calculation is made immediately upon object instantiation, so it can be retrieved from the class immediately.

1
2
3
4
5
6
7
8

<?php
namespace HarmsTyler\ContrastRatioCalculator;

class ContrastRatio
{
    public function __construct(Color $primaryColor, Color $secondaryColor) {}
    public function getRatio() {};
}

1
2
3
4

<?php

$contrastRatio = new ContrastRatio($color1, $color2);
$ratio = $contrastRatio->getRatio();

Making the grade

A ratio alone is just a number. Without knowing how to grade a raio, it’s actually useless. That’s where the WCAGContrastRating class comes in to play. The WCAGContrastRating can return a grade by either passing a set of Color objects, or by passing an already created ContrastRatio object. The Web Content Accessibility Guidelines (WCAG) state what contrast ratios are a pass/fail. Specifically WCAG guidelines give grades of AAA, AA, AA Large, and FAIL (there are variations of these grades, but if text has a grade of AAA at normal text size, it can be assumed that it will receive an AAA at large text sizes as well, so those variations are ommitted from the grading scale).

1
2
3
4
5
6
7
8

<?php
namespace HarmsTyler\ContrastRatioCalculator;

class WCAGContrastRating
{
    public function rateColors(Color $primaryColor, Color $secondaryColor) {}
    public function rateContrastRatio(ContrastRatio $contrastRatio): string {}
}

1
2
3
4

<?php
$rating = new WCAGContrastRating();
$grade1 = $rating->rateContrastRatio($contrastRatio);
$grade2 = $rating->rateColors($color1, $color2);

Grades will be returned as one of four constants: AA_LARGE, AA, AAA, and FAIL;

A real world example

I help manage a large website installation where a small set of editors can manage >160 websites from a single admin. These editors can choose a site’s primary and secondary colors for the site, providing a more individualized look and feel for the various sites. Using the Contrast Ratio Calculator library, I am able to grade the primary/secondary color contrast ratios, as well as the font colors appearing in with the theme colors. By grading them automatically on the server, editors do not need to check each site individually. Editors do not need to worry about this feature of their websites. By automating these contrast ratios, editors are able to focus on other site content needs.