Get Contrast Ratio From Named CSS Colour
Added in: @sardine/colour@1.2.0
Description
Calculates the contrast ratio between two named CSS colours according to the specified WCAG standard.
Signature
function getContrastRatioFromNamedCSSColour(
colour1: string,
colour2: string,
standard?: WCAG
): number;
Parameters
colour1
:string
— The first named CSS colour (e.g.,"navy"
).colour2
:string
— The second named CSS colour (e.g.,"yellow"
).standard
:WCAG
(optional) — The WCAG standard to use (e.g.,"WCAG2.1"
).
Returns
number
— The contrast ratio value.
Examples
import { getContrastRatioFromNamedCSSColour } from "@sardine/colour";
getContrastRatioFromNamedCSSColour("navy", "yellow", "WCAG2.1");
// => 15.3
Error Handling
- Throws an error if either input is not a valid named CSS colour.
Interactive Demo
Try the function yourself with our interactive playground: