initial contrast display support

src/components/contrast_ratio/contrast_ratio.vue

@@ -0,0 +1,64 @@
+<template>
+<div class="contrast-ratio">
+  <span class="label">
+    Contrast:
+  </span>
+  <span>
+    <span>
+      {{contrast.text}}
+    </span>
+    <span class="rating">
+      <span v-if="contrast.aaa">
+        AAA
+      </span>
+      <span v-if="!contrast.aaa && contrast.aa">
+        AA
+      </span>
+      <span v-if="!contrast.aaa && !contrast.aa">
+        bad
+      </span>
+    </span>
+  </span>
+  <span v-if="large">
+    <span>
+      18pt+:
+    </span>
+    <span class="rating">
+      <span v-if="contrast.aaa">
+        AAA
+      </span>
+      <span v-if="!contrast.aaa && contrast.aa">
+        AA
+      </span>
+      <span v-if="!contrast.aaa && !contrast.aa">
+        bad
+      </span>
+    </span>
+  </span>
+</div>
+</template>
+
+<script>
+export default {
+  props: [
+    'large', 'contrast'
+  ]
+}
+</script>
+
+<style lang="scss">
+.contrast-ratio {
+  display: flex;
+  justify-content: end;
+
+  .label {
+    margin-right: 1em;
+  }
+
+  .rating {
+    display: inline-block;
+    min-width: 3em;
+    text-align: center;
+  }
+}
+</style>

src/components/style_switcher/style_switcher.js

@@ -1,5 +1,6 @@
-import { rgb2hex } from '../../services/color_convert/color_convert.js'
+import { rgb2hex, hex2rgb, getContrastRatio } from '../../services/color_convert/color_convert.js'
 import ColorInput from '../color_input/color_input.vue'
+import ContrastRatio from '../contrast_ratio/contrast_ratio.vue'
 import OpacityInput from '../opacity_input/opacity_input.vue'
 import StyleSetter from '../../services/style_setter/style_setter.js'
 
@@ -127,7 +128,7 @@ export default {
           avatarAltRadius: this.avatarAltRadiusLocal,
           tooltipRadius: this.tooltipRadiusLocal,
           attachmentRadius: this.attachmentRadiusLocal
-        }
+        },
       }
     },
     preview () {
@@ -143,9 +144,36 @@ export default {
       }
     },
     previewTheme () {
-      if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} }
+      if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, contrast: {} }
       return this.preview.theme
     },
+    previewContrast () {
+      if (!this.previewTheme.colors) return {}
+      const colors = this.previewTheme.colors
+      const hints = (ratio) => ({
+        text: ratio.toPrecision(3) + ':1',
+        // AA level, AAA level
+        aa: ratio >= 4.5,
+        aaa: ratio >= 7,
+        // same but for 18pt+ texts
+        laa: ratio >= 3,
+        laaa: ratio >= 4.5
+      })
+
+      const ratios = {
+        bgText: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.text)),
+        bgLink: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.link)),
+
+        panelText: getContrastRatio(hex2rgb(colors.panel), hex2rgb(colors.panelText)),
+
+        btnText: getContrastRatio(hex2rgb(colors.btn), hex2rgb(colors.btnText)),
+
+        topBarText: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarText)),
+        topBarLink: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarLink)),
+      }
+
+      return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {})
+    },
     previewRules () {
       if (!this.preview.colorRules) return ''
       return [this.preview.colorRules, this.preview.radiiRules, 'color: var(--text)'].join(';')
@@ -153,7 +181,8 @@ export default {
   },
   components: {
     ColorInput,
-    OpacityInput
+    OpacityInput,
+    ContrastRatio
   },
   methods: {
     exportCurrentTheme () {

src/components/style_switcher/style_switcher.vue

@@ -53,7 +53,9 @@
         <ColorInput name="bgColor" v-model="bgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="bgOpacity" v-model="bgOpacityLocal" :fallback="previewTheme.opacity.bg || 1"/>
         <ColorInput name="textColor" v-model="textColorLocal" :label="$t('settings.text')"/>
+        <ContrastRatio :contrast="previewContrast.bgText"/>
         <ColorInput name="linkColor" v-model="linkColorLocal" :label="$t('settings.links')"/>
+        <ContrastRatio :contrast="previewContrast.bgLink"/>
       </div>
       <div class="color-item">
         <ColorInput name="fgColor" v-model="fgColorLocal" :label="$t('settings.foreground')"/>
@@ -81,13 +83,16 @@
         <ColorInput name="panelColor" v-model="panelColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="panelOpacity" v-model="panelOpacityLocal" :fallback="previewTheme.opacity.panel || 1"/>
         <ColorInput name="panelTextColor" v-model="panelTextColorLocal" :fallback="previewTheme.colors.panelText" :label="$t('settings.links')"/>
+        <ContrastRatio :contrast="previewContrast.panelText" large="1"/>
         <ColorInput name="panelFaintColor" v-model="panelFaintColorLocal" :fallback="previewTheme.colors.panelFaint" :label="$t('settings.faint')"/>
       </div>
       <div class="color-item">
         <h4>Top bar</h4>
         <ColorInput name="topBarColor" v-model="topBarColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <ColorInput name="topBarTextColor" v-model="topBarTextColorLocal" :fallback="previewTheme.colors.topBarText" :label="$t('settings.text')"/>
+        <ContrastRatio :contrast="previewContrast.topBarText"/>
         <ColorInput name="topBarLinkColor" v-model="topBarLinkColorLocal" :fallback="previewTheme.colors.topBarLink" :label="$t('settings.links')"/>
+        <ContrastRatio :contrast="previewContrast.topBarLink"/>
       </div>
       <div class="color-item">
         <h4>Inputs</h4>
@@ -100,6 +105,7 @@
         <ColorInput name="btnColor" v-model="btnColorLocal" :fallback="fgColorLocal" :label="$t('settings.background')"/>
         <OpacityInput name="btnOpacity" v-model="btnOpacityLocal" :fallback="previewTheme.opacity.btn || 1"/>
         <ColorInput name="btnTextColor" v-model="btnTextColorLocal" :fallback="previewTheme.colors.btnText" :label="$t('settings.text')"/>
+        <ContrastRatio :contrast="previewContrast.btnText"/>
       </div>
       <div class="color-item">
         <h4>Borders</h4>

src/services/color_convert/color_convert.js

@@ -19,6 +19,42 @@ const rgb2hex = (r, g, b) => {
   return `#${((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1)}`
 }
 
+// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+// https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
+// https://en.wikipedia.org/wiki/SRGB#The_reverse_transformation
+const c2linear = (b) => {
+  // W3C gives 0.03928 while wikipedia states 0.04045
+  // what those magical numbers mean - I don't know.
+  // something about gamma-correction, i suppose.
+  // Sticking with W3C example.
+  const c = b / 255
+  if (c < 0.03928) {
+    return c / 12.92
+  } else {
+    return Math.pow((c + 0.055) / 1.055, 2.4)
+  }
+}
+
+const srgbToLinear = (srgb) => {
+  return 'rgb'.split('').reduce((acc, c) => { acc[c] = c2linear(srgb[c]); return acc }, {})
+}
+
+// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef
+// https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml
+const relativeLuminance = (srgb) => {
+  const {r, g, b} = srgbToLinear(srgb)
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b
+}
+
+// https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef
+const getContrastRatio = (a, b) => {
+  const la = relativeLuminance(a)
+  const lb = relativeLuminance(b)
+  const [l1, l2] = la > lb ? [la, lb] : [lb, la]
+
+  return (l1 + 0.05) / (l2 + 0.05)
+}
+
 const hex2rgb = (hex) => {
   const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex)
   return result ? {
@@ -47,5 +83,6 @@ export {
   rgb2hex,
   hex2rgb,
   mixrgb,
-  rgbstr2hex
+  rgbstr2hex,
+  getContrastRatio
 }