Contrast & Accessibility
Check WCAG ratings, contrast ratios, and color brightness using the Color class.
Contrast & Accessibility Methods
contrastRatio()
Calculates the contrast ratio between the current color and another color based on the WCAG formula.
Signature
contrastRatio(other: ColorType | CSSColor): numberParameters
| Parameter | Type | Description |
|---|---|---|
other | ColorType | CSSColor | The color to compare against. |
Returns
number: The WCAG contrast ratio (rounded to 2 decimal places). Ranges from1(no contrast) to21(maximum contrast, e.g., black vs. white).
Example
playground.ts
getWCAGRating()
Determines the WCAG readability rating (Fail, AA, AAA) for standard text.
Signature
getWCAGRating(other: ColorType | CSSColor): 'Fail' | 'AA' | 'AAA'Parameters
| Parameter | Type | Description |
|---|---|---|
other | ColorType | CSSColor | The color to test against. |
Returns
'Fail' | 'AA' | 'AAA':"Fail"(Ratio < 4.5)"AA"(Ratio ≥ 4.5)"AAA"(Ratio ≥ 7)
Example
playground.ts
isLightColor()
Checks if the color's perceived brightness exceeds a given threshold, indicating a light color.
Signature
isLightColor(threshold?: number): booleanParameters
| Parameter | Type | Description |
|---|---|---|
threshold | number (optional) | Perceived brightness cutoff value (0–255). Defaults to 127.5. Values outside the range are clamped. |
Returns
boolean:trueif perceived brightness exceeds the threshold; otherwisefalse.
Example
playground.ts
Last updated: Mon, Jun 15, 2026 09:49:35PM (UTC)