Skip to main content
react-md

isContrastCompliant

function isContrastCompliant(
  background: string,
  foreground: string,
  compliance?: ContrastRatioCompliance | number
): boolean;

The isContrastCompliant function can be used to check if a background and foreground color meet the required contrast ratio.

Example Usage

import { isContrastCompliant } from "@react-md/core/theme/utils";

const rmdTeal500 = "#009688";
expect(isContrastCompliant("#fafafa", rmdTeal500, "large")).toBe(true);
expect(isContrastCompliant("#fafafa", rmdTeal500, "normal")).toBe(false);
expect(isContrastCompliant("#fafafa", rmdTeal500, "AAA")).toBe(false);

expect(isContrastCompliant("#fafafa", rmdTeal500)).toBe(false);

Parameters

Returns

true if the color is contrast compliant