Add function to calculate colour contrast ratio

Author: jamesmockett

dotcom-rendering/src/lib/colour.test.ts

@@ -1,4 +1,6 @@
-import { isLight } from './colour';
+import { getContrast, isLight } from './colour';
+
+const round = (value: number): number => Math.round(value * 100) / 100;
 
 describe('isLight', () => {
 	it('should return the correct response for dark hex colours', () => {
@@ -38,3 +40,18 @@ describe('isLight', () => {
 		expect(isLight('wyx')).toBe(false);
 	});
 });
+
+/**
+ * Contrast ratio calculated by `getContrast` should match that calculated
+ * by the WebAIM contrast checker: https://webaim.org/resources/contrastchecker
+ */
+describe('getContrast', () => {
+	it('should return the correct contrast ratio for two colours', () => {
+		expect(round(getContrast('#000', '#fff'))).toEqual(21);
+		expect(round(getContrast('#f00', '#fff'))).toEqual(4);
+		expect(round(getContrast('#faa01b', '#f6f6f6'))).toEqual(1.92);
+		expect(round(getContrast('#2a449a', '#f6f6f6'))).toEqual(8.12);
+		expect(round(getContrast('#f0c650', '#1a1a1a'))).toEqual(10.69);
+		expect(round(getContrast('#559861', '#1a1a1a'))).toEqual(5.01);
+	});
+});

dotcom-rendering/src/lib/colour.ts

@@ -23,6 +23,34 @@ const hexToRgb = (
 		: null;
 };
 
+// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+// Based on: https://github.com/siege-media/contrast-ratio/blob/gh-pages/color.js
+const processLuminance = (channel: number): number => {
+	const scaledChannel = channel / 255;
+	return scaledChannel <= 0.03928
+		? scaledChannel / 12.92
+		: Math.pow((scaledChannel + 0.055) / 1.055, 2.4);
+};
+
+const getLuminance = (colour: string): number => {
+	const rgb = hexToRgb(colour);
+	if (!rgb) return 0;
+	return (
+		processLuminance(rgb.r) * 0.2126 +
+		processLuminance(rgb.g) * 0.7152 +
+		processLuminance(rgb.b) * 0.0722
+	);
+};
+
+// http://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+export const getContrast = (colour1: string, colour2: string): number => {
+	const luminance1 = getLuminance(colour1);
+	const luminance2 = getLuminance(colour2);
+	const brightest = Math.max(luminance1, luminance2);
+	const darkest = Math.min(luminance1, luminance2);
+	return (brightest + 0.05) / (darkest + 0.05);
+};
+
 const getBrightness = (colour: string): number => {
 	// http://www.w3.org/TR/AERT#color-contrast
 	const rgb = hexToRgb(colour);