The Color Contrast Checker measures the contrast ratio between a foreground (text) color and a background color and tells you whether that pair meets the Web Content Accessibility Guidelines. It reports a single number between 1:1 and 21:1 and grades it against the WCAG 2.2 thresholds for AA and AAA at both normal and large text sizes, plus the separate 3:1 threshold for user-interface components and graphics.
Contrast is the difference in relative luminance between two colors, not just how different they look. Two colors can feel distinct while still failing for readers with low vision, color vision deficiency, or anyone using a phone in bright sunlight. The ratio is calculated with the exact sRGB relative-luminance formula defined by WCAG, so the result matches what auditing tools and screen-reader users experience rather than a rough visual guess.
Everything runs in your browser. Type or paste colors as HEX, RGB, HSL, or a CSS keyword, watch a live text preview update, and if a pair fails you can apply a suggested color that passes. Nothing is uploaded, there is no signup, and the tool keeps working offline once the page has loaded.
Type or paste the foreground color in any common format — #1a1a1a, rgb(26,26,26), hsl(0,0%,10%), or a keyword like navy. A color swatch and native picker let you fine-tune it.
Set the background the text sits on. If your text color has transparency, it is blended over this background before the ratio is measured, matching what users actually see.
The exact contrast ratio appears with pass or fail badges for AA and AAA at normal and large sizes, plus the 3:1 UI-component check, all next to a live sample of text on your background.
If a combination fails, apply the suggested accessible color — the tool nudges the text lighter or darker until it clears your target level, then you can copy the fixed value.
Uses the official sRGB relative-luminance and contrast-ratio formulas from WCAG 2.2, so the number matches formal audits down to two decimal places rather than approximating
Every result is graded against AA (4.5:1), AAA (7:1), the large-text thresholds (3:1 and 4.5:1), and the 3:1 rule for non-text UI components and graphical objects
A real sample of normal and large text renders on your chosen background as you type, so you can judge readability alongside the numeric score
When a pair fails, the tool walks the text color lighter or darker in HSL until it meets your target ratio and offers a passing value you can apply in one click
Pick colors and convert between HEX, RGB, and HSL formats
Create beautiful CSS gradients with live preview
Design layered CSS box-shadows with a live preview and sliders for offset, blur, spread, color, opacity, and inset — then copy production-ready CSS.
0 comments
No comments yet. Be the first to share your thoughts!