Display wcag accessibility rating for colors

package.json

@@ -34,6 +34,7 @@
   },
   "dependencies": {
     "clipboard-copy": "^3.0.0",
+    "colorable": "^1.0.5",
     "lodash": "^4.17.11",
     "polished": "^3.4.0",
     "prop-types": "^15.7.2",

src/components/ColorSwatch.jsx

@@ -2,11 +2,44 @@
 import { jsx } from "theme-ui";
 import React from "react";
 import { readableColor } from "polished";
-import { Swatch, SwatchToken, SwatchValue } from "../";
+import colorable from "colorable";
+import { Swatch, SwatchToken, SwatchValue, SwatchDetails } from "../";
 import { tokenPropType, valuePropType } from "../propTypes";
 
+const getBestAccessibility = access => {
+	if (access.aaa) {
+		return "AAA";
+	}
+	if (access.aa) {
+		return "AA";
+	}
+	if (access.aaaLarge) {
+		return "AAA Large";
+	}
+	if (access.aaLarge) {
+		return "AA Large";
+	}
+
+	return undefined;
+};
+
 export const ColorSwatch = ({ value, token }) => {
-	const color = readableColor(value, "black", "white");
+	const black = "black";
+	const white = "white";
+	const color = readableColor(value, black, white);
+	const accessibility = colorable({
+		main: value,
+		black,
+		white
+	});
+	const { values, combinations } = accessibility.find(
+		result => result.name === "main"
+	);
+	const access = combinations
+		.map(combination => getBestAccessibility(combination.accessibility))
+		.filter(Boolean)
+		.join(", ");
+
 	return (
 		<Swatch token={token} value={value}>
 			<div
@@ -19,6 +52,9 @@ export const ColorSwatch = ({ value, token }) => {
 			>
 				<SwatchToken color={color}>{token}</SwatchToken>
 				<SwatchValue color={color}>{value}</SwatchValue>
+				<SwatchDetails color={color} css={{ textAlign: "right" }}>
+					{access}
+				</SwatchDetails>
 			</div>
 		</Swatch>
 	);

src/components/SwatchDetails.jsx

@@ -0,0 +1,21 @@
+/* @jsx jsx */
+import { jsx } from "theme-ui";
+import React from "react";
+
+function SwatchDetails({ color = "text", css: componentCSS, ...rest }) {
+	return (
+		<p
+			sx={{
+				m: 0,
+				fontFamily: "body",
+				fontSize: "xs",
+				fontWeight: "normal",
+				color,
+				...componentCSS
+			}}
+			{...rest}
+		/>
+	);
+}
+
+export default SwatchDetails;

src/components/SwatchDetails.md

@@ -0,0 +1,26 @@
+A primitive to render the token additional details.
+
+```jsx harmony
+<SwatchDetails>AAA</SwatchDetails>
+```
+
+Color can be customized using `color` prop:
+
+```jsx harmony
+<SwatchDetails color="primary">Primary details</SwatchDetails>
+```
+
+For more customization use `css` and `style` props
+
+```jsx harmony
+<SwatchDetails
+  css={{
+    fontSize: "24px"
+  }}
+  style={{
+    color: "blue"
+  }}
+>
+  Custom style
+</SwatchDetails>
+```

src/index.js

@@ -2,6 +2,7 @@ export { default as Swatches } from "./components/Swatches";
 export { default as Swatch } from "./components/Swatch";
 export { default as SwatchToken } from "./components/SwatchToken";
 export { default as SwatchValue } from "./components/SwatchValue";
+export { default as SwatchDetails } from "./components/SwatchDetails";
 export { default as ColorSwatch } from "./components/ColorSwatch";
 export { default as TextStyleSwatch } from "./components/TextStyleSwatch";
 export { default as PaletteSwatch } from "./components/PaletteSwatch";