Design/Code
Color Functions
// L = 0.2126 * R + 0.7152 * G + 0.0722 * B
getRelativeLuminance = (r, g, b) => {
const [R, G, B] = [r, g, b].map((d) => {
const _ = d / 255;
return _ <= 0.03928 ? _ / 12.92 : ((_ + 0.055) / 1.055) ** 2.4;
});
return 0.2126 * R + 0.7152 * G + 0.0722 * B;
}
getRelativeLuminanceFromHex = (hex) => {
const color = d3.color(hex);
return getRelativeLuminance(color.r, color.g, color.b);
}
// https://www.w3.org/TR/WCAG20-TECHS/G17.html#G17-tests
getColorContrast = (color1, color2) => {
const l1 = getRelativeLuminanceFromHex(color1);
const l2 = getRelativeLuminanceFromHex(color2);
// Divide the lighter by the darker luminance
return l1 >= l2 ? (l1 + 0.05) / (l2 + 0.05) : (l2 + 0.05) / (l1 + 0.05);
}
formatContrast = d3.format(".1~f")
// AA Text 4.5, Headlines 3
// AAA Text 7, Headlines 4.5
getContrastRatingText = (contrast) => {
return contrast >= 7 ? "AAA" : contrast >= 4.5 ? "AA" : "FAIL";
}
getContrastRatingHeading = (contrast) => {
return contrast >= 4.5 ? "AAA" : contrast >= 3 ? "AA" : "FAIL";
}
getContrastRatingText(4.7)
getContrastRatingHeading(4.7)
// Just some test to see differences in luminance between color models
{
const colors = [
"#fff",
"#ff4455",
"#55ee91",
"#ffff00",
"teal",
"#333",
"#000"
];
const makeRow = (c) => ({
Color: c,
Relative: getRelativeLuminanceFromHex(c),
HSL: d3.hsl(c).l,
HCL: d3.hcl(c).l,
Cubehelix: d3.cubehelix(c).l,
CIELAB: d3.lab(c).l
});
return Inputs.table(
colors.map((c) => makeRow(c)),
{
format: {
Color: (c) =>
html`<div style="background:${c};width:1em;height:1em;display:inline-block;margin-right:0.5em"></div>${c}`
}
}
);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
