Get Contrast Ratio From CSSRGB
Added in: @sardine/colour@2.2.0
Description
Calculates the contrast ratio between two colours in CSSRGB format, using the specified WCAG standard.
Signature
function getContrastRatioFromCSSRGB(
colour1: string,
colour2: string,
standard: WCAG
): number;
Parameters
colour1
:string
— The first colour in CSSRGB format (e.g.,"rgb(255,0,0)"
).colour2
:string
— The second colour in CSSRGB format (e.g.,"rgb(0,255,0)"
).standard
:WCAG
— The WCAG standard to evaluate the contrast ratio against (e.g.,"WCAG2.1"
).
Returns
number
— The contrast ratio between the two colours, truncated to 3 decimal places.
Examples
import { getContrastRatioFromCSSRGB } from "@sardine/colour";
getContrastRatioFromCSSRGB("rgb(255,0,0)", "rgb(0,255,0)", "WCAG2.1");
// => 1.284
getContrastRatioFromCSSRGB("rgb(0,0,0)", "rgb(255,255,255)", "WCAG2.1");
// => 21
Error Handling
- If either colour is not a valid CSSRGB string, the function may throw an error from
convertCSSRGBtoRGB
. - If the standard is not a valid WCAG value, the function may throw an error from downstream functions.
Interactive Demo
Try the function yourself with our interactive playground: