Color Contrast Checker Tool
Contrast Preview
Superpowered
Smarter Together
Let your eyes feast on the stunning beauty of gradient colors, where hues seamlessly blend into one another.
10x your productivity with AI.
The essential color contrast checker
Tool Description
Ensure your website is accessible and user-friendly for everyone by creating beautiful, WCAG-compliant, and APCA-perceptive designs. This vital tool helps you quickly analyze if your text and background color combinations provide enough contrast for optimal readability under both traditional and next-generation guidelines. Press spacebar to generate random color combinations, or use the color pickers to test specific colors.
How does it work?
Simply use the color pickers or paste in your Hex color values for your text and background. Toggle between the traditional WCAG 2.1 ratio standard or the next-generation APCA (Advanced Perceptual Contrast Algorithm) standard. The tool instantly calculates compliance and provides a clear Pass or Fail score for standard (AA / Lc 60) and enhanced (AAA / Lc 75) accessibility. Make adjustments on the fly and design with accessibility in mind from the start.
Based on the Contrast (Enhanced) and Contrast (Minimum) guides from the WCAG, alongside the next-generation draft APCA (Advanced Perceptual Contrast Algorithm) specifications. Using Color.js library for contrast calculations.
Colors overview
| Color | HEX | RGB | HWB | OKLAB | OKLCH | P3 | Actions |
|---|---|---|---|---|---|---|---|
| | #fff | rgb(100% 100% 100%) | hwb(none 100% 0%) | oklab(100% 0 0) | oklch(100% 0 none) | color(display-p3 1 1 1) | |
| | #af6647 | rgb(68.6% 40% 27.8%) | hwb(18 28% 31%) | oklab(58.5% 0.076 0.072) | oklch(58.5% 0.104 43.4) | color(display-p3 0.647 0.414 0.302) |
Click on a color value to copy it to your clipboard.