@instructure/ui-color-picker 9.9.0 → 9.10.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [9.10.0](https://github.com/instructure/instructure-ui/compare/v9.9.0...v9.10.0) (2024-11-19)
+
+
+### Features
+
+* **ui-color-picker,ui-color-utils:** add callback for contrast validation information and export validation methods ([3ac2582](https://github.com/instructure/instructure-ui/commit/3ac2582bd0b71ac8709bbe3e4c6ce481c53a239d))
+
+
+
+
+
 # [9.9.0](https://github.com/instructure/instructure-ui/compare/v9.8.1...v9.9.0) (2024-11-12)
 
 

package/es/ColorContrast/index.js

@@ -29,8 +29,7 @@ import React, { Component } from 'react';
 import { omitProps } from '@instructure/ui-react-utils';
 import { testable } from '@instructure/ui-testable';
 import { error } from '@instructure/console';
-import { contrast as getContrast } from '@instructure/ui-color-utils';
-import conversions from '@instructure/ui-color-utils';
+import { contrastWithAlpha, validateContrast } from '@instructure/ui-color-utils';
 import { withStyle, jsx } from '@instructure/emotion';
 import { Text } from '@instructure/ui-text';
 import { Pill } from '@instructure/ui-pill';
@@ -82,32 +81,42 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
         css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.pickedColorHex
       }, color)));
     };
-    this.calcBlendedColor = (c1, c2) => {
-      const alpha = 1 - (1 - c1.a) * (1 - c2.a);
-      return {
-        r: c2.r * c2.a / alpha + c1.r * c1.a * (1 - c2.a) / alpha,
-        g: c2.g * c2.a / alpha + c1.g * c1.a * (1 - c2.a) / alpha,
-        b: c2.b * c2.a / alpha + c1.b * c1.a * (1 - c2.a) / alpha,
-        a: 1
-      };
+    this.state = {
+      contrast: 1,
+      isValidNormalText: false,
+      isValidLargeText: false,
+      isValidGraphicsText: false
     };
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.calcState();
   }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props3, _this$props4, _this$props5, _this$props6;
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.firstColor) !== ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : _this$props4.firstColor) || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.secondColor) !== ((_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : _this$props5.secondColor) || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.validationLevel) !== ((_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : _this$props6.validationLevel)) {
+      var _this$props7, _this$props7$onContra;
+      const newState = this.calcState();
+      (_this$props7 = this.props) === null || _this$props7 === void 0 ? void 0 : (_this$props7$onContra = _this$props7.onContrastChange) === null || _this$props7$onContra === void 0 ? void 0 : _this$props7$onContra.call(_this$props7, {
+        contrast: newState.contrast,
+        isValidNormalText: newState.isValidNormalText,
+        isValidLargeText: newState.isValidLargeText,
+        isValidGraphicsText: newState.isValidGraphicsText,
+        firstColor: this.props.firstColor,
+        secondColor: this.props.secondColor
+      });
+    }
   }
   renderPreview() {
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      withoutColorPreview = _this$props4.withoutColorPreview,
-      firstColor = _this$props4.firstColor,
-      secondColor = _this$props4.secondColor,
-      firstColorLabel = _this$props4.firstColorLabel,
-      secondColorLabel = _this$props4.secondColorLabel;
+    const _this$props8 = this.props,
+      styles = _this$props8.styles,
+      withoutColorPreview = _this$props8.withoutColorPreview,
+      firstColor = _this$props8.firstColor,
+      secondColor = _this$props8.secondColor,
+      firstColorLabel = _this$props8.firstColorLabel,
+      secondColorLabel = _this$props8.secondColorLabel;
     if (withoutColorPreview) {
       return null;
     }
@@ -122,28 +131,27 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       css: styles === null || styles === void 0 ? void 0 : styles.secondColorPreview
     }, this.renderColorIndicator(secondColor, secondColorLabel || '')));
   }
