Does a passing result mean my interface is accessible?

No. It checks this opaque colour pair against the displayed text ratios. Font size, component state, non-text criteria and surrounding context still need review.

Can I use CSS variables or transparency?

No. This component accepts opaque six-digit sRGB hex values so it can calculate a deterministic ratio.

Input Contrast Checker

Compare opaque foreground and background colours against text contrast thresholds.

Editorial colour check

Foreground colour #172033Background colour #F8F5EF

Sample textThe quick brown fox jumps over the lazy dog.

Contrast ratio: 14.95:1

AA normal text (4.5:1)Pass
AA large text (3:1)Pass
AA non-text (3:1)Pass
AAA normal text (7:1)Pass
AAA large text (4.5:1)Pass

This local estimate covers opaque sRGB colours only. Check the complete interface and applicable WCAG criteria before release.

Customise

Section title

Foreground hex

Background hex

Code

<InputContrastChecker title="Editorial colour check" />

Input Contrast Checker previews a selected sRGB colour pair and reports its WCAG contrast ratio alongside AA and AAA text thresholds. It is a local design aid for a colour pair, not a certification or a scan of your page.

The native colour controls accept opaque six-digit hex colours. The ratio is available in the rendered HTML before JavaScript, and the component can be controlled by the consuming application.

Install

Add the @te registry to your components.json once:

{
  "registries": {
    "@te": "https://templateempire.io/r/{name}.json"
  }
}

Then install the component:

npx shadcn@latest add @te/input-contrast-checker

Usage

import { InputContrastChecker } from "@/components/input-contrast-checker";

export function BrandColourReview() {
  return <InputContrastChecker title="Brand text contrast" defaultValue={{ foreground: "#172033", background: "#F8F5EF" }} />;
}

Props

Prop	Type	Default	Description
title	string	required	Visible title and accessible name for this colour comparison.
value	ContrastColorPair	undefined	Controlled foreground and background values in #RRGGBB format.
defaultValue	ContrastColorPair	#111827 on #FFFFFF	Initial uncontrolled colour pair.
onValueChange	(pair) => void	undefined	Receives a complete pair after either native colour input changes.
className	string	undefined	Additional classes merged onto the section.

Customisation

Threshold rows state Pass or Fail in text and use semantic foreground tokens. The preview uses the selected colours directly; invalid values produce an error instead of a misleading ratio.

<InputContrastChecker title="Button label" defaultValue={{ foreground: "#172033", background: "#F8F5EF" }} />

Frequently asked questions

Does a passing result mean my interface is accessible?: No. It checks this opaque colour pair against the displayed text ratios. Font size, component state, non-text criteria and surrounding context still need review.
Can I use CSS variables or transparency?: No. This component accepts opaque six-digit sRGB hex values so it can calculate a deterministic ratio.

Related components

Build accessible formsExplore more form and input components for your React project.Form components