How to check website color contrast

1. Choose the right requirement

WCAG 2.2 Level AA uses different contrast requirements for text and the visual information needed to identify controls. Start by identifying what you are measuring.

The large-text boundary comes from 18 point regular or 14 point bold text. A heading element does not automatically count as large text. Use its rendered size and weight. Do not round a result up to pass: 4.49:1 is below 4.5:1. The W3C text contrast explanation also describes exceptions, including inactive controls and logotypes.

A button label is still text. A boundary or icon needed to identify a control has a separate check under Non-text Contrast. A decorative border does not automatically need 3:1. First establish which visual information makes the component understandable.

2. Measure the actual color pair

1. Open the component at the viewport you are reviewing. Use browser developer tools to inspect its computed text color, font size, weight, and background.
2. Follow transparent backgrounds up through their containers. If opacity is involved, measure the composited colors rather than treating the unblended color values as the final pair.
3. Enter the foreground and background values into a contrast checker that reports the WCAG contrast ratio. Record both values and the unrounded result used for the decision.
4. Repeat where the background changes. For text over a photo or gradient, check the least favorable area behind the text. A solid text panel is often easier to maintain than relying on a particular image crop.

Keep screenshots to show location and state, but use computed colors to evaluate ordinary CSS text. Sampling a softened edge of a letter can measure anti-aliasing rather than the intended foreground. For image backgrounds, document the actual crop and the sampling method so someone else can repeat your check.

3. Fix the source of the color

If several labels inherit the same low-contrast color, find the shared style before making individual overrides. Identify where that token is used: body text, hints, badges, or links. A change that helps one pairing can affect another surface.

.review-note {
  color: #0a2540;
  background-color: #ffffff;
  padding: 1rem;
}

.review-note a {
  color: #0647ce;
  text-decoration: underline;
}

.review-note a:focus-visible {
  outline: 2px solid #0647ce;
  outline-offset: 3px;
}

This example uses dark text on white and an underlined blue link. Check it again in your application, where other rules may override these declarations. Preserve an explicit link cue and focus indicator when changing a color. An improved contrast ratio alone does not make a link easy to identify.

Choose a pair with some margin above the threshold. If a brand color works as decoration but cannot support readable small text on the intended background, give text its own darker token and test all places that use it.

4. Repeat the check in each state

Write a small state inventory for the component before calling the change finished. For a form, include empty, filled, focused, validation error, and submission feedback. For navigation, include the current page, hover, keyboard focus, and an expanded submenu.

• Check hints and placeholder text, as well as entered values and labels.
• Check text after a hover or selection changes its background.
• Use the keyboard to inspect focus on each surrounding surface. Confirm the indicator remains visible instead of being clipped by a container.
• Check responsive layouts that move text onto a different background or resize a heading.

Focus Visible requires a visible keyboard focus indicator. Testing the indicator in use matters as well as calculating colors. Write down any state you could not open; do not treat it as passed.

5. Read automated results carefully

Automated contrast rules can evaluate many rendered text pairs. Coverage depends on what the scanner reaches and what the rule can determine. Deque documents limitations for its color-contrast rule, including background images, obscured text, and images of text. Some cases require manual review.

A clean scan is not evidence that every hover, dialog, image crop, or validation state was measured. Use WebAccez findings to prioritize components, then keep the manual state inventory alongside the report. After a fix, repeat the scan on the affected pages and revisit the states you opened manually.

6. Leave a reproducible check record

Keep one row per color pair and state in your issue tracker or review notes. Record: page URL, component, viewport, state, foreground, background, font size and weight, threshold, measured ratio, tool, and decision. Add the date and reviewer when the measurement is actually made.

For example, a record for “Contact form, email hint, focused field” is more useful than “Contrast fixed.” It tells the next reviewer where to look without inventing a measurement. Leave the ratio blank until measured and mark blocked checks as untested.

If you update a shared token, list representative uses on white, tinted, and selected surfaces. Ask the reviewer to check those uses after the change. That gives the fix a practical boundary and helps prevent the same problem from returning when the component is reused.