-  //We project the firstColor onto an opaque white background, then we project the secondColor onto
-  //the projected first color. We calculate the contrast of these two, projected colors.
-  get calcContrast() {
-    const c1RGBA = conversions.colorToRGB(this.props.firstColor);
-    const c2RGBA = conversions.colorToRGB(this.props.secondColor);
-    const c1OnWhite = this.calcBlendedColor({
-      r: 255,
-      g: 255,
-      b: 255,
-      a: 1
-    }, c1RGBA);
-    const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA);
-    return getContrast(conversions.colorToHex8(c1OnWhite), conversions.colorToHex8(c2OnC1OnWhite), 2);
+  calcState() {
+    const contrast = contrastWithAlpha(this.props.firstColor, this.props.secondColor);
+    const newState = {
+      contrast,
+      ...validateContrast(contrast, this.props.validationLevel)
+    };
+    this.setState(newState);
+    return newState;
   }
   render() {
-    const _this$props5 = this.props,
-      styles = _this$props5.styles,
-      label = _this$props5.label,
-      normalTextLabel = _this$props5.normalTextLabel,
-      largeTextLabel = _this$props5.largeTextLabel,
-      graphicsTextLabel = _this$props5.graphicsTextLabel;
-    const contrast = this.calcContrast;
+    const _this$props9 = this.props,
+      styles = _this$props9.styles,
+      label = _this$props9.label,
+      normalTextLabel = _this$props9.normalTextLabel,
+      largeTextLabel = _this$props9.largeTextLabel,
+      graphicsTextLabel = _this$props9.graphicsTextLabel;
+    const _this$state = this.state,
+      contrast = _this$state.contrast,
+      isValidNormalText = _this$state.isValidNormalText,
+      isValidLargeText = _this$state.isValidLargeText,
+      isValidGraphicsText = _this$state.isValidGraphicsText;
     return jsx("div", Object.assign({}, omitProps(this.props, ColorContrast.allowedProps), {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorContrast
@@ -154,10 +162,11 @@ let ColorContrast = (_dec = withStyle(generateStyle, generateComponentTheme), _d
       as: "div"
     }, label)), jsx(Text, {
       size: "x-large"
-    }, contrast, ":1"), this.renderPreview(), this.renderStatus(contrast >= 4.5, normalTextLabel), this.renderStatus(contrast >= 3, largeTextLabel), this.renderStatus(contrast >= 3, graphicsTextLabel));
+    }, contrast, ":1"), this.renderPreview(), this.renderStatus(isValidNormalText, normalTextLabel), this.renderStatus(isValidLargeText, largeTextLabel), this.renderStatus(isValidGraphicsText, graphicsTextLabel));
   }
 }, _ColorContrast.displayName = "ColorContrast", _ColorContrast.propTypes = propTypes, _ColorContrast.allowedProps = allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
-  withoutColorPreview: false
+  withoutColorPreview: false,
+  validationLevel: 'AA'
 }, _ColorContrast)) || _class) || _class);
 export { ColorContrast };
 export default ColorContrast;

package/es/ColorContrast/props.js

@@ -35,7 +35,9 @@ const propTypes = {
   normalTextLabel: PropTypes.string.isRequired,
   secondColor: PropTypes.string.isRequired,
   secondColorLabel: PropTypes.string,
-  successLabel: PropTypes.string.isRequired
+  successLabel: PropTypes.string.isRequired,
+  onContrastChange: PropTypes.func,
+  validationLevel: PropTypes.oneOf(['AA', 'AAA'])
 };
-const allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel'];
+const allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];
 export { propTypes, allowedProps };

package/es/ColorPicker/index.js

@@ -171,7 +171,8 @@ let ColorPicker = (_dec = withStyle(generateStyle, generateComponentTheme), _dec
         largeTextLabel: this.props.colorMixerSettings.colorContrast.largeTextLabel,
         graphicsTextLabel: this.props.colorMixerSettings.colorContrast.graphicsTextLabel,
         firstColorLabel: this.props.colorMixerSettings.colorContrast.firstColorLabel,
-        secondColorLabel: this.props.colorMixerSettings.colorContrast.secondColorLabel
+        secondColorLabel: this.props.colorMixerSettings.colorContrast.secondColorLabel,
+        onContrastChange: this.props.colorMixerSettings.colorContrast.onContrastChange
       }))), jsx("div", {
         css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.popoverFooter
       }, jsx(Button, {

package/es/ColorPicker/props.js

@@ -57,7 +57,8 @@ const propTypes = {
       largeTextLabel: PropTypes.string.isRequired,
       graphicsTextLabel: PropTypes.string.isRequired,
       firstColorLabel: PropTypes.string.isRequired,
-      secondColorLabel: PropTypes.string.isRequired
+      secondColorLabel: PropTypes.string.isRequired,
+      onContrastChange: PropTypes.func
     })
   }),
   children: PropTypes.func,

package/lib/ColorContrast/index.js

@@ -10,8 +10,8 @@ var _react = _interopRequireWildcard(require("react"));
 var _omitProps = require("@instructure/ui-react-utils/lib/omitProps.js");
 var _testable = require("@instructure/ui-testable/lib/testable.js");
 var _console = require("@instructure/console");
-var _contrast = require("@instructure/ui-color-utils/lib/contrast.js");
-var _uiColorUtils = _interopRequireDefault(require("@instructure/ui-color-utils"));
+var _contrastWithAlpha = require("@instructure/ui-color-utils/lib/contrastWithAlpha.js");
+var _validateContrast = require("@instructure/ui-color-utils/lib/validateContrast.js");
 var _emotion = require("@instructure/emotion");
 var _Text = require("@instructure/ui-text/lib/Text");
 var _Pill = require("@instructure/ui-pill/lib/Pill");
@@ -88,32 +88,42 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
         css: (_this$props$styles3 = this.props.styles) === null || _this$props$styles3 === void 0 ? void 0 : _this$props$styles3.pickedColorHex
       }, color)));
     };
-    this.calcBlendedColor = (c1, c2) => {
-      const alpha = 1 - (1 - c1.a) * (1 - c2.a);
-      return {
-        r: c2.r * c2.a / alpha + c1.r * c1.a * (1 - c2.a) / alpha,
-        g: c2.g * c2.a / alpha + c1.g * c1.a * (1 - c2.a) / alpha,
-        b: c2.b * c2.a / alpha + c1.b * c1.a * (1 - c2.a) / alpha,
-        a: 1
-      };
+    this.state = {
+      contrast: 1,
+      isValidNormalText: false,
+      isValidLargeText: false,
+      isValidGraphicsText: false
     };
   }
   componentDidMount() {
     var _this$props$makeStyle, _this$props2;
     (_this$props$makeStyle = (_this$props2 = this.props).makeStyles) === null || _this$props$makeStyle === void 0 ? void 0 : _this$props$makeStyle.call(_this$props2);
+    this.calcState();
   }
-  componentDidUpdate() {
-    var _this$props$makeStyle2, _this$props3;
+  componentDidUpdate(prevProps) {
+    var _this$props$makeStyle2, _this$props3, _this$props4, _this$props5, _this$props6;
     (_this$props$makeStyle2 = (_this$props3 = this.props).makeStyles) === null || _this$props$makeStyle2 === void 0 ? void 0 : _this$props$makeStyle2.call(_this$props3);
+    if ((prevProps === null || prevProps === void 0 ? void 0 : prevProps.firstColor) !== ((_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : _this$props4.firstColor) || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.secondColor) !== ((_this$props5 = this.props) === null || _this$props5 === void 0 ? void 0 : _this$props5.secondColor) || (prevProps === null || prevProps === void 0 ? void 0 : prevProps.validationLevel) !== ((_this$props6 = this.props) === null || _this$props6 === void 0 ? void 0 : _this$props6.validationLevel)) {
+      var _this$props7, _this$props7$onContra;
+      const newState = this.calcState();
+      (_this$props7 = this.props) === null || _this$props7 === void 0 ? void 0 : (_this$props7$onContra = _this$props7.onContrastChange) === null || _this$props7$onContra === void 0 ? void 0 : _this$props7$onContra.call(_this$props7, {
+        contrast: newState.contrast,
+        isValidNormalText: newState.isValidNormalText,
+        isValidLargeText: newState.isValidLargeText,
+        isValidGraphicsText: newState.isValidGraphicsText,
+        firstColor: this.props.firstColor,
+        secondColor: this.props.secondColor
+      });
+    }
   }
   renderPreview() {
-    const _this$props4 = this.props,
-      styles = _this$props4.styles,
-      withoutColorPreview = _this$props4.withoutColorPreview,
-      firstColor = _this$props4.firstColor,
-      secondColor = _this$props4.secondColor,
-      firstColorLabel = _this$props4.firstColorLabel,
-      secondColorLabel = _this$props4.secondColorLabel;
+    const _this$props8 = this.props,
+      styles = _this$props8.styles,
+      withoutColorPreview = _this$props8.withoutColorPreview,
+      firstColor = _this$props8.firstColor,
+      secondColor = _this$props8.secondColor,
+      firstColorLabel = _this$props8.firstColorLabel,
+      secondColorLabel = _this$props8.secondColorLabel;
     if (withoutColorPreview) {
       return null;
     }
@@ -128,28 +138,27 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
       css: styles === null || styles === void 0 ? void 0 : styles.secondColorPreview
     }, this.renderColorIndicator(secondColor, secondColorLabel || '')));
   }
