Step 2.3: fix color-contrast issues in PivotGrid, TimeView, checkbox disabled state, gantt

EugeniyKiyashko · EugeniyKiyashko · commit 4908b4384ad1 · 2026-01-29T19:21:13.000+04:00
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Angular/app/app.component.ts
@@ -132,7 +132,7 @@ export class AppComponent {
 
     return (value > 50000)
       ? { font: '006100', fill: 'C6EFCE', bold: false }
-      : { font: '9C6500', fill: 'FFEB9C', bold: false };
+      : { font: '6E4600', fill: 'FFEB9C', bold: false };
   }
 }
 
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/React/App.tsx
@@ -81,7 +81,7 @@ const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance =>
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 };
 
 const onExporting = (e: PivotGridTypes.ExportingEvent) => {
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/ReactJs/App.js
@@ -66,7 +66,7 @@ const getConditionalAppearance = (cell) => {
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 };
 const onExporting = (e) => {
   const workbook = new Workbook();
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/Vue/App.vue
@@ -125,7 +125,7 @@ function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppea
   if (value > 50000) {
     return { font: '006100', fill: 'C6EFCE' };
   }
-  return { font: '9C6500', fill: 'FFEB9C' };
+  return { font: '6E4600', fill: 'FFEB9C' };
 }
 
 </script>
diff --git a/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js b/apps/demos/Demos/PivotGrid/ExcelJSCellCustomization/jQuery/index.js
@@ -110,6 +110,6 @@ $(() => {
     if (cell.value > 50000) {
       return { font: '006100', fill: 'C6EFCE' };
     }
-    return { font: '9C6500', fill: 'FFEB9C' };
+    return { font: '6E4600', fill: 'FFEB9C' };
   }
 });
