Check color contrast with WCAG and APCA, and build hue ramps

Goal

Make sure text and background pairs from your palette are readable, and extend a color into a ramp of lighter and darker steps.

Before you start

• A color list in Color Extractly Classic.

Steps

1. Open the compare panel Click a color in the list. The panel shows Example Text in that color on another color, with a PAS score and its tier, from Poor to Exceptional.

   

2. Pick what to compare Under Active Colors, click + to add colors from your list. Click Swap to switch text and background, and change the font in Typography Settings to test real sizes.
3. Read the details Click the PAS badge. The sheet shows the WCAG ratio (4.5:1 or more is AA, 7:1 or more is AAA), APCA, and color-blindness robustness, plus badges such as APCA-Body-Text.

   

4. Fix the contrast Under Quick Adjust Text Color, click 3.0 Large, 4.5 AA or 7.0 AAA to change the text color just enough to reach that ratio, or Auto Max for black or white.
5. Save a hue ramp Under Generate Suggestions, set Hue steps and Contrast in the settings, then click Save Hue Ramp. The steps are added below the color as new entries.

Tips

• Changes you make to the base color in the panel are saved to the list automatically.
• Instant Design System in the ••• menu generates a full palette with brand, semantic and neutral ramps, but it replaces your current list. Click + in its bar to keep a snapshot first.

Result

Color pairs you know are readable, and ramps of related colors in your list.

If something goes wrong

• The details sheet says "WCAG Only". The full analysis could not run for this pair, so only the WCAG ratio is shown.

Related guides

• CLEAN & RENAME
  Clean up and rename a messy color palette Use Magic Clean to merge colors that are the same or nearly the same, then Rename to give every color a consistent name from a template.
  →
• STYLES, VARIABLES & CODE
  Turn your color list into a sheet, Figma styles and variables Click Render Colors to Figma to draw a color sheet, then add the colors as local color styles or as variables in a collection called Colorly.
  →