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.
Adjust text and background colours while checking their contrast.
Find replacement colours that meet a chosen contrast target.
Adjust CSS colours and calculate contrast with focused JavaScript functions.
Check text and interface contrast with transparency and lightness controls.
Sample a foreground and background pair and copy its contrast report.
Share a colour pair with its WCAG text-contrast result.
Adjust CSS colour pairs and inspect their changing contrast ratio.
Build interface colour scales with shade curves and contrast targets.
See how a colour pair performs for different text sizes.
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.
Check colour pairs, sample an image and collect results for a PDF.
Generate colours around backgrounds, foregrounds and accents in a design.
Connect browser colour picking with shareable palettes and scales.
View text contrast through different vision and lighting simulations.
Generate lighter and darker variants at fixed percentage intervals.
Collect screen or camera colours into palettes for design-file exports
Generate a palette, pull colours from an image and export reusable swatches.
Extract image colours and document their roles in a shareable brand guide.
Compare a text and background pair with editable colour values.
Generate intermediate colours between chosen endpoints.
Browse official RAL colour families, codes and names.