@wordpress/block-editor/build-module/components/contrast-checker/index.js

Generic block editor.

// packages/block-editor/src/components/contrast-checker/index.js
import a11yPlugin from "colord/plugins/a11y";
import namesPlugin from "colord/plugins/names";
import { colord, extend } from "colord";
import { __, sprintf } from "@wordpress/i18n";
import { Notice } from "@wordpress/components";
import { speak } from "@wordpress/a11y";
import { jsx } from "react/jsx-runtime";
extend([namesPlugin, a11yPlugin]);
function ContrastChecker({
  backgroundColor,
  fallbackBackgroundColor,
  fallbackTextColor,
  fallbackLinkColor,
  fontSize,
  // Font size value in pixels.
  isLargeText,
  textColor,
  linkColor,
  enableAlphaChecker = false
}) {
  const currentBackgroundColor = backgroundColor || fallbackBackgroundColor;
  if (!currentBackgroundColor) {
    return null;
  }
  const currentTextColor = textColor || fallbackTextColor;
  const currentLinkColor = linkColor || fallbackLinkColor;
  if (!currentTextColor && !currentLinkColor) {
    return null;
  }
  const textColors = [
    {
      color: currentTextColor,
      description: __("text color")
    },
    {
      color: currentLinkColor,
      description: __("link color")
    }
  ];
  const colordBackgroundColor = colord(currentBackgroundColor);
  const backgroundColorHasTransparency = colordBackgroundColor.alpha() < 1;
  const backgroundColorBrightness = colordBackgroundColor.brightness();
  const isReadableOptions = {
    level: "AA",
    size: isLargeText || isLargeText !== false && fontSize >= 24 ? "large" : "small"
  };
  let message = "";
  let speakMessage = "";
  for (const item of textColors) {
    if (!item.color) {
      continue;
    }
    const colordTextColor = colord(item.color);
    const isColordTextReadable = colordTextColor.isReadable(
      colordBackgroundColor,
      isReadableOptions
    );
    const textHasTransparency = colordTextColor.alpha() < 1;
    if (!isColordTextReadable) {
      if (backgroundColorHasTransparency || textHasTransparency) {
        continue;
      }
      message = backgroundColorBrightness < colordTextColor.brightness() ? sprintf(
        // translators: %s is a type of text color, e.g., "text color" or "link color".
        __(
          "This color combination may be hard for people to read. Try using a darker background color and/or a brighter %s."
        ),
        item.description
      ) : sprintf(
        // translators: %s is a type of text color, e.g., "text color" or "link color".
        __(
          "This color combination may be hard for people to read. Try using a brighter background color and/or a darker %s."
        ),
        item.description
      );
      speakMessage = __(
        "This color combination may be hard for people to read."
      );
      break;
    }
    if (textHasTransparency && enableAlphaChecker) {
      message = __("Transparent text may be hard for people to read.");
      speakMessage = __(
        "Transparent text may be hard for people to read."
      );
    }
  }
  if (!message) {
    return null;
  }
  speak(speakMessage);
  return /* @__PURE__ */ jsx("div", { className: "block-editor-contrast-checker", children: /* @__PURE__ */ jsx(
    Notice,
    {
      spokenMessage: null,
      status: "warning",
      isDismissible: false,
      children: message
    }
  ) });
}
var contrast_checker_default = ContrastChecker;
export {
  contrast_checker_default as default
};
//# sourceMappingURL=index.js.map