# How to check accessible CTA colors inside Claude Code [Open the live Fudge conversation](https://design.withfudge.com/share/check-accessible-cta-colors-inside-claude-code) Last updated: 2026-08-25 To check accessible CTA colors inside Claude Code, inspect every call-to-action state separately, compare its text and background contrast, and verify that hover, pressed, focus, disabled, and visited contexts remain clear. A green palette can look consistent while still failing for small text or becoming unclear when a state changes. ## Use a CTA state checklist Review every important action in at least these states: - Default button - Hover or pressed button - Keyboard focus - Disabled or unavailable button - Secondary button beside the primary action - Link-style CTA on the page background - Error or success action where color carries meaning For each state, record the background color, text color, border color, icon color, and whether the state also changes through shape, underline, weight, or position. Do not rely on color alone to communicate focus, selection, success, or failure. A visible outline, underline, label, or icon gives visitors another cue. The examples below include captured cards for Notion Developer Platform, Claude Code, and Exa MCP Server, plus a green color set ranging from dark tones such as `#15502e` and `#14532d` to lighter tones such as `#2a966f` and `#799c92`. These are observed reference colors, not a claim that every one is a CTA color or that they meet a particular contrast target. Use them as candidates, then test the exact foreground and background pair in the component you plan to ship. ## Captured pages [![Notion Developer Platform](https://pin.fontofweb.com/9283?format=jpg)](https://design.withfudge.com/share/pin-9283) [Notion Developer Platform](https://design.withfudge.com/share/pin-9283) [![Claude Code](https://pin.fontofweb.com/1446?format=jpg)](https://design.withfudge.com/share/pin-1446) [Claude Code](https://design.withfudge.com/share/pin-1446) [![Exa MCP Server](https://pin.fontofweb.com/6429?format=jpg)](https://design.withfudge.com/share/pin-6429) [Exa MCP Server](https://design.withfudge.com/share/pin-6429) ## Colors - `#496c10` - `#15502e` - `#14532d` - `#233f2a` - `#254f1a` - `#1e6f30` - `#295631` - `#556659` - `#4a5a4a` - `#2c7a4a` - `#2a966f` - `#799c92` ## Test contrast by role Start with the primary CTA because it carries the clearest action. Test the actual button label against the actual button fill, not a nearby swatch. Under WCAG 2.2 AA, normal text generally needs at least a 4.5:1 contrast ratio, while large text generally needs at least 3:1. Do not use the large-text threshold for a small label merely because the button is visually prominent. Test icons, helper text, and small labels separately. Test the page background as well. A green button may work on white but lose definition on a tinted panel. If the CTA uses a border, measure the border against the surrounding background and check whether the component remains visible when the fill is removed. For focus indicators, check that the outline is clearly visible against adjacent colors and is not hidden by clipping or an overlay. Use this decision order: 1. Does the label meet the appropriate text contrast target? 2. Does the button have a clear edge against the page background? 3. Is keyboard focus visible without depending on hue alone? 4. Can visitors distinguish primary and secondary actions without guessing? 5. Do hover and pressed states remain readable and visibly different? If a pair fails, try changing the text color or darkening or lightening the fill before changing the entire palette. Preserve the brand hue where possible, but prioritize readable action labels. ## Compare green palettes by job Group colors by role instead of appearance. Deep greens can serve as primary fills or text on light surfaces. Mid greens may work for secondary accents, illustrations, or larger labels. Muted gray-green colors can support borders and secondary text, but they need careful testing at small sizes. Create a compact token list such as: - `cta-primary-bg` - `cta-primary-text` - `cta-primary-hover` - `cta-focus-ring` - `cta-secondary-border` - `cta-disabled-text` Assign each token a tested pair and a state rule. Do not assume that making a green lighter automatically creates a better hover state. The change must remain visible, preserve readable text, and make sense for keyboard and pointer users. Disabled states still need to be understandable, even when their contrast treatment is intentionally subdued. ## Review the result inside the code workflow Ask Claude Code to list every CTA selector or component variant, then check the rendered page rather than trusting source values alone. A token may be overridden by a component style, a theme, or a disabled rule. Review light and dark surfaces if the product supports both. Keep a short record of the page, component, state, color pair, contrast result, and required fix. If the page uses a captured reference, separate "observed in reference" from "approved for our interface." A reference palette can guide exploration, but it is not evidence that the original implementation is accessible in every context. Before shipping, view the page at reduced brightness, keyboard-tab through every action, and ask someone unfamiliar with the implementation to identify the primary next step. If the action is hard to find or its focus state disappears, adjust the component and test again. ## Use this in your AI agent > Review the CTA colors in the website or codebase I provide. Find every primary, secondary, link-style, disabled, hover, pressed, and focus state. For each state, report the exact foreground, background, border, icon, and focus-ring colors, then compare the relevant pairs against the appropriate WCAG text and focus requirements. Flag cases where color is the only state cue, distinguish observed reference colors from approved values, and return a token table with specific fixes that preserve the existing green direction where practical. Include a manual keyboard and rendered-page checklist. [Install Fudge for your AI agent](/mcp) to compare captured page references while reviewing the colors used by your own CTAs. --- Start with the job, not the swatch. Test the darkest candidate as a button fill with your intended label color, then place that button on the actual page background. The captured set includes deep greens such as `#15502e`, `#14532d`, and `#233f2a`, along with lighter greens such as `#2a966f` and `#799c92`. Use those as candidates for comparison, not as pre-approved tokens. Keep the primary fill stable and create hover and pressed states through a controlled change in lightness, border, or shadow. Check that the state difference is visible to someone using a keyboard or a low-brightness screen. If a lighter green needs white text to remain readable, it may be better suited to a large accent, illustration, or secondary surface. Once a pair passes, name it by role and test it in every theme and component size. A color that works on one hero section may fail inside a card or tinted panel. --- Ask it to trace each CTA from its component definition to the rendered class or style, including theme overrides and disabled rules. Have it return a table with the component name, selector or token, state, foreground, background, border, focus treatment, and the page surfaces where the CTA appears. Then ask for a second pass focused on behavior: keyboard focus, hover and pressed transitions, disabled affordances, and whether text or icons remain readable when the button changes size. Source inspection should be paired with a rendered-page check because inherited styles and overrides can change the final result. Finish by asking for a small patch plan rather than an automatic rewrite. It should identify which token or component rule needs changing, preserve the green palette where possible, and list the manual checks you must run before merging. ## Related questions - [Check a Dark Mode Color Palette in Claude Code](/share/check-dark-mode-color-palette-inside-claude-code) - [Analyze a Website Gradient Palette](/share/analyze-website-gradient-palette-on-a-live-website) - [Check Text and Background Contrast in Claude Code](/share/check-text-and-background-contrast-inside-claude-code) - [Analyze Website Color Roles on a Live Website](/share/analyze-website-color-roles-on-a-live-website)