To check colour contrast in Figma, calculate the ratio between your text color and background color, aiming for at least 4.5:1 for standard text and 3:1 for large text. You can verify these ratios using a contrast checker or formula, then apply the verified hex codes directly into your Figma styles to ensure accessibility compliance before publishing.
Why Visual Inspection Is Not Enough
Designers often rely on visual intuition to judge readability, assuming that dark text on a light background is always accessible. This approach frequently fails because human eyes compensate for low contrast by squinting or shifting focus, masking the actual deficiency. A color pair that looks crisp on a high-brightness monitor may appear muddy or illegible on lower-quality screens or for users with mild visual impairments.
Relying on subjective judgment leads to inconsistent results across different design systems. One designer might accept a 3.8:1 ratio as sufficient, while another insists on 4.5:1, creating fragmentation in component libraries. Furthermore, manual checks do not account for the specific requirements of different text sizes. Large headings have more leeway than small body text, a nuance that is easy to overlook when eyeballing a layout.
Systematic verification removes this ambiguity. By calculating the exact contrast ratio, you establish a baseline that applies uniformly across all components. This ensures that every text element, from a tiny caption to a large hero heading, meets the necessary accessibility standards without requiring subjective interpretation from each team member.
Calculating Contrast Ratios Manually
The Web Content Accessibility Guidelines (WCAG) define contrast ratio based on the relative luminance of two colors. The formula is:
$$ \text{Contrast Ratio} = \frac{L_1 + 0.05}{L_2 + 0.05} $$
Where $L_1$ is the relative luminance of the lighter color and $L_2$ is the relative luminance of the darker color. Relative luminance is calculated by converting sRGB values to linear RGB and applying weighted sums. While you can do this manually, it is tedious and prone to arithmetic errors.
Most designers prefer using a dedicated checker. These tools instantly calculate the ratio and provide pass/fail verdicts against AA and AAA standards. When choosing a tool, look for one that handles both standard text and large text thresholds automatically. This saves time when auditing a full design system where font sizes vary significantly.
Building an Accessible Palette from a Base Color
Start with your primary brand color. For this example, we will use a deep indigo blue, #4F46E5. This color is common in modern interfaces but can be tricky to balance against white backgrounds due to its mid-tone luminance.
Input this hex code into a color tool like ColorWell. The tool analyzes the hue, saturation, and lightness in the Oklch color space, which prevents hue drift when adjusting brightness. Unlike traditional HSL adjustments that can shift the hue slightly as you lighten or darken, Oklch maintains the perceived color identity more accurately.
Generate a harmonized palette based on this base color. Focus on the monochromatic scale, as these colors share the same hue but vary in lightness, making them ideal for text hierarchy. Assign semantic names to these shades, such as indigo-500 for the base and indigo-600 for a slightly darker variation. These named tokens help maintain readability in your stylesheet and design files, replacing cryptic hex codes with meaningful labels.
Verifying Contrast Against White Backgrounds
Once your palette is generated, evaluate the contrast between your text colors and your background color. Assume your background is pure white (#FFFFFF). You need to check two common scenarios: body text and large headings.
Here are the verified contrast ratios for our indigo palette against white:
| Token Name | Hex Code | Contrast Ratio vs White | WCAG AA (Normal Text) | WCAG AA (Large Text) |
|---|---|---|---|---|
| indigo-500 | #4F46E5 | ~6.3:1 | Pass | Pass |
| indigo-600 | #4338CA | ~7.5:1 | Pass | Pass |
The base color, indigo-500 (#4F46E5), achieves a contrast ratio of approximately 6.3 against white. This comfortably passes the requirement for large text (typically 18pt or larger) and also meets the stricter requirement for normal body text, which demands a ratio of at least 4.5. If you use this color for small captions or dense paragraphs, it remains legible for most users.
The darker variation, indigo-600 (#4338CA), achieves a ratio of approximately 7.5 against white. This passes both AA standards for normal text and large text. It is also robust enough to meet AAA standards for large text. This demonstrates why relying solely on the base brand color is risky; it may not be versatile enough for all text sizes, especially if the background changes.
Exporting Verified Tokens to Figma
With the correct tokens identified, you need to bring them into your design environment. You can export these verified colors directly as Figma-ready styles. This eliminates the manual step of copying hex codes and pasting them into the color picker one by one.
Select the tokens you wish to export. In this case, choose indigo-500 for headings and indigo-600 for body text. Generate the style block. The output is formatted specifically for Figma’s import functionality, ensuring that the names and values are preserved correctly.
Here is what the exported JSON structure looks like when copied to your clipboard:
{
"styles": [
{
"name": "Text/Heading",
"value": "#4F46E5",
"description": "Primary brand color for large headings and buttons."
},
{
"name": "Text/Body",
"value": "#4338CA",
"description": "Darker variant for body text to ensure AA compliance."
}
]
}Paste this JSON into the Figma plugin field or use the direct import option if available. If you are managing styles manually, the named tokens ensure consistency. Instead of seeing #4F46E5 in your style panel, you see Text/Heading, which clarifies its intended use case.
Maintaining Consistency Across Components
Importing styles is only the first step. You must apply these tokens consistently across your component library. Use indigo-600 for all body copy, labels, and input placeholders to guarantee readability. Reserve indigo-500 for larger headings, button backgrounds, or accent elements where the larger font size compensates for the slightly lower contrast ratio.
When creating new components, check the contrast against their specific background contexts. A white background is standard, but if you place text on a light gray background (#F9FAFB), the contrast ratio changes. You may need to adjust the text color to maintain compliance. Recalculate these ratios instantly when you change the background color, allowing you to test edge cases quickly.
Regularly audit your library by filtering components by text size. Ensure that every small-text element uses the higher-contrast token. This systematic approach prevents the common issue where a designer updates a heading color but forgets to update the corresponding body text color, leading to inconsistent accessibility levels.
By verifying contrast before importing styles, you embed accessibility into the foundation of your design system rather than treating it as a final checklist item. This workflow saves time during handoff to developers, as the exported tokens already meet compliance standards.