Refactor contrast to use luminance function

src-ui/src/app/services/settings.service.ts

@@ -9,7 +9,11 @@ import {
 } from '@angular/core'
 import { Meta } from '@angular/platform-browser'
 import { CookieService } from 'ngx-cookie-service'
-import { hexToHsl } from 'src/app/utils/color'
+import {
+  BRIGHTNESS,
+  estimateBrightnessForColor,
+  hexToHsl,
+} from 'src/app/utils/color'
 
 export interface PaperlessSettings {
   key: string
@@ -138,10 +142,9 @@ export class SettingsService {
 
     if (themeColor) {
       const hsl = hexToHsl(themeColor)
-      const useDarkTextColor =
-        parseInt(themeColor.replace('#', ''), 16) > 0xffffff / 1.5
+      const bgBrightnessEstimate = estimateBrightnessForColor(themeColor)
 
-      if (useDarkTextColor) {
+      if (bgBrightnessEstimate == BRIGHTNESS.DARK) {
         this.renderer.addClass(this.document.body, 'text-bg-dark')
         this.renderer.removeClass(this.document.body, 'text-bg-light')
       } else {

src-ui/src/app/utils/color.ts

@@ -1,5 +1,10 @@
 import { HSL, RGB } from 'ngx-color'
 
+export const BRIGHTNESS = {
+  LIGHT: 'light',
+  DARK: 'dark',
+}
+
 function componentToHex(c) {
   var hex = Math.floor(c).toString(16)
   return hex.length == 1 ? '0' + hex : hex
@@ -101,6 +106,29 @@ export function hexToRGB(hex: string): RGB {
   }
 }
 
+export function computeLuminance(color: RGB) {
+  // Formula: http://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+  const colorKeys = Object.keys(color)
+  for (var i = 0; i < 3; i++) {
+    var rgb = color[colorKeys[i]]
+    rgb /= 255
+    rgb = rgb < 0.03928 ? rgb / 12.92 : Math.pow((rgb + 0.055) / 1.055, 2.4)
+    color[i] = rgb
+  }
+  return 0.2126 * color[0] + 0.7152 * color[1] + 0.0722 * color[2]
+}
+
+export function estimateBrightnessForColor(colorHex: string) {
+  // See <https://www.w3.org/TR/WCAG20/#contrast-ratiodef>
+  // Adapted from https://api.flutter.dev/flutter/material/ThemeData/estimateBrightnessForColor.html
+  const rgb = hexToRGB(colorHex)
+  const luminance = computeLuminance(rgb)
+  const kThreshold = 0.15
+  return (luminance + 0.05) * (luminance + 0.05) > kThreshold
+    ? BRIGHTNESS.LIGHT
+    : BRIGHTNESS.DARK
+}
+
 export function randomColor() {
   let rgb = hslToRgb(Math.random(), 0.6, Math.random() * 0.4 + 0.4)
   return `#${componentToHex(rgb[0])}${componentToHex(rgb[1])}${componentToHex(