ContrastChecker - WCAG AA/AAA Contrast Checker

About this plugin

ContrastChecker checks WCAG AA and AAA contrast for selected text and visual layers in Figma by analysing the background they visually sit on.Unlike contrast tools that require you to manually choose foreground and background colours, ContrastChecker automatically finds the visible layer beneath your selection. It can work across frames, groups and nested structures, continuing through transparent containers until it finds the background that is actually contributing visually.For solid backgrounds, ContrastChecker returns a direct contrast ratio and AA/AAA pass or fail result.For gradients, images and other multi-colour backgrounds, ContrastChecker samples the area directly beneath the selected target and shows how much of that background passes or fails. Open the diagnostics to see the individual sampled colours, their contrast ratios and where problem areas occur.ContrastChecker can also suggest and apply the closest accessible colour adjustment while keeping the original design as visually unchanged as possible.What it helps with• Checking WCAG AA and AAA contrast directly inside Figma• Automatically identifying the visual background beneath a selected layer• Testing text, fills, vectors and other visual assets• Checking contrast across solid colours, gradients and imagery• Understanding which areas of a multi-colour background are causing contrast failures• Reviewing sampled background colours and individual contrast ratios• Fixing foreground colours while preserving the original visual character• Fixing solid and supported gradient backgrounds with the smallest required colour adjustment• Checking multiple selected layers without manually pairing foreground and background colours• Reducing manual colour sampling and contrast calculationsBackground detectionContrastChecker analyses what the selected target visually sits on rather than relying only on its immediate parent.Transparent frames and containers are passed through until a visible background is found.This means the target and background do not need to be grouped together or structured in a particular way. If two layers visually overlap on the canvas, ContrastChecker can use that relationship when evaluating contrast.Solid backgroundsFor a solid background, ContrastChecker displays:• Contrast ratio• AA pass or fail• AAA pass or fail• Closest available foreground fix• Closest available background fix where supportedFixes are designed to reach the selected accessibility threshold with the smallest possible perceptual change rather than replacing the design with a completely different colour.Gradients and multi-colour backgroundsFor gradients and other multi-colour backgrounds, ContrastChecker samples colours from the part of the background that actually sits beneath the target.Results show the percentage of sampled colours that pass AA and AAA.Open Background Diagnostics to review the sampled colours spatially and identify which areas are failing.Supported gradients can also be adjusted while preserving their gradient type, direction, stop positions and overall colour relationship.Image backgroundsFor imagery, ContrastChecker samples the actual region of the image beneath the selected layer and tests the target against those colours.Image backgrounds remain unchanged. ContrastChecker instead attempts to find the closest target colour that can pass against the sampled image area.If the variation within the image is too large for a single foreground colour to meet the selected accessibility level, ContrastChecker will let you know rather than applying an unreliable fix.Auto-fixContrastChecker prioritises minimal visual change.When fixing a colour it attempts to:• Preserve the existing hue• Preserve the existing chroma• Adjust lightness only where possible• Stop at the first colour that meets the selected AA or AAA threshold• Preserve gradient structure where gradients are supportedThe aim is accessibility without unnecessarily changing the design.Best used forDigital interfaces, websites, apps, campaign artwork, social creative, display advertising, presentations, design systems, components, buttons, navigation, typography, icons and other visual assets that need accessible colour contrast.WorkflowSelect a layer in Figma.ContrastChecker automatically identifies the visual background beneath it and displays the relevant AA and AAA results.For multi-colour backgrounds, open Background Diagnostics to inspect the sampled colours and identify problem areas.Where a safe correction is available, choose AA or AAA and use Fix target or Fix background. ContrastChecker recalculates the relationship after every change so you can continue refining the same selection without restarting the plugin.Important noteContrastChecker is designed to assist with WCAG contrast checking, not replace a complete accessibility review.Results for gradients and imagery are based on colours sampled from the visual area beneath the selected target. Highly varied imagery may not have a single foreground colour capable of meeting the required contrast across the entire area.Image backgrounds are analysed but are not automatically modified.Some Figma styles, variables, effects, blend modes or complex visual relationships may prevent a safe automatic edit. ContrastChecker will avoid making a destructive change when it cannot confidently apply one.