diff --git a/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css b/apps/demos/Demos/Sortable/Kanban/Angular/app/app.component.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/React/styles.css b/apps/demos/Demos/Sortable/Kanban/React/styles.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css b/apps/demos/Demos/Sortable/Kanban/ReactJs/styles.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/Vue/App.vue b/apps/demos/Demos/Sortable/Kanban/Vue/App.vue
@@ -127,7 +127,7 @@ function getPriorityClass(task: Task) {
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css b/apps/demos/Demos/Sortable/Kanban/jQuery/styles.css
@@ -46,7 +46,7 @@
 }
 
 .card-assignee {
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .card-priority {
diff --git a/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css b/apps/demos/Demos/Tabs/Selection/Angular/app/app.component.css
@@ -45,7 +45,7 @@
 
 ::ng-deep .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 ::ng-deep .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/React/styles.css b/apps/demos/Demos/Tabs/Selection/React/styles.css
@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css b/apps/demos/Demos/Tabs/Selection/ReactJs/styles.css
@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/Vue/App.vue b/apps/demos/Demos/Tabs/Selection/Vue/App.vue
@@ -114,7 +114,7 @@ const selectedItemId = ref(employees[0].id);
 
   .demo-info {
     padding-left: 8px;
-    opacity: 0.6;
+    color: var(--dx-color-icon);
   }
 
   .icon-container {
diff --git a/apps/demos/Demos/Tabs/Selection/jQuery/styles.css b/apps/demos/Demos/Tabs/Selection/jQuery/styles.css
@@ -45,7 +45,7 @@
 
 .demo-info {
   padding-left: 8px;
-  opacity: 0.6;
+  color: var(--dx-color-icon);
 }
 
 .icon-container {
diff --git a/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts b/e2e/testcafe-devextreme/tests/accessibility/actionSheet.ts
@@ -2,7 +2,6 @@ import { Properties } from 'devextreme/ui/action_sheet.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -22,14 +21,8 @@ const options: Options<Properties> = {
   showCancelButton: [true, false],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  rules: { 'color-contrast': { enabled: true } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxActionSheet',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/popover.ts b/e2e/testcafe-devextreme/tests/accessibility/popover.ts
@@ -29,14 +29,8 @@ const options: Options<Properties> = {
   ],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  rules: { 'color-contrast': { enabled: true } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxPopover',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/popup.ts b/e2e/testcafe-devextreme/tests/accessibility/popup.ts
@@ -2,7 +2,7 @@ import { ToolbarItem, Properties } from 'devextreme/ui/popup.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
+import { isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -31,14 +31,8 @@ const options: Options<Properties> = {
   height: [280],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  rules: { 'color-contrast': { enabled: true } },
-} : {};
-
 const visibleConfiguration: Configuration = {
   component: 'dxPopup',
-  a11yCheckConfig,
   options: {
     ...options,
     visible: [true],
@@ -54,7 +48,6 @@ testAccessibility(visibleConfiguration);
 
 const invisibleConfiguration: Configuration = {
   component: 'dxPopup',
-  a11yCheckConfig,
   options: {
     ...options,
     visible: [false],
diff --git a/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts b/e2e/testcafe-devextreme/tests/accessibility/progressBar.ts
@@ -15,14 +15,8 @@ const options: Options<Properties> = {
   elementAttr: [{ 'aria-label': 'Progress Bar' }],
 };
 
-const a11yCheckConfig = {
-  // NOTE: color-contrast issues
-  rules: { 'color-contrast': { enabled: true } },
-};
-
 const configuration: Configuration = {
   component: 'dxProgressBar',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts b/e2e/testcafe-devextreme/tests/accessibility/tabPanel.ts
@@ -2,7 +2,6 @@ import { Item, Properties } from 'devextreme/ui/tab_panel.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -28,14 +27,8 @@ const options: Options<Properties> = {
   // stylingMode: ['primary', 'secondary'],
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  rules: { 'color-contrast': { enabled: true } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxTabPanel',
-  a11yCheckConfig,
   options,
 };
 
diff --git a/e2e/testcafe-devextreme/tests/accessibility/tabs.ts b/e2e/testcafe-devextreme/tests/accessibility/tabs.ts
@@ -2,7 +2,6 @@ import { Item, Properties } from 'devextreme/ui/tabs.d';
 import url from '../../helpers/getPageUrl';
 import { testAccessibility, Configuration } from '../../helpers/accessibility/test';
 import { Options } from '../../helpers/generateOptionMatrix';
-import { isMaterial, isMaterialBased } from '../../helpers/themeUtils';
 
 fixture.disablePageReloads`Accessibility`
   .page(url(__dirname, '../container.html'));
@@ -33,14 +32,8 @@ const created = async (t: TestController): Promise<void> => {
   await t.pressKey('tab');
 };
 
-const a11yCheckConfig = isMaterialBased() ? {
-  // NOTE: color-contrast issues in Material
-  rules: { 'color-contrast': { enabled: true } },
-} : {};
-
 const configuration: Configuration = {
   component: 'dxTabs',
-  a11yCheckConfig,
   options,
   created,
 };
diff --git a/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss b/packages/devextreme-scss/scss/widgets/material/checkBox/_index.scss
@@ -19,7 +19,15 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
 
   &.dx-state-readonly,
   &.dx-state-disabled {
-    border-color: color.change($checkbox-border-color, $alpha: 0.26);
+    opacity: 1;
+
+    .dx-checkbox-icon {
+      border-color: $base-disabled-color;
+    }
+
+    .dx-checkbox-text {
+      color: $base-disabled-color;
+    }
   }
 
   &.dx-state-focused,
@@ -43,7 +51,7 @@ $material-checkbox-ripple-transition: all 0.4s cubic-bezier(0.23, 1, 0.32, 1);
     &.dx-state-readonly,
     &.dx-state-disabled {
       .dx-checkbox-icon {
-        background-color: color.change($checkbox-border-color, $alpha: 0.26);
+        background-color: $base-disabled-color;
       }
     }
   }
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_colors.scss
@@ -14,7 +14,7 @@ $gantt-parent-task-background-color: null !default;
 }
 
 @if $color == "blue" or $color == "orange" or $color == "purple" or $color == "teal" {
-  $gantt-parent-task-background-color: #8bc34a !default;
+  $gantt-parent-task-background-color: $base-success !default;
 }
 
 @if $mode == "light" {
diff --git a/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss b/packages/devextreme-scss/scss/widgets/material/gantt/_index.scss
@@ -112,7 +112,7 @@ $gantt-successor-background-color: white;
         border-bottom-left-radius: 0;
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg {
-          background-color: rgba(255, 255, 255, 0.2);
+          background-color: rgba(0, 0, 0, 0.2);
         }
 
         &:not(.dx-gantt-smallTask)::before,
@@ -134,8 +134,8 @@ $gantt-successor-background-color: white;
         }
 
         &:not(.dx-gantt-noPrg) .dx-gantt-tPrg::before {
-          border-left-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-left-color: rgba(0, 0, 0, 0.2);
+          border-top-color: rgba(0, 0, 0, 0.2);
         }
 
         &::after,
@@ -146,8 +146,8 @@ $gantt-successor-background-color: white;
         }
 
         &.dx-gantt-cmpl::after {
-          border-right-color: rgba(255, 255, 255, 0.2);
-          border-top-color: rgba(255, 255, 255, 0.2);
+          border-right-color: rgba(0, 0, 0, 0.2);
+          border-top-color: rgba(0, 0, 0, 0.2);
         }
 
         &.dx-gantt-cmpl .dx-gantt-tPrg::after {
diff --git a/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss b/packages/devextreme-scss/scss/widgets/material/pivotGrid/_colors.scss
@@ -11,7 +11,7 @@ $pivotgrid-border-color: $base-border-color !default;
 * $name 10. Header text color
 * $type color
 */
-$pivotgrid-area-color: color.change($base-text-color, $alpha: 0.54) !default;
+$pivotgrid-area-color: $base-text-color !default;
 $pivotgrid-field-area-box-text-color: $pivotgrid-area-color !default;
 $pivotgrid-field-area-box-background-color: null !default;
 $pivotgrid-data-area-color: $base-text-color !default;
diff --git a/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss b/packages/devextreme-scss/scss/widgets/material/timeView/_colors.scss
@@ -3,12 +3,12 @@
 @use "../colors" as *;
 
 // adduse
-$clock-digits-color: null !default;
+$clock-digits-color: $base-icon-color !default;
 
-@if $mode == "light" {
-  $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default;
-}
+// @if $mode == "light" {
+//   $clock-digits-color: color.change($base-text-color, $alpha: 0.54) !default;
+// }
 
-@if $mode == "dark" {
-  $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default;
-}
+// @if $mode == "dark" {
+//   $clock-digits-color: color.change($base-text-color, $alpha: 0.6) !default;
+// }

Original file line number	Diff line number	Diff line change
`@@ -132,7 +132,7 @@ export class AppComponent {`
`132`	`132`
`133`	`133`	`return (value > 50000)`
`134`	`134`	`? { font: '006100', fill: 'C6EFCE', bold: false }`
`135`		`- : { font: '9C6500', fill: 'FFEB9C', bold: false };`
	`135`	`+ : { font: '6E4600', fill: 'FFEB9C', bold: false };`
`136`	`136`	`}`
`137`	`137`	`}`
`138`	`138`
Original file line number	Diff line number	Diff line change
`@@ -81,7 +81,7 @@ const getConditionalAppearance = (cell: PivotGridCell): ConditionalAppearance =>`
`81`	`81`	`if (value > 50000) {`
`82`	`82`	`return { font: '006100', fill: 'C6EFCE' };`
`83`	`83`	`}`
`84`		`- return { font: '9C6500', fill: 'FFEB9C' };`
	`84`	`+ return { font: '6E4600', fill: 'FFEB9C' };`
`85`	`85`	`};`
`86`	`86`
`87`	`87`	`const onExporting = (e: PivotGridTypes.ExportingEvent) => {`
Original file line number	Diff line number	Diff line change
`@@ -66,7 +66,7 @@ const getConditionalAppearance = (cell) => {`
`66`	`66`	`if (value > 50000) {`
`67`	`67`	`return { font: '006100', fill: 'C6EFCE' };`
`68`	`68`	`}`
`69`		`- return { font: '9C6500', fill: 'FFEB9C' };`
	`69`	`+ return { font: '6E4600', fill: 'FFEB9C' };`
`70`	`70`	`};`
`71`	`71`	`const onExporting = (e) => {`
`72`	`72`	`const workbook = new Workbook();`
Original file line number	Diff line number	Diff line change
`@@ -125,7 +125,7 @@ function getConditionalAppearance(cell: DxPivotGridTypes.Cell): ConditionalAppea`
`125`	`125`	`if (value > 50000) {`
`126`	`126`	`return { font: '006100', fill: 'C6EFCE' };`
`127`	`127`	`}`
`128`		`- return { font: '9C6500', fill: 'FFEB9C' };`
	`128`	`+ return { font: '6E4600', fill: 'FFEB9C' };`
`129`	`129`	`}`
`130`	`130`
`131`	`131`	`</script>`
Original file line number	Diff line number	Diff line change
`@@ -110,6 +110,6 @@ $(() => {`
`110`	`110`	`if (cell.value > 50000) {`
`111`	`111`	`return { font: '006100', fill: 'C6EFCE' };`
`112`	`112`	`}`
`113`		`- return { font: '9C6500', fill: 'FFEB9C' };`
	`113`	`+ return { font: '6E4600', fill: 'FFEB9C' };`
`114`	`114`	`}`
`115`	`115`	`});`
Original file line number	Diff line number	Diff line change
`@@ -46,7 +46,7 @@`
`46`	`46`	`}`
`47`	`47`
`48`	`48`	`.card-assignee {`
`49`		`- opacity: 0.6;`
	`49`	`+ color: var(--dx-color-icon);`
`50`	`50`	`}`
`51`	`51`
`52`	`52`	`.card-priority {`
Original file line number	Diff line number	Diff line change
`@@ -127,7 +127,7 @@ function getPriorityClass(task: Task) {`
`127`	`127`	`}`
`128`	`128`
`129`	`129`	`.card-assignee {`
`130`		`- opacity: 0.6;`
	`130`	`+ color: var(--dx-color-icon);`
`131`	`131`	`}`
`132`	`132`
`133`	`133`	`.card-priority {`