Color Contrast Checker
Compute the contrast ratio between text and background colors and check WCAG 2.x AA/AAA accessibility compliance. Everything runs in your browser.
Enter two hex colors (e.g. #333333)
FAQ
How is the ratio calculated?
Per the WCAG definition: (lighter luminance + 0.05) ÷ (darker luminance + 0.05), ranging from 1:1 (same color) to 21:1 (black on white).
What counts as large text?
Text at 18pt (~24px) or bold 14pt (~18.7px) and larger. Large text needs only 3:1 for AA and 4.5:1 for AAA.
Which color formats are supported?
#rgb and #rrggbb hex (the # is optional). Convert rgb()/hsl() values with the color converter first.
Related tools
Convert between HEX, RGB and HSL color codes with a live preview.
Generate a HEX palette of tints and shades from a base color—useful for design-system color scales. Everything runs in your browser.
Convert between px, rem, em, pt, and % based on a root font size. Handy for responsive typography. Everything runs in your browser.
Tune offset, blur, spread, color, and opacity to craft a CSS box-shadow with a live preview. Supports inset shadows. Everything runs in your browser.
Generate responsive clamp() code from size and viewport ranges for fluid typography—no media queries needed. Everything runs in your browser.
Minify CSS by removing comments and unnecessary whitespace while preserving string values. Everything runs in your browser.