Color & design

Check Color Contrast in a Real Web Component

Measure text against its actual background, interpret the checker’s result, and recheck opacity, interaction states, and responsive layout changes.

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

Identify the text and the surface directly behind it

To check a solid text color, compare it with the background actually painted behind the letters. Start with a concrete component: a paragraph, button label, form hint or navigation link. A page can contain many different foreground and background pairs, so checking the main brand color against white does not review every component that uses that brand.

Inspect the element’s computed color and the layers behind it in browser developer tools. An element with a transparent background can inherit the visible surface from an ancestor without inheriting that ancestor’s background-color property. Follow the painted layers until you identify the real surface. Record the component, state and colors so the result can be repeated after a design change.

Set the two opaque colors in the checker

Open the Color Contrast Checker and set its Text color and Background controls. Its current input contract is a six-digit hexadecimal color for each control, such as #777777 and #ffffff. These inputs represent opaque sRGB colors. The result updates with a contrast ratio and separate normal-text and large-text AA/AAA indicators.

For #777777 on white, the displayed ratio is about 4.48:1. The normal-text AA indicator fails, while the large-text AA indicator passes. Change the text to #767676 with the same white background: the ratio becomes about 4.54:1 and normal-text AA passes. These adjacent gray values make a useful boundary check that the selected colors and result actually changed.

Choose the result row from the real typography

Under WCAG’s minimum text-contrast criterion, ordinary text needs at least 4.5:1, while qualifying large text needs at least 3:1. Large text is at least 18 points, or 14 points when bold, corresponding to 24 CSS pixels or approximately 18.67 CSS pixels. A heading element is not automatically large merely because it uses an h1 or h2 tag.

The checker does not read your page’s font size or weight. Its preview is only a preview, so choose the applicable row from the actual component. If a responsive style makes a heading smaller on a phone, that version can require the ordinary-text threshold even when the desktop heading qualifies as large. Avoid solving a failing paragraph by assuming every user will zoom it.

Resolve transparency before entering a color pair

A declaration such as rgb(0 0 0 / 50%) does not describe one opaque displayed color independently of its background. For a simple black overlay at fifty-percent alpha over white, the visible channel values are around the middle of the gray range, not solid black. Comparing #000000 with white would overstate the actual contrast.

The tool does not accept an alpha channel or inspect a page’s stacking layers. Determine the composed colors first, or use a page-aware workflow that accounts for those layers. Applying opacity to an entire parent also affects its text and descendants. A child’s computed color alone can therefore be insufficient to describe the final visible foreground.

Check each state that changes the pair

Repeat the check for hover, keyboard focus, selected items, validation messages, expanded menus and any dark theme. A button can pass in its default state and fail when its background becomes lighter on hover. Placeholder text and helper text are still readable information; pale styling does not automatically make them decorative.

For a photo or gradient background, one pair is not enough when different pixels appear behind different letters. Review the weakest relevant area across the text’s possible positions. Cropping an image on a narrow screen can change that area. A predictable opaque text panel is often easier to maintain than a label whose readability depends on a particular image crop.

Record the result and its practical limits

Save the foreground, background, typography classification, component state and threshold with the result. The Copy control copies the tool’s analysis, but it does not add evidence about the page layout you inspected. Keep that context in the review record rather than treating a copied pass label as a complete accessibility report.

Contrast is one part of accessibility. Keyboard operation, text resizing, labels and non-color state cues require their own review. Thin fonts can also look faint even with a formally passing pair, so inspect the final component visually and leave useful contrast headroom. See the W3C text-contrast guidance for the criterion and its exceptions.