# Extract Text and Background Contrast from a URL

[Open the live Fudge conversation](https://design.withfudge.com/share/extract-text-and-background-contrast-from-a-url)

Last updated: 2026-08-25

The fastest way to extract text and background contrast from a URL is to list each important text color with its background, calculate the contrast ratio, and then check the result against the text size and purpose. Do not judge contrast from a color palette alone, because the same color can pass on one background and fail on another.

## Use a repeatable contrast check

Start with the page areas visitors actually use:

1. Main body text on the page background.
2. Large headings on their background.
3. Navigation and footer links.
4. Button labels and button backgrounds.
5. Form labels, placeholders, and error messages.
6. Text placed over images, gradients, or colored panels.
7. Focus, hover, and disabled states when they change the text color.

For each pair, record the foreground color, background color, approximate text size, font weight, and where it appears. Then calculate the relative luminance of both colors and divide the lighter value plus 0.05 by the darker value plus 0.05. This gives the contrast ratio. A practical target is at least 4.5:1 for ordinary text and 3:1 for large text. Treat links, labels, and button text as meaningful content even when they are not part of a paragraph.

Open the examples below and compare the first screen before borrowing a pattern. The captured color set is a useful muted-green direction, with deep tones such as `#15502e`, `#14532d`, and `#233f2a`, plus lighter supporting colors such as `#799c92`. Those colors may work well together, but each text-background pairing still needs its own check.

## Captured pages

[![Pangram AI Detector](https://pin.fontofweb.com/9687?format=jpg)](https://design.withfudge.com/share/pin-9687)

[Pangram AI Detector](https://design.withfudge.com/share/pin-9687)

## Colors

- `#496c10`
- `#15502e`
- `#14532d`
- `#233f2a`
- `#254f1a`
- `#1e6f30`
- `#295631`
- `#556659`
- `#4a5a4a`
- `#2c7a4a`
- `#2a966f`
- `#799c92`

## Extract colors by role, not just by frequency

A useful result should say what each color does. Separate the findings into roles such as:

- Page background
- Main text
- Secondary text
- Link text
- Primary button
- Button text
- Borders and dividers
- Cards or panels
- Status messages
- Text over imagery

A color used often is not automatically the right color for text. Large background areas can dominate the palette while a small but important button label has a different accessibility risk. Save the raw hex value alongside the role and the exact background it sits on.

For example, a report might say: `#233f2a` used as body text on `#ffffff`, `#799c92` used as a decorative panel color, and `#ffffff` used on a dark green button. That is more useful than a list of twelve colors without context.

## Check text that is easy to miss

Placeholder text, muted metadata, navigation labels, footer links, and text over photos are common failure points. Check whether a background changes across responsive states. A heading that passes on desktop may sit over a different image crop on mobile. Gradients also need attention because contrast can change from one side of the text to the other.

Do not treat a contrast ratio as the entire accessibility review. Also check that links have a recognizable treatment, focus states remain visible, text can be enlarged without being cut off, and important information is not communicated by color alone. Contrast is one measurable part of a wider page review.

## Turn the result into a fix list

Rank findings by visitor impact:

1. Body copy and primary actions.
2. Navigation, forms, and error messages.
3. Headings and supporting text.
4. Decorative or low-priority labels.

For each failed pair, choose the smallest change that preserves the visual direction: darken the text, lighten the background, reduce background variation, add a solid overlay behind text, or move the text to a stable surface. Recheck the full component after the change, including hover and focus states.

A useful handoff has five columns: location, foreground, background, contrast ratio, and recommended fix. Add a sixth column for the state, such as default, hover, focus, or mobile. This makes the result easy to review with a designer or developer and prevents a passing desktop example from hiding a failing alternate state.

## Use this in your AI agent

> Check the supplied website capture for text and background color pairings. Group colors by role, identify the exact foreground and background for body text, headings, links, buttons, forms, muted labels, and text over images, then calculate or report the contrast status for each pair. Separate clear observations from items that need manual verification, and finish with a prioritized fix list that preserves the site's visual direction.

[Install Fudge for your AI agent](/mcp) to review captured pages and compare observed color use with the checklist above.

---

Check the complete component state rather than only its default screenshot. For buttons, compare the label against the button fill in default, hover, focus, disabled, and loading states. If the button uses a gradient, sample the label against the lightest and darkest parts behind it. Also check the button against the surrounding page so its boundary remains clear.

For links, test the link color against its immediate background and confirm that the link is identifiable without color alone. An underline or another visible treatment helps, especially in body copy. For text over images, use the actual crop and responsive versions. If contrast changes across the image, add a solid or semi-transparent overlay, place the text on a stable panel, or adjust the image treatment. Recheck the result after resizing the text, changing the crop, and entering keyboard focus.

---

Use one row for every important pairing:

| Location | Text color | Background | Size/state | Ratio or result | Action |
|---|---|---|---|---|---|
| Body copy | hex | hex | normal/default | pass or fail | keep or adjust |
| Primary button | hex | hex | label/default | pass or fail | keep or adjust |
| Navigation link | hex | hex | normal/hover/focus | pass or fail | add treatment or adjust |
| Form label | hex | hex | normal/error | pass or fail | adjust text or surface |
| Image heading | hex | sampled image/overlay | large/mobile | pass or fail | add overlay or move text |

After filling it in, sort the rows by visitor impact. Fix body text, primary actions, forms, and navigation first. Keep the original colors in a separate column so a designer can compare the proposed change with the existing direction. Finish by checking the page at desktop and mobile widths, because a changed crop, panel, or background can alter the result.

## Related questions

- [Extract a Website Color Palette from a URL](/share/extract-website-color-palette-from-a-url)
- [Extract Accessible CTA Colors from a URL](/share/extract-accessible-cta-colors-from-a-url)
- [Check a Website Gradient Palette Inside Claude Code](/share/check-website-gradient-palette-inside-claude-code)
- [Inspect accessible CTA colors on a website](/share/tool-for-inspecting-accessible-cta-colors-on-a-website)