Accessibility Contrast and Compliance Checking in Figma with Stark

Open Figma and search the plugin directory for Stark, then add it to your account. Once installed, it's available from the plugins menu inside any file.

What you should see: Stark listed under your installed plugins, accessible by right-clicking anywhere in a Figma file and looking under the plugins submenu.

With the client's design file open, launch Stark from the plugins menu. A panel opens alongside your canvas.

What you should see: A side panel with several tool options, including a contrast checker among Stark's accessibility features.

Click on a text layer (body copy, a button label, a heading) directly on your canvas, or select a colored shape you want to check against its background.

What you should see: Stark automatically detects likely foreground and background colors for the selected layer and displays a contrast ratio.

Troubleshooting: If Stark picks the wrong background color (common on layered designs with multiple overlapping elements), use the dropdown in the contrast panel to manually choose the correct color from your file's local styles instead.

Stark shows the calculated contrast ratio alongside WCAG AA and AAA thresholds, so you can see immediately whether a given text and background combination passes, and at which standard.

What you should see: A clear pass or fail indicator per WCAG level, plus the actual ratio number.

When something fails, Stark offers adjusted color suggestions that would bring the combination into compliance while staying visually close to the original.

1. Review the suggested alternative colors.
2. Apply one directly if it still fits the client's brand, or use it as a starting point to hand-pick a compliant shade that better matches their palette.

What you should see: An updated contrast ratio reflecting the new color choice, now showing a pass.

Run this check across every distinct page template in the project (homepage, service page, contact form, blog post layout), not just the one you happened to open first. Contrast issues often hide in secondary elements: footer text, form field labels, disabled button states, and hover states that never get checked as carefully as headline text.

What you should see: A short list of flagged issues across the full set of templates, ready to fix before handoff to development.

Stark's contrast checker can't directly evaluate text sitting on a gradient background, since it needs a single solid color to compare against. For any text over a gradient, add a temporary solid rectangle sampling the darkest or most contrast-critical part of that gradient, and check contrast against that instead. Remove the temporary rectangle once you've confirmed the check.

Once you've worked through the file, compile the list of anything you couldn't fully resolve at the design stage (colors the client insisted on keeping despite a borderline contrast ratio, for example) into a short note for whoever builds the site, even if that's you. If you want a second pass on the writeup, paste your list of flagged issues into claude.ai and ask it to organize them by page and severity so nothing gets missed during the build.

What you should see: A clean, organized list ready to reference during development, instead of scattered comments across the Figma file.