The avatar for @ijlyttle
Ian Lyttle
Public
Computing on color
Edited
Jul 28, 2023
Importers
2 stars
Computing on color
Color-Space ViewerChroma and Hue in Color SpacesLuminance in Color SpacesColor-Scale ViewerCategorical Color-Scale ViewerColor-Surface HelpersColor-Scale ThemesCategorical Color-Scale TryoutQuantitative Color-Scale Tryout
Accessibility: Color-Contrast Models
Color-Vision-Deficiency WidgetColor Utilities
Insert cell
Insert cell
Insert cell
Insert cell
viewof text = Inputs.color({ value: "#FFFFFF" })
Insert cell
viewof backgroundCustom = Inputs.color({ value: "#663399" })
Insert cell
background = ["#000000", "#777777", "#333333", "#EA7439", backgroundCustom]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
apcaTextColor("#FFFF00")
Insert cell
Insert cell
apca.calcAPCA("#FFFF00", "#000000")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
apca = import("https://cdn.skypack.dev/apca-w3@0.1.9")
Insert cell
cp = import("https://cdn.skypack.dev/colorparsley@0.1.1?min")
Insert cell
wcag = require("wcag-contrast@3.0.0/dist/index.umd.js")
Insert cell
tidy = import("https://unpkg.com/@tidyjs/tidy@2.5.2/dist/es/index.js?module")
Insert cell
import { changeTable } from "@ijlyttle/change-log"
Insert cell
Insert cell
// Number -> String
apcaScore = function (x) {
// approximate the wcag.score() function

const absX = Math.abs(x);

if (absX >= 75) {
return "AAA";
}

if (absX >= 60) {
return "AA";
}

if (absX >= 45) {
return "AA Large";
}

return "Fail";
}
Insert cell
// String -> String
apcaTextColor = function (hex) {
// given a hex string for the background, return the more-contrasting text color: black or white

const blackWhite = ["#000000", "#FFFFFF"];

const contrast = blackWhite.map((x) => Math.abs(apca.calcAPCA(x, hex)));

//return contrast;
return contrast[1] > contrast[0] ? blackWhite[1] : blackWhite[0];
}
Insert cell
apcaTextColor("#FFFF00")
Insert cell
examplebar = function (x) {
return htl.html`<div style="
background: ${x.background};
color: ${x.text};
width: 100%;
margin-left: 10px;
margin-right: 10px;
text-align: center;">example`;
}
Insert cell
Insert cell
// Number, String, Object -> HTML
contrastbar = function (value, color, max) {
// determine max

// build background divs
const backgroundDiv = htl.html.fragment`<div aria-hidden=true style="
z-index: -1;
position: absolute;
right: 0;
background: #dddddd;
width: 100%;
border-radius: 3px 0 0 3px;">&nbsp`;

// build value div
const valueDiv = htl.html.fragment`<div aria-hidden="true" style="
z-index: 0;
position: absolute;
right: 0;
background: ${color};
width: ${(100 * Math.abs(value)) / max}%;
min-width: 0%;
border-radius: 3px 0 0 3px;">&nbsp`;

// build text div
const textDiv = htl.html.fragment`<div style="
z-index: 1;
position: absolute;
right: 0;
color: white;
padding-right: 3px;
">${d3.format("0.1f")(value)}`;

return htl.html`<div style="
position: relative;
box-sizing: border-box;
">${backgroundDiv}${valueDiv}${textDiv}`;
}
Insert cell
contrastbar(0.6, "steelblue", 1)
Insert cell

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.
Learn more