Design/Code
viewof x = ColorPalette(colors)
ColorPalette = (colors) => {
const colorField = (color) => {
const contrast = getColorContrast(color, "white");
return html.fragment`
<div style=${{
borderRadius: "0.5rem",
boxShadow: "0px 1px 5px 2px rgba(0,0,0,0.2)",
width: "3rem",
height: "3rem",
background: color
}}></div>
<div>${formatContrast(contrast)}:1</div>
<div>${ContrastRatingBadge(getContrastRatingText(contrast))}</div>
<div>${ContrastRatingBadge(getContrastRatingHeading(contrast))}</div>
`;
};
const fields = colors.map((color) => colorField(color));
const palette = html`<div style=${{
display: "grid",
gap: "1rem",
gridTemplateColumns: "50px 1fr 1fr 1fr"
}}>
<div>Color</div><div>Contrast</div><div>WCAG Text</div><div>WCAG Heading</div>
${fields}</div>`;
return palette;
}
ContrastRatingBadge = (rating) => {
const icon = rating === "FAIL" ? "❌" : "✅";
return html`<div>${icon} ${rating}</div>`;
}
import {
getRelativeLuminanceFromHex,
getColorContrast,
formatContrast,
getContrastRatingText,
getContrastRatingHeading
} from "@herrstucki/color-functions"
html = htl.html
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.
