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
background
- a background color in hex or rgbforeground
- a foreground color in hex or rgbcompliance
(optional: defaults to"normal"
) - one of the following values:"large"
- 3"normal"
- 4.5"AAA"
- 7number
- a custom ratio
Returns
true
if the color is contrast compliant