# Inspect accessible CTA colors on a website [Open the live Fudge conversation](https://design.withfudge.com/share/tool-for-inspecting-accessible-cta-colors-on-a-website) Last updated: 2026-08-25 The best tool for inspecting accessible CTA colors on a website should do two things together: identify the colors used on buttons and links, then show where those colors appear so you can check contrast in context. A color picker alone gives you a hex value, but it does not tell you whether that value is a primary CTA, a hover state, a text color, or a decorative accent. ## A practical way to inspect CTA colors Use this four-step review: 1. **List the visible actions.** Check the main button, secondary button, text links, navigation actions, form submission button, and any dark or light variants. 2. **Record foreground and background pairs.** For each CTA, note the text color, button fill, surrounding background, border, and hover or focus treatment. Contrast depends on the pair, not on one color by itself. 3. **Check the smallest important text first.** A compact button label or small link can be harder to read than a large heading using the same color. Test normal text separately from large display text. 4. **Review the page state.** Inspect the default, hover, focus, disabled, dark, and light versions when they are available. A CTA that looks clear in its default state may become difficult to see during interaction. The useful result is a role-based list such as: primary CTA fill, primary CTA text, secondary CTA border, link color, focus ring, and muted action. That list is easier to fix than a long collection of unlabelled color swatches. ## 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` ## What to compare before changing a color Start with the action's purpose. A primary CTA should be easy to find without competing with every other element on the screen. A secondary action can be quieter, but its label still needs to remain readable. A text link should be distinguishable from nearby body copy through color, underlining, weight, or another visible cue. Then compare repeated use. If the same green appears in a button, an illustration, a status label, and a footer link, changing it for CTA contrast may affect unrelated parts of the page. Separate the shared brand color from the specific action token before editing. If a button uses a gradient, shadow, image, or transparency, check the actual visible result rather than judging only the CSS color value. The examples below include a muted green direction with colors such as `#15502e`, `#14532d`, `#2c7a4a`, and `#799c92`. Treat these as references for comparison, not as a recommendation that every CTA should use green. Open the example and compare the first action, surrounding background, and text treatment before borrowing a pattern. ## A quick CTA review checklist - Can you identify the main action within a few seconds? - Is the label readable against the button fill at its normal size? - Does the hover state remain readable instead of simply becoming darker? - Is keyboard focus visible against both the component and the page background? - Are secondary buttons and text links still distinguishable when color vision is limited? - Does the same token produce a different result in dark mode or over an image? - Are disabled controls clearly inactive without looking like ordinary low-contrast text? - Does the CTA remain clear at mobile widths and in longer translated labels? If a color fails, first try changing the text or fill pair rather than increasing saturation everywhere. Preserve the brand hue when possible, then adjust lightness, add a border, add an underline, or strengthen focus styling. Recheck the complete component after each change. ## Use this in your AI agent > Inspect the saved website reference for CTA colors. Identify the primary and secondary buttons, text links, borders, and focus treatments. For each one, report the observed foreground and background colors, where they appear, and which pairs need a contrast review. Separate repeated brand colors from action-specific roles, and give practical ways to improve readability without changing the visual direction. > > [Install Fudge for your AI agent](/mcp) --- Group the shades by how they function, not only by how similar they look. Put button fills, button text, links, borders, focus rings, and muted labels into separate role groups. Then check each foreground and background pair in the state where visitors actually see it. For a family of green shades, for example, compare the darkest fills against light text, the lighter fills against dark text, and links against the page background. Do not assume that a darker brand shade works everywhere. A color that is strong enough for a large filled button may be too weak for small body-sized link text, while a pale tint may work as a background but fail as a text color. Also check whether the shade is shared with illustrations or status messages. If it is, create an action-specific token rather than changing every occurrence. Keep the hue family consistent, but adjust lightness and supporting details such as borders, underlines, and focus outlines. Review default, hover, focus, and disabled states separately so an improvement in one state does not create a new problem in another. --- Use a single page review sheet with one row per action. Record the action name, state, text color, fill color, surrounding background, border or focus treatment, and the recommended change. Include the page location so another designer can find the component quickly. Review in this order: primary CTA, form submit action, navigation links, secondary buttons, card actions, and footer links. Check desktop and mobile layouts, then repeat the most important actions in dark mode if the site supports it. Capture the component at its normal size rather than testing only enlarged screenshots. Before handoff, resolve repeated colors into clear roles such as `action-primary`, `action-primary-text`, `action-secondary`, and `focus-ring`. Mark any uncertain state for a live browser check. A useful handoff should let the developer see what changed, why it changed, and which states still need verification. Keep the original brand palette nearby so contrast fixes remain visually consistent instead of becoming a collection of unrelated colors. ## Related questions - [Inspect a website's dark mode color palette](/share/tool-for-inspecting-dark-mode-color-palette-on-a-website) - [Extract a Website Gradient Palette from a URL](/share/extract-website-gradient-palette-from-a-url) - [Inspect Text and Background Contrast on a Website](/share/tool-for-inspecting-text-and-background-contrast-on-a-website) - [Extract Website Color Roles from a URL](/share/extract-website-color-roles-from-a-url)