From 297d283090058744f2ec9b9ddd2de5fae0ce4565 Mon Sep 17 00:00:00 2001 From: Dominik Pschenitschni Date: Sat, 21 May 2022 00:09:41 +0200 Subject: [PATCH] feat: improve colorIsDark helper (also improve contrast of white label text) --- src/helpers/color/colorIsDark.ts | 12 ++++++++---- src/models/label.ts | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/src/helpers/color/colorIsDark.ts b/src/helpers/color/colorIsDark.ts index a2fdaeeaf..3ae8ff286 100644 --- a/src/helpers/color/colorIsDark.ts +++ b/src/helpers/color/colorIsDark.ts @@ -1,4 +1,4 @@ -export const colorIsDark = color => { +export function colorIsDark(color) { if (typeof color === 'undefined') { return true // Defaults to dark } @@ -16,7 +16,11 @@ export const colorIsDark = color => { const g = (rgb >> 8) & 0xff // extract green const b = (rgb >> 0) & 0xff // extract blue - // luma will be a value 0..255 where 0 indicates the darkest, and 255 the brightest - const luma = 0.2126 * r + 0.7152 * g + 0.0722 * b // per ITU-R BT.709 - return luma > 128 + // this is a quick and dirty implementation of the WCAG 3.0 APCA color contrast formula + // see: https://gist.github.com/Myndex/e1025706436736166561d339fd667493#andys-shortcut-to-luminance--lightness + const Ys = Math.pow(r/255.0,2.2) * 0.2126 + + Math.pow(g/255.0,2.2) * 0.7152 + + Math.pow(b/255.0,2.2) * 0.0722 + + return Math.pow(Ys,0.678) >= 0.5 } \ No newline at end of file diff --git a/src/models/label.ts b/src/models/label.ts index be7abb44b..f61658a73 100644 --- a/src/models/label.ts +++ b/src/models/label.ts @@ -15,7 +15,7 @@ export default class LabelModel extends AbstractModel { if (this.hexColor.substring(0, 1) !== '#') { this.hexColor = '#' + this.hexColor } - this.textColor = colorIsDark(this.hexColor) ? '#4a4a4a' : '#e5e5e5' + this.textColor = colorIsDark(this.hexColor) ? '#4a4a4a' : '#fff' this.createdBy = new UserModel(this.createdBy) this.created = new Date(this.created)