-  //We project the firstColor onto an opaque white background, then we project the secondColor onto
-  //the projected first color. We calculate the contrast of these two, projected colors.
-  get calcContrast() {
-    const c1RGBA = _uiColorUtils.default.colorToRGB(this.props.firstColor);
-    const c2RGBA = _uiColorUtils.default.colorToRGB(this.props.secondColor);
-    const c1OnWhite = this.calcBlendedColor({
-      r: 255,
-      g: 255,
-      b: 255,
-      a: 1
-    }, c1RGBA);
-    const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA);
-    return (0, _contrast.contrast)(_uiColorUtils.default.colorToHex8(c1OnWhite), _uiColorUtils.default.colorToHex8(c2OnC1OnWhite), 2);
+  calcState() {
+    const contrast = (0, _contrastWithAlpha.contrastWithAlpha)(this.props.firstColor, this.props.secondColor);
+    const newState = {
+      contrast,
+      ...(0, _validateContrast.validateContrast)(contrast, this.props.validationLevel)
+    };
+    this.setState(newState);
+    return newState;
   }
   render() {
-    const _this$props5 = this.props,
-      styles = _this$props5.styles,
-      label = _this$props5.label,
-      normalTextLabel = _this$props5.normalTextLabel,
-      largeTextLabel = _this$props5.largeTextLabel,
-      graphicsTextLabel = _this$props5.graphicsTextLabel;
-    const contrast = this.calcContrast;
+    const _this$props9 = this.props,
+      styles = _this$props9.styles,
+      label = _this$props9.label,
+      normalTextLabel = _this$props9.normalTextLabel,
+      largeTextLabel = _this$props9.largeTextLabel,
+      graphicsTextLabel = _this$props9.graphicsTextLabel;
+    const _this$state = this.state,
+      contrast = _this$state.contrast,
+      isValidNormalText = _this$state.isValidNormalText,
+      isValidLargeText = _this$state.isValidLargeText,
+      isValidGraphicsText = _this$state.isValidGraphicsText;
     return (0, _emotion.jsx)("div", Object.assign({}, (0, _omitProps.omitProps)(this.props, ColorContrast.allowedProps), {
       ref: this.handleRef,
       css: styles === null || styles === void 0 ? void 0 : styles.colorContrast
@@ -160,9 +169,10 @@ let ColorContrast = exports.ColorContrast = (_dec = (0, _emotion.withStyle)(_sty
       as: "div"
     }, label)), (0, _emotion.jsx)(_Text.Text, {
       size: "x-large"
-    }, contrast, ":1"), this.renderPreview(), this.renderStatus(contrast >= 4.5, normalTextLabel), this.renderStatus(contrast >= 3, largeTextLabel), this.renderStatus(contrast >= 3, graphicsTextLabel));
+    }, contrast, ":1"), this.renderPreview(), this.renderStatus(isValidNormalText, normalTextLabel), this.renderStatus(isValidLargeText, largeTextLabel), this.renderStatus(isValidGraphicsText, graphicsTextLabel));
   }
 }, _ColorContrast.displayName = "ColorContrast", _ColorContrast.propTypes = _props.propTypes, _ColorContrast.allowedProps = _props.allowedProps, _ColorContrast.componentId = 'ColorContrast', _ColorContrast.defaultProps = {
-  withoutColorPreview: false
+  withoutColorPreview: false,
+  validationLevel: 'AA'
 }, _ColorContrast)) || _class) || _class);
 var _default = exports.default = ColorContrast;

package/lib/ColorContrast/props.js

@@ -42,6 +42,8 @@ const propTypes = exports.propTypes = {
   normalTextLabel: _propTypes.default.string.isRequired,
   secondColor: _propTypes.default.string.isRequired,
   secondColorLabel: _propTypes.default.string,
-  successLabel: _propTypes.default.string.isRequired
+  successLabel: _propTypes.default.string.isRequired,
+  onContrastChange: _propTypes.default.func,
+  validationLevel: _propTypes.default.oneOf(['AA', 'AAA'])
 };
