Color Contrast
A component for displaying accessibility contrast test results, either standalone or integrated with ColorSwatch.
Overview
ColorContrast is a primitive building block used to display testing and compliance metrics, automatically computing relative luminance and contrast via a WCAG 2.0 formula, or allowing calculated overrides.
Because it hooks into ColorSwatchContext, it is able to calculate contrast against any active ColorSwatch ancestor.
Installation
npx shadcn@latest add @tokenui/color-contrast
Usage
You can use the native WCAG checking capabilities inline inside a swatch:
Independent Usage
If you are using `ColorContrast` outside of a swatch, simply supply both the `base` and `against` color props to invoke the automatic calculation logic independently:
Overriding Logic (e.g., APCA or external APIs)
If you are using different calculation logic or simply want to display external APCA compliance metrics, simply pass fixed values. It immediately bypasses internal WCAG calculations:
API Reference
ColorContrast
Root container driving calculations and resolving swatch parent data via Context.
Prop
Type
ColorContrastRatio
Automatically grabs the calculated context `ratio`.
Prop
Type
ColorContrastBadge
Pill or Icon visually dictating success status.
Prop
Type