From 4b7b7d9905b965c225fd42fb68682b9602254c82 Mon Sep 17 00:00:00 2001 From: Henry Jameson Date: Wed, 10 Oct 2018 05:39:02 +0300 Subject: [PATCH] cleanup, documentation, contrast taking alpha into account. --- .../style_switcher/style_switcher.js | 38 +++++++--- src/services/color_convert/color_convert.js | 70 ++++++++++++++++--- 2 files changed, 91 insertions(+), 17 deletions(-) diff --git a/src/components/style_switcher/style_switcher.js b/src/components/style_switcher/style_switcher.js index 27efa230..d4381202 100644 --- a/src/components/style_switcher/style_switcher.js +++ b/src/components/style_switcher/style_switcher.js @@ -1,4 +1,4 @@ -import { rgb2hex, hex2rgb, getContrastRatio } from '../../services/color_convert/color_convert.js' +import { rgb2hex, hex2rgb, getContrastRatio, worstCase } 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' @@ -144,12 +144,13 @@ export default { } }, previewTheme () { - if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {}, contrast: {} } + if (!this.preview.theme) return { colors: {}, opacity: {}, radii: {} } return this.preview.theme }, previewContrast () { if (!this.previewTheme.colors) return {} const colors = this.previewTheme.colors + const opacity = this.previewTheme.opacity const hints = (ratio) => ({ text: ratio.toPrecision(3) + ':1', // AA level, AAA level @@ -160,16 +161,37 @@ export default { laaa: ratio >= 4.5 }) + // fgsfds :DDDD + const fgs = { + text: hex2rgb(colors.text), + panelText: hex2rgb(colors.panelText), + btnText: hex2rgb(colors.btnText), + topBarText: hex2rgb(colors.topBarText), + + link: hex2rgb(colors.link), + topBarLink: hex2rgb(colors.topBarLink), + } + + const bgs = { + bg: hex2rgb(colors.bg), + btn: hex2rgb(colors.btn), + panel: hex2rgb(colors.panel), + topBar: hex2rgb(colors.topBar) + } + const ratios = { - bgText: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.text)), - bgLink: getContrastRatio(hex2rgb(colors.bg), hex2rgb(colors.link)), + bgText: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.text), fgs.text), + bgLink: getContrastRatio(worstCase(bgs.bg, opacity.bg, fgs.link), fgs.link), - panelText: getContrastRatio(hex2rgb(colors.panel), hex2rgb(colors.panelText)), + // User Profile + tintText: getContrastRatio(worstCase(bgs.bg, 0.5, fgs.panelText), fgs.text), - btnText: getContrastRatio(hex2rgb(colors.btn), hex2rgb(colors.btnText)), + panelText: getContrastRatio(worstCase(bgs.panel, opacity.panel, fgs.panelText), fgs.panelText), - topBarText: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarText)), - topBarLink: getContrastRatio(hex2rgb(colors.topBar), hex2rgb(colors.topBarLink)), + btnText: getContrastRatio(worstCase(bgs.btn, opacity.btn, fgs.btnText), fgs.btnText), + + topBarText: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarText), fgs.topBarText), + topBarLink: getContrastRatio(worstCase(bgs.topBar, opacity.topBar, fgs.topBarLink), fgs.topBarLink) } return Object.entries(ratios).reduce((acc, [k, v]) => { acc[k] = hints(v); return acc }, {}) diff --git a/src/services/color_convert/color_convert.js b/src/services/color_convert/color_convert.js index 31ee3a6b..0acc7e7c 100644 --- a/src/services/color_convert/color_convert.js +++ b/src/services/color_convert/color_convert.js @@ -19,15 +19,21 @@ 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) => { +/** + * Converts 8-bit RGB component into linear component + * 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 + * + * @param {Number} bit - color component [0..255] + * @returns {Number} linear component [0..1] + */ +const c2linear = (bit) => { // 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 + const c = bit / 255 if (c < 0.03928) { return c / 12.92 } else { @@ -35,18 +41,36 @@ const c2linear = (b) => { } } +/** + * Converts sRGB into linear RGB + * @param {Object} srgb - sRGB color + * @returns {Object} linear rgb color + */ 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 +/** + * Calculates relative luminance for given color + * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#relativeluminancedef + * https://www.w3.org/TR/2008/REC-WCAG20-20081211/relative-luminance.xml + * + * @param {Object} srgb - sRGB color + * @returns {Number} relative luminance + */ 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 +/** + * Generates color ratio between two colors. Order is unimporant + * https://www.w3.org/TR/2008/REC-WCAG20-20081211/#contrast-ratiodef + * + * @param {Object} a - sRGB color + * @param {Object} b - sRGB color + * @returns {Number} color ratio + */ const getContrastRatio = (a, b) => { const la = relativeLuminance(a) const lb = relativeLuminance(b) @@ -55,6 +79,33 @@ const getContrastRatio = (a, b) => { return (l1 + 0.05) / (l2 + 0.05) } +/** + * This generates what "worst case" color would look like for transparent + * segments. I.e. black with .2 alpha and pure-white background image + * could make white text unreadable + * + * @param {Object} srgb - transparent color + * @param {Number} alpha - color's opacity/alpha channel + * @param {Boolean} white - use white "background" if true, black otherwise + * @returns {Object} sRGB of resulting color + */ +const transparentWorstCase = (srgb, alpha, white = false) => { + const bg = 'rgb'.split('').reduce((acc, c) => { acc[c] = Number(white) * 255; return acc }, {}) + return 'rgb'.split('').reduce((acc, c) => { + // Simplified https://en.wikipedia.org/wiki/Alpha_compositing#Alpha_blending + // for opaque bg and transparent fg + acc[c] = (srgb[c] * alpha + bg[c] * (1 - alpha)) + return acc + }, {}) +} + +const worstCase = (bg, bga, text) => { + if (bga === 1 || typeof bga === 'undefined') return bg + // taken from https://github.com/toish/chromatism/blob/master/src/operations/contrastRatio.js + const blackWorse = ((text.r * 299) + (text.g * 587) + (text.b * 114)) / 1000 <= 128 + return transparentWorstCase(bg, bga, !blackWorse) +} + const hex2rgb = (hex) => { const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex) return result ? { @@ -84,5 +135,6 @@ export { hex2rgb, mixrgb, rgbstr2hex, - getContrastRatio + getContrastRatio, + worstCase }