-const allowedProps = exports.allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel'];
+const allowedProps = exports.allowedProps = ['elementRef', 'failureLabel', 'firstColor', 'firstColorLabel', 'graphicsTextLabel', 'withoutColorPreview', 'label', 'largeTextLabel', 'normalTextLabel', 'secondColor', 'secondColorLabel', 'successLabel', 'onContrastChange', 'validationLevel'];

package/lib/ColorPicker/index.js

@@ -183,7 +183,8 @@ let ColorPicker = exports.ColorPicker = (_dec = (0, _emotion.withStyle)(_styles.
         largeTextLabel: this.props.colorMixerSettings.colorContrast.largeTextLabel,
         graphicsTextLabel: this.props.colorMixerSettings.colorContrast.graphicsTextLabel,
         firstColorLabel: this.props.colorMixerSettings.colorContrast.firstColorLabel,
-        secondColorLabel: this.props.colorMixerSettings.colorContrast.secondColorLabel
+        secondColorLabel: this.props.colorMixerSettings.colorContrast.secondColorLabel,
+        onContrastChange: this.props.colorMixerSettings.colorContrast.onContrastChange
       }))), (0, _emotion.jsx)("div", {
         css: (_this$props$styles5 = this.props.styles) === null || _this$props$styles5 === void 0 ? void 0 : _this$props$styles5.popoverFooter
       }, (0, _emotion.jsx)(_Button.Button, {

package/lib/ColorPicker/props.js

@@ -64,7 +64,8 @@ const propTypes = exports.propTypes = {
       largeTextLabel: _propTypes.default.string.isRequired,
       graphicsTextLabel: _propTypes.default.string.isRequired,
       firstColorLabel: _propTypes.default.string.isRequired,
-      secondColorLabel: _propTypes.default.string.isRequired
+      secondColorLabel: _propTypes.default.string.isRequired,
+      onContrastChange: _propTypes.default.func
     })
   }),
   children: _propTypes.default.func,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/ui-color-picker",
-  "version": "9.9.0",
+  "version": "9.10.0",
   "description": "A UI component library made by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
   "module": "./es/index.js",
