contrast Accessibility workflow

Accessible defaults, verified before handoff.

Use contrast as one quality gate inside a broader system: semantic colour roles, readable typography, visible states and documented decisions developers can implement.

contrastCheck a colour pair menu_bookUnderstand WCAG contrast

A passing hero headline does not prove the complete interface is readable.

Assign roles

Name canvas, surface, text, action, focus and status colours.

Test pairs

Check essential combinations for text, UI boundaries and focus.

Review states

Include hover, focus, disabled, error and high-contrast needs.

Document

Record accepted uses and failures for design and development.

Fast checks for the visual decisions that most often reach implementation without review.

contrast↗

Contrast Checker

Test WCAG AA and AAA for normal, large and interface text.

color_lens↗

Colour Palette Generator

Create candidates, then assign them to semantic roles.

format_size↗

Type Scale Generator

Build hierarchy without relying on colour alone.

match_case↗

Font Pairing

Compare readable heading and body combinations.

calculate↗

PX to REM

Map fixed-looking values to scalable browser units.

share↗

Social Media Sizes

Keep essential copy inside safe, readable image areas.

Complete the check with semantic roles, typography and real interface states.

WCAG Colour ContrastRatios, thresholds and practical fixesarrow_forward Accessible Colour PalettesTest a system instead of one pairarrow_forward Colour Theory for InterfacesUse hierarchy without losing meaningarrow_forward Web Typography GuideReadable roles, measure and rhythmarrow_forward

Accessible handoff

The planned Figma Production System connects semantic variables, component states, responsive behaviour, annotations and QA. The current page is a transparent pre-launch preview.

Explore the Figma system Use the production field guide

The Figma system is not for sale until its beta and QA gates pass.

From palette to accessible handoff