Contrast settings
Contrast matrix
Only pairs that reach the target are shown. The badge gives the highest level reached. Rows are text colors, columns are backgrounds.
Export
Copy for Figma puts the matrix on your clipboard as SVG: paste it on a Figma canvas (⌘V / Ctrl+V) to get editable shapes and text layers. The PNG has a transparent background.
Data table (passing pairs, screen-reader friendly)
How it works
WCAG 2.x contrast ratio
The ratio of the relative luminance of the lighter and darker color, from 1:1 to 21:1. It is the legal reference in most accessibility laws (EN 301 549, ADA, Swiss eCH-0059). It is symmetric: text and background can be swapped.
APCA lightness contrast (Lc)
The Accessible Perceptual Contrast Algorithm models how we perceive contrast, including font size and weight. It is polarity-sensitive: light text on a dark background (negative Lc) is not the mirror of dark on light. APCA is a candidate method for WCAG 3, which is still a draft: use it as a complement to WCAG 2.x, not a replacement for legal compliance.
Algorithm · Bronze simple mode · SAPC-APCA
Vision simulation
Protanopia, deuteranopia and tritanopia use the Machado, Oliveira & Fernandes (2009) model at full severity. Achromatopsia keeps the perceptual lightness (OKLCH) and removes all chroma. Contrast values are recomputed on the simulated colors.
Import formats
W3C design tokens (including Figma's native variable export and Tokens Studio), Figma REST API variables, any JSON with color strings, CSS custom properties, Sass/Less variables, or a plain list.
Inspired by accessible-color-matrix by Atul Varma / 18F. Everything runs in your browser; nothing is sent to a server.