@@ -24,33 +24,33 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.24.5",
-    "@instructure/console": "9.9.0",
-    "@instructure/emotion": "9.9.0",
-    "@instructure/shared-types": "9.9.0",
-    "@instructure/ui-a11y-content": "9.9.0",
-    "@instructure/ui-buttons": "9.9.0",
-    "@instructure/ui-color-utils": "9.9.0",
-    "@instructure/ui-dom-utils": "9.9.0",
-    "@instructure/ui-drilldown": "9.9.0",
-    "@instructure/ui-form-field": "9.9.0",
-    "@instructure/ui-icons": "9.9.0",
-    "@instructure/ui-pill": "9.9.0",
-    "@instructure/ui-popover": "9.9.0",
-    "@instructure/ui-react-utils": "9.9.0",
-    "@instructure/ui-testable": "9.9.0",
-    "@instructure/ui-text": "9.9.0",
-    "@instructure/ui-text-input": "9.9.0",
-    "@instructure/ui-themes": "9.9.0",
-    "@instructure/ui-tooltip": "9.9.0",
-    "@instructure/ui-utils": "9.9.0",
-    "@instructure/ui-view": "9.9.0",
+    "@instructure/console": "9.10.0",
+    "@instructure/emotion": "9.10.0",
+    "@instructure/shared-types": "9.10.0",
+    "@instructure/ui-a11y-content": "9.10.0",
+    "@instructure/ui-buttons": "9.10.0",
+    "@instructure/ui-color-utils": "9.10.0",
+    "@instructure/ui-dom-utils": "9.10.0",
+    "@instructure/ui-drilldown": "9.10.0",
+    "@instructure/ui-form-field": "9.10.0",
+    "@instructure/ui-icons": "9.10.0",
+    "@instructure/ui-pill": "9.10.0",
+    "@instructure/ui-popover": "9.10.0",
+    "@instructure/ui-react-utils": "9.10.0",
+    "@instructure/ui-testable": "9.10.0",
+    "@instructure/ui-text": "9.10.0",
+    "@instructure/ui-text-input": "9.10.0",
+    "@instructure/ui-themes": "9.10.0",
+    "@instructure/ui-tooltip": "9.10.0",
+    "@instructure/ui-utils": "9.10.0",
+    "@instructure/ui-view": "9.10.0",
     "prop-types": "^15.8.1"
   },
   "devDependencies": {
-    "@instructure/ui-axe-check": "9.9.0",
-    "@instructure/ui-babel-preset": "9.9.0",
-    "@instructure/ui-scripts": "9.9.0",
-    "@instructure/ui-test-utils": "9.9.0",
+    "@instructure/ui-axe-check": "9.10.0",
+    "@instructure/ui-babel-preset": "9.10.0",
+    "@instructure/ui-scripts": "9.10.0",
+    "@instructure/ui-test-utils": "9.10.0",
     "@testing-library/jest-dom": "^6.4.5",
     "@testing-library/react": "^15.0.7",
     "@testing-library/user-event": "^14.5.2",

package/src/ColorContrast/README.md

@@ -32,13 +32,23 @@ type: example
       super(props)
       this.state = {
         selectedForeGround: '#0CBF94',
-        selectedBackGround: '#35423A'
+        selectedBackGround: '#35423A',
+        validationLevel: 'AA'
       }
     }
 
     render() {
       return (
         <div>
+          <RadioInputGroup
+            onChange={(_e, value) => this.setState({ validationLevel: value })}
+            name="example1"
+            defaultValue="AA"
+            description="validationLevel"
+          >
+            <RadioInput key="AA" value="AA" label="AA" />
+            <RadioInput key="AAA" value="AAA" label="AAA" />
+          </RadioInputGroup>
           <ColorPreset
             label="Background"
             colors={[
@@ -86,6 +96,8 @@ type: example
             normalTextLabel="Normal text"
             largeTextLabel="Large text"
             graphicsTextLabel="Graphics text"
+            validationLevel={this.state.validationLevel}
+            onContrastChange={(contrastData) => console.log(contrastData)}
           />
         </div>
       )
@@ -99,9 +111,19 @@ type: example
   const Example = () => {
     const [selectedForeGround, setSelectedForeGround] = useState('#0CBF94')
     const [selectedBackGround, setSelectedBackGround] = useState('#35423A')
+    const [validationLevel, setValidationLevel] = useState('AA')
 
     return (
       <div>
+        <RadioInputGroup
+          onChange={(_e, value) => setValidationLevel(value)}
+          name="example1"
+          defaultValue="AA"
+          description="validationLevel"
+        >
+          <RadioInput key="AA" value="AA" label="AA" />
+          <RadioInput key="AAA" value="AAA" label="AAA" />
+        </RadioInputGroup>
         <ColorPreset
           label="Background"
           colors={[
@@ -149,6 +171,8 @@ type: example
           normalTextLabel="Normal text"
           largeTextLabel="Large text"
           graphicsTextLabel="Graphics text"
+          validationLevel={validationLevel}
+          onContrastChange={(contrastData) => console.log(contrastData)}
         />
       </div>
     )

package/src/ColorContrast/index.tsx

@@ -29,9 +29,10 @@ import React, { Component } from 'react'
 import { omitProps } from '@instructure/ui-react-utils'
 import { testable } from '@instructure/ui-testable'
 import { error } from '@instructure/console'
-import { contrast as getContrast } from '@instructure/ui-color-utils'
-import conversions from '@instructure/ui-color-utils'
-import type { RGBAType } from '@instructure/ui-color-utils'
+import {
+  contrastWithAlpha,
+  validateContrast
+} from '@instructure/ui-color-utils'
 import { withStyle, jsx } from '@instructure/emotion'
 
 import { Text } from '@instructure/ui-text'
@@ -40,7 +41,7 @@ import { Pill } from '@instructure/ui-pill'
 import ColorIndicator from '../ColorIndicator'
 
 import { propTypes, allowedProps } from './props'
-import type { ColorContrastProps } from './props'
+import type { ColorContrastProps, ColorContrastState } from './props'
 
 import generateStyle from './styles'
 import generateComponentTheme from './theme'
@@ -52,17 +53,25 @@ category: components
 **/
 @withStyle(generateStyle, generateComponentTheme)
 @testable()
-class ColorContrast extends Component<ColorContrastProps> {
+class ColorContrast extends Component<ColorContrastProps, ColorContrastState> {
   static propTypes = propTypes
   static allowedProps = allowedProps
   static readonly componentId = 'ColorContrast'
 
   static defaultProps = {
-    withoutColorPreview: false
+    withoutColorPreview: false,
+    validationLevel: 'AA'
   }
 
   constructor(props: ColorContrastProps) {
     super(props)
+
+    this.state = {
+      contrast: 1,
+      isValidNormalText: false,
+      isValidLargeText: false,
+      isValidGraphicsText: false
+    }
   }
 
   ref: HTMLDivElement | null = null
@@ -79,10 +88,27 @@ class ColorContrast extends Component<ColorContrastProps> {
 
   componentDidMount() {
     this.props.makeStyles?.()
+    this.calcState()
   }
 
-  componentDidUpdate() {
+  componentDidUpdate(prevProps: ColorContrastProps) {
     this.props.makeStyles?.()
+    if (
+      prevProps?.firstColor !== this.props?.firstColor ||
+      prevProps?.secondColor !== this.props?.secondColor ||
+      prevProps?.validationLevel !== this.props?.validationLevel
+    ) {
+      const newState = this.calcState()
+
+      this.props?.onContrastChange?.({
+        contrast: newState.contrast,
+        isValidNormalText: newState.isValidNormalText,
+        isValidLargeText: newState.isValidLargeText,
+        isValidGraphicsText: newState.isValidGraphicsText,
+        firstColor: this.props.firstColor,
+        secondColor: this.props.secondColor
+      })
+    }
   }
 
   renderStatus = (pass: boolean, description: string) => {
@@ -153,32 +179,17 @@ class ColorContrast extends Component<ColorContrastProps> {
     )
   }
 
-  calcBlendedColor = (c1: RGBAType, c2: RGBAType) => {
-    const alpha = 1 - (1 - c1.a) * (1 - c2.a)
-    return {
-      r: (c2.r * c2.a) / alpha + (c1.r * c1.a * (1 - c2.a)) / alpha,
-      g: (c2.g * c2.a) / alpha + (c1.g * c1.a * (1 - c2.a)) / alpha,
-      b: (c2.b * c2.a) / alpha + (c1.b * c1.a * (1 - c2.a)) / alpha,
-      a: 1
-    }
-  }
-
-  //We project the firstColor onto an opaque white background, then we project the secondColor onto
-  //the projected first color. We calculate the contrast of these two, projected colors.
-  get calcContrast() {
-    const c1RGBA = conversions.colorToRGB(this.props.firstColor)
-    const c2RGBA = conversions.colorToRGB(this.props.secondColor)
-    const c1OnWhite = this.calcBlendedColor(
-      { r: 255, g: 255, b: 255, a: 1 },
-      c1RGBA
-    )
-    const c2OnC1OnWhite = this.calcBlendedColor(c1OnWhite, c2RGBA)
-
-    return getContrast(
-      conversions.colorToHex8(c1OnWhite),
-      conversions.colorToHex8(c2OnC1OnWhite),
-      2
+  calcState() {
+    const contrast = contrastWithAlpha(
+      this.props.firstColor,
+      this.props.secondColor
     )
+    const newState = {
+      contrast,
+      ...validateContrast(contrast, this.props.validationLevel)
+    }
+    this.setState(newState)
+    return newState
   }
 
   render() {
@@ -190,7 +201,12 @@ class ColorContrast extends Component<ColorContrastProps> {
       graphicsTextLabel
     } = this.props
 
-    const contrast = this.calcContrast
+    const {
+      contrast,
+      isValidNormalText,
+      isValidLargeText,
+      isValidGraphicsText
+    } = this.state
 
     return (
       <div
@@ -205,9 +221,9 @@ class ColorContrast extends Component<ColorContrastProps> {
         </div>
         <Text size="x-large">{contrast}:1</Text>
         {this.renderPreview()}
-        {this.renderStatus(contrast >= 4.5, normalTextLabel)}
-        {this.renderStatus(contrast >= 3, largeTextLabel)}
-        {this.renderStatus(contrast >= 3, graphicsTextLabel)}
+        {this.renderStatus(isValidNormalText, normalTextLabel)}
+        {this.renderStatus(isValidLargeText, largeTextLabel)}
+        {this.renderStatus(isValidGraphicsText, graphicsTextLabel)}
       </div>
     )
   }