UI Component Contrast Checker

UI Component Contrast Checker measures the color of a component boundary against the surface behind it and judges the pairing at 3 to 1, the non-text contrast requirement.

What is UI Component Contrast Checker?

UI Component Contrast Checker measures a component's color against the surface it sits on and reports the ratio to two decimal places, judged against a fixed 3 to 1 gate. It exists because a boundary is not text. A button fill, an input outline or a checked checkbox has to be distinguishable from its surroundings, but none of them has to be readable as a glyph, so the requirement is different and the sample shown here has to be different too.

The requirement this page tests comes from the non-text contrast rule in WCAG 2.1, which asks for 3 to 1 across the pieces of interface that carry meaning:

• Component boundaries, meaning the fill, border or outline that makes a control recognisable as a control.
• State indicators, such as the track of a toggle or the border of a selected card.
• Graphical objects, including the lines and areas a chart uses to convey its data.
• The focus indicator around an interactive element, which is close enough in kind to share the same figure but has its own dedicated check.

The second panel draws a component sample rather than a paragraph: a filled button on the chosen background, with the label set in the background color over the component color. That reversal is deliberate, because it shows the pair from both directions at once. The ratio itself is the standard WCAG 2.x contrast calculation, with each color converted to sRGB, its channels linearised, and the three linear values weighted 0.2126 red, 0.7152 green and 0.0722 blue into a relative luminance, before the lighter plus 0.05 is divided by the darker plus 0.05.

What a single boundary check cannot cover is worth stating clearly.

• The label inside the component is a separate requirement. A button fill can pass at 3 to 1 while the text on it fails at 4.5 to 1, and this page will not tell you that.
• One pair is measured at a time. Hover, active, disabled and selected states are each their own pair and each needs its own check.
• The component has no size. A 1px hairline border and a large filled area are treated identically, though they read very differently.
• The page cannot know which pixels of your real component are load bearing, so it can only evaluate the colors you give it.
• No alpha, and no third surface behind the pair.

Use this check on button fills, input and textarea borders, checkbox and radio outlines, toggle tracks, tab indicators and any chart line or area that carries information. Pair it with the ordinary text check for the label sitting inside the component, and with the focus check for the ring that appears when the control is reached by keyboard.

The 3 to 1 component contrast requirement is easy to mistake for a soft target, because most brand fills clear it without help. Where it bites is at the edges of a design system: a hairline divider that carries grouping, a disabled state almost the same tone as the surface beneath it, or an outline that vanishes when the card it sits on changes color. Auditing the button contrast of every state rather than only the resting one is the cheapest way to catch those, since state colors are usually derived after the base fill has already been approved.

How to use UI Component Contrast Checker

1. Set the component or indicator color in the first field, which is labelled Indicator rather than Foreground.
2. Set the surface behind the component in the second field.
3. Read the ratio at the top of the second panel, to two decimal places.
4. Check the Pass or Fail line against the 3 to 1 threshold, then read the button sample to see the pair from both directions.

When to use UI Component Contrast Checker vs related tools

Use the UI component contrast checker for any boundary that has to be distinguishable rather than readable: button fills, input outlines, toggle tracks, tab indicators and informative chart strokes. Text inside those components belongs with the WCAG 2.1 AA checker, the ring that appears on keyboard focus belongs with the focus indicator contrast checker, and mixed palettes where several boundaries are in play are easier to audit with the palette accessibility checker.

Privacy & Security

This tool runs entirely in your browser — no data ever leaves your device. There is no server round-trip, no upload, no logging, and no account required. Your input is processed locally using client-side JavaScript and is never stored, transmitted, or accessible to anyone else. When you close the tab, everything disappears.

Frequently asked questions about UI Component Contrast Checker