Merge branch 'master' into test-utils

packages/s2-core/__tests__/unit/utils/color-spec.ts

@@ -1,4 +1,4 @@
-import { getPalette, shouldReverseFontColor } from '@/utils';
+import { getPalette, shouldReverseFontColor, isReadableText } from '@/utils';
 import { generatePalette, generateStandardColors } from '@/utils/color';
 
 const expectThemeColor = '#F1535F';
@@ -109,4 +109,24 @@ describe('Theme Color Tests', () => {
       expect(shouldReverseFontColor(color)).toBeFalsy();
     });
   });
+
+  test('should use reverse font color when the background color dark and the contrast between the background color and the font color is too low', () => {
+    const backgroundColor = '#000000';
+
+    const fontColors = ['#000000', '#1D2129'];
+
+    fontColors.forEach((fontColor) => {
+      expect(isReadableText(backgroundColor, fontColor)).toBeFalsy();
+    });
+  });
+
+  test('should use default font color when the background color light and the contrast between the background color and the font color is too high', () => {
+    const backgroundColor = '#ffffff';
+
+    const fontColors = ['#000000', '#1D2129'];
+
+    fontColors.forEach((fontColor) => {
+      expect(isReadableText(backgroundColor, fontColor)).toBeTruthy();
+    });
+  });
 });

packages/s2-core/src/cell/data-cell.ts

@@ -37,7 +37,7 @@ import {
   DEFAULT_FONT_COLOR,
   REVERSE_FONT_COLOR,
 } from '../common/constant/condition';
-import { shouldReverseFontColor } from '../utils/color';
+import { shouldReverseFontColor, isReadableText } from '../utils/color';
 import { LayoutWidthTypes } from '../common/constant/options';
 import { getDataCellIconStyle } from '../utils/layout';
 
@@ -221,10 +221,11 @@ export class DataCell extends BaseCell<ViewMeta> {
     const { backgroundColor, intelligentReverseTextColor } =
       this.getBackgroundColor();
 
-    // text 默认为黑色，当背景颜色亮度过低时，修改 text 为白色
+    // 当背景亮度过低时，且背景色与文字颜色对比度过低时，开启反色
     if (
       shouldReverseFontColor(backgroundColor) &&
-      textStyle.fill === DEFAULT_FONT_COLOR &&
+      (textFill === DEFAULT_FONT_COLOR ||
+        !isReadableText(backgroundColor, textFill)) &&
       intelligentReverseTextColor
     ) {
       textFill = REVERSE_FONT_COLOR;
@@ -323,8 +324,7 @@ export class DataCell extends BaseCell<ViewMeta> {
       this.meta.rowIndex,
     );
     let backgroundColor = backgroundColorByCross.backgroundColor;
-    const backgroundColorOpacity =
-      backgroundColorByCross.backgroundColorOpacity;
+    let backgroundColorOpacity = backgroundColorByCross.backgroundColorOpacity;
 
     if (this.shouldHideRowSubtotalData()) {
       return { backgroundColor, backgroundColorOpacity };
@@ -338,6 +338,7 @@ export class DataCell extends BaseCell<ViewMeta> {
       if (attrs) {
         backgroundColor = attrs.fill;
         intelligentReverseTextColor = attrs.intelligentReverseTextColor;
+        backgroundColorOpacity = 1;
       }
     }
     return {

packages/s2-core/src/utils/color.ts

@@ -26,6 +26,17 @@ export const shouldReverseFontColor = (color: string) => {
   return tinycolor(color).getLuminance() <= 0.5;
 };
 
+/**
+ * @param backgroundColor
+ * @param fontColor
+ */
+export const isReadableText = (backgroundColor: string, fontColor: string) => {
+  return tinycolor.isReadable(backgroundColor, fontColor, {
+    level: 'AA',
+    size: 'small',
+  });
+};
+
 const FONT_COLOR_RELATIONS: Array<{
   fontColorIndex: number;
   bgColorIndex: number;

s2-site/docs/manual/basic/conditions.en.md

@@ -20,9 +20,9 @@ The `S2` field marking feature is configured by configuring
 the [`Conditions`](/docs/api/general/S2Options#conditions) attribute in `s2Options` .
 
 ```js
- // 构建options 
+ // 构建 options 
 const s2Options = {
-  width: 600, height: 600, // 通过配置conditions 实现字段标记
+  width: 600, height: 600, // 通过配置 conditions 实现字段标记
   conditions: {
     text: [ {
       field: "price", mapping(fieldValue, data) {
@@ -137,7 +137,7 @@ color:<Playground data-mdast="html" path="analysis/conditions/demo/gradient-inte
 ### Turn on text intelligent inversion
 
 By displaying the return value of the `mapping` function in the specified `background` field tag
-the `intelligentReverseTextColor` attribute value is `true` . When the marker background color is darker, the text color
+the `intelligentReverseTextColor` attribute value is `true` . When the mark background color is dark and the text color and background color combination does not meet the Level [AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) standards of the WCAG2.0 guidelines, the text color
 will change to white. When the marker background color is bright, the text color defaults to black.
 Priority: `intelligentReverseTextColor` of `background condition` < `fill` of `text condition`
 

s2-site/docs/manual/basic/conditions.zh.md

@@ -149,7 +149,7 @@ const s2Options = {
 ### 开启文字智能反色
 
 通过显示指定 `background` 字段标记中的 `mapping` 函数返回值  `intelligentReverseTextColor` 属性值为 `true`。
-当标记背景颜色较暗时，文本颜色将变为白色。当标记背景颜色明亮时，文本颜色默认为黑色。
+当标记背景颜色较暗且文本颜色与背景颜色组合不符合 WCAG2.0 指南的 [AA](https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html) 级标准时，文本颜色将变为白色。当标记背景颜色明亮时，文本颜色默认为黑色。
 优先级： `background condition` 的 `intelligentReverseTextColor` < `text condition` 的 `fill`
 
 <Playground path="analysis/conditions/demo/intelligent-background.ts" rid='condition-intelligent-background'></playground>