Color Contrast Checker Tool
The essential color contrast checker
Tool Description
Ensure your website is accessible and user-friendly for everyone by creating beautiful and WCAG compliant designs. This vital tool helps you quickly analyze if your text and background color combinations provide enough contrast for optimal readability. 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. The tool instantly calculates the contrast ratio and provides a clear Pass or Fail score for both WCAG AA and AAA standards. 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
Colors overview
Color Values Table
| Color | HEX | RGB | HSL | OKLAB HDR | OKLCH HDR | P3 HDR | Actions |
|---|---|---|---|---|---|---|---|
| | #aca674 | rgb(172, 166, 116) | hsl(54 25% 56%) | oklab(72% -0.01 0.07) | oklch(72% 0.07 100) | color(display-p3 0.67 0.65 0.48) | |
| | #c72d17 | rgb(199, 45, 23) | hsl(7.5 79% 44%) | oklab(54% 0.17 0.1) | oklch(54% 0.19 31) | color(display-p3 0.72 0.23 0.15) |
Click on a color value to copy it to your clipboard.