APCA Contrast Calculator
apcacontrast.comCompare text contrast with its size, weight and colour direction in view.
Compare text contrast with its size, weight and colour direction in view.
Sample a foreground and background pair and copy its contrast report.
Adjust text and background colours while checking their contrast.
Find replacement colours that meet a chosen contrast target.
Check text and interface contrast with transparency and lightness controls.
Share a colour pair with its WCAG text-contrast result.
Adjust CSS colour pairs and inspect their changing contrast ratio.
Adjust CSS colours and calculate contrast with focused JavaScript functions.
Build interface colour scales with shade curves and contrast targets.
Choose numbered shades whose separation indicates minimum contrast.
Shape a complete interface palette while checking colour-pair contrast.
Generate interface themes from target contrast ratios and colour scales.
View text contrast through different vision and lighting simulations.
See how a colour pair performs for different text sizes.
Check colour pairs, sample an image and collect results for a PDF.
Multilingual retail and custom type with script labels and full-family trials.
Extract image colours and document their roles in a shareable brand guide.
Connect browser colour picking with shareable palettes and scales.
Compare colour pairs interactively or check a complete palette in code.
Compare a text and background pair with editable colour values.
Edit a colour system in perceptual coordinates and copy design tokens.
Collect screen or camera colours into palettes for design-file exports
Generate a palette, pull colours from an image and export reusable swatches.
Generate colours around backgrounds, foregrounds and accents in a design.