Color & design

Use a Contrast Ratio Tool for a Specific Color Pair

Enter two opaque hex colors, read normal and large text results, copy the analysis, and understand what a pair-only contrast tool cannot inspect.

By Uddhav Gopani, FounderPublished 27 September 2026Updated 29 September 2026

Use the tool for a defined foreground and background

The local contrast ratio tool answers one narrow question: what is the WCAG relative-luminance contrast ratio between two opaque sRGB colors? It also compares that result with normal- and large-text AA/AAA thresholds. It does not inspect a web address, extract a palette from an image or decide whether an entire page is accessible. Begin with the exact pair you intend to compare.

A useful input record includes the component name, its state and the source of the color values. For example, “button label on default fill” is more precise than “brand blue.” The same blue might appear as text, a background, a focus ring and a decorative illustration, each with a different adjacent color and applicable requirement.

Set both color controls and inspect the preview

Open the Color Contrast Checker. Set Text color to #ffffff and Background to #1d4ed8. The displayed ratio should be about 6.70:1. The normal-text AA result passes, while the normal-text AAA result fails because that enhanced threshold is seven. The preview helps confirm which selected color is being used for text and which for the surface.

Now change the background to #1e40af. The ratio should rise to about 8.72:1, and normal-text AAA should pass as well. These two inputs demonstrate why a darker shade can change the classification even when the label color stays white. The controls use six-digit hex values; shorthand, named colors and alpha-bearing strings are outside this tool’s direct input contract.

Read the appropriate classification row

The normal-text row applies to ordinary-sized text. The large-text row uses different thresholds for typography meeting WCAG’s large-scale definition. The preview’s appearance does not establish the size of text in your actual page. Inspect the implemented font size and weight, including responsive changes, before deciding which row is applicable to the component.

For AA text, the minimum ratio is 4.5:1 for ordinary text or 3:1 for qualifying large text. For enhanced AAA text, the corresponding ratios are 7:1 and 4.5:1. A tool showing all four labels is offering alternatives for interpretation, not four independent certificates about your page. Choose the target level and typography context explicitly.

Keep display precision separate from pass decisions

The local result rounds its ratio for display but evaluates the original numerical value against the thresholds. A pair slightly below 4.5 does not pass merely because a shorter display rounds it upward. When a design sits close to a boundary, retain the original colors and consult the pass indicator instead of manually comparing an aggressively rounded number.

Swapping foreground and background leaves the mathematical ratio unchanged. It can still change the visual role and perception of the component, so keep the roles recorded correctly. A contrast ratio is dimensionless: it is not a percentage difference, an RGB distance or a measurement of how many colors a person can distinguish.

Copy the analysis with the missing context attached

Use Copy to put the current analysis on the clipboard, subject to the browser’s clipboard permission and availability. If copying fails, the result remains visible for manual selection. Add the actual color values, component state, typography and criterion to your review record. The copied text does not contain a screenshot or independently prove that those colors are the ones used in a deployed component.

When reviewing a small palette, create a list of permitted foreground/background combinations instead of assuming every swatch can be placed on every other swatch. Test only relationships that exist or are allowed in the design, and label decorative combinations separately. This turns a set of isolated measurements into useful component guidance.

Resolve complex backgrounds outside the pair calculator

Transparency, gradients, photographs and blending can produce several visible colors behind a single text element. The tool has no layer compositor or page scanner, so resolve those contexts before entering a representative pair. If you cannot establish one fixed surface, inspect the least favorable relevant region or change the component to use a predictable background.

The WCAG contrast-ratio definition explains the numerical measure, and enhanced text-contrast guidance explains AAA thresholds. A passing color pair remains only one part of a broader review that also covers controls, labels, keyboard access and information that would otherwise be conveyed by color alone.