diff --git a/package.json b/package.json index e746c16682..cf271c95bd 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "classnames": "^2.5.1", "codemirror": "5", "colorbrewer": "^1.3.0", + "colorjs.io": "^0.5.2", "cookie-parser": "^1.4.4", "d3": "^6.1.1", "dayjs": "^1.11.11", diff --git a/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts b/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts index 88ff9a9f94..b872dcf3ae 100644 --- a/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts +++ b/packages/@ourworldindata/grapher/src/color/ColorBrewerSchemes.ts @@ -4,6 +4,8 @@ import { ColorSchemeInterface, ColorSchemeName, } from "@ourworldindata/types" +import ColorJS from "colorjs.io" +import { memoize } from "@ourworldindata/utils" type ColorSchemeProps = { displayName: string; singleColorScale: boolean } @@ -59,6 +61,14 @@ const ColorBrewerSchemeIndex: { PuBu: { displayName: "Purple-Blue shades", singleColorScale: true }, } as const +const _darkenColorForContrast = (color: string) => { + const col = new ColorJS(color) + col.oklab.l *= 0.95 + return col.toString({ format: "hex" }) +} + +const darkenColorForContrast = memoize(_darkenColorForContrast) + export const getColorBrewerScheme: ( name: string ) => ColorSchemeInterface | undefined = (name: string) => { @@ -69,7 +79,10 @@ export const getColorBrewerScheme: ( const colorSetsArray: Color[][] = [] Object.keys(colorSets).forEach( - (numColors) => (colorSetsArray[+numColors] = colorSets[numColors]) + (numColors) => + (colorSetsArray[+numColors] = colorSets[numColors].map( + darkenColorForContrast + )) ) return { name, diff --git a/yarn.lock b/yarn.lock index 872c5ceb19..263966532b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8412,6 +8412,13 @@ __metadata: languageName: node linkType: hard +"colorjs.io@npm:^0.5.2": + version: 0.5.2 + resolution: "colorjs.io@npm:0.5.2" + checksum: 10/a6f6345865b177d19481008cb299c46ec9ff1fd206f472cd9ef69ddbca65832c81237b19fdcd24f3f9540c3e6343a22eb486cd800f5eab9815ce7c98c16a0f0e + languageName: node + linkType: hard + "columnify@npm:1.6.0": version: 1.6.0 resolution: "columnify@npm:1.6.0" @@ -11881,6 +11888,7 @@ __metadata: classnames: "npm:^2.5.1" codemirror: "npm:5" colorbrewer: "npm:^1.3.0" + colorjs.io: "npm:^0.5.2" cookie-parser: "npm:^1.4.4" cypress: "npm:9.3.1" d3: "npm:^6.1.1"