Colour contrast and Accessibility

Colour contrast and Accessibility

WebAIM has a great article on contrast - tackling text on semi-transparent backgrounds and more.

Automatic colour contrast within Sass

As mentioned in the WebAIM contrast article, 4.5 is the minimum ratio - there will be some colours even at this level that aren’t very readable.

We’ve implemented Sass-Planifolia to help us, particularly with colours (it can also help with: high performance math functions; WCAG compatible color contrast functions; CIELAB/CIELUV based color functions and supports HSLuv)

In practice, given an input colour and a contrast threshold (and optionally light and dark colours for it to choose from), we can automatically produce a suitably contrasting colour.

// Default contrast colours are White and Black
$planifolia-contrast-dark-default:  $COLOR-Black;
$planifolia-contrast-light-default: $COLOR-White;

$C_COMPONENT-default-bg:     $COLOR-RedDark;
$C_COMPONENT-default-color:  contrast-threshold($C_COMPONENT-alt-bg, 4.5);
// Outputs White. White being one of the default Planifolia colours.

$C_COMPONENT-alt-bg:         $COLOR-GreyLighter;
$C_COMPONENT-alt-color:      contrast-threshold($C_COMPONENT-default-bg, 4.5, $COLOR-GreyDark, $COLOR-GreyLightest);
// Outputs GreyDark