WCAG Color Contrast Checker
A free online WCAG 2.1 accessibility color contrast checker. Input foreground and background colors in Hex, HSL, or RGB formats to calculate the exact contrast ratio. Instantly see pass/fail grades for WCAG AA and AAA standards across normal and large text sizes. Features interactive range sliders and a smart suggestion tool that recommends nearest shades to easily pass standards.
Relative Luminance Contrast: Contrast is measured from 1:1 (no contrast, text is invisible) to 21:1 (maximum contrast, pure black on pure white). WCAG AA requires 4.5:1 for normal text, while AAA requires 7:1.
Color Picker Inputs
Luminance Ratio Preview
Calculated Ratio7.29:1
Live Rendering Previews
BuiltItDev Accessibility Contrast CheckNormal Text Preview (14px/16px Medium weight)
BuiltItDev Accessibility Contrast CheckLarge Text Preview (18px+ Bold / 24px Regular weight)
WCAG 2.1 Compliance checklist
Normal Text (AA)Requires 4.5:1
✓ PASSED
Normal Text (AAA)Requires 7.0:1
✓ PASSED
Large Text (AA)Requires 3.0:1
✓ PASSED
Large Text (AAA)Requires 4.5:1
✓ PASSED
Related Design Tools
CLIcCp
Browse all Design tools →Color Converter (HEX / RGB / HSL)
Convert colors between HEX, RGB, HSL, and CMYK formats.
Image Compressor
Compress images in your browser — JPEG, WebP, PNG. No uploads.
Color Palette Generator
Generate complementary, analogous and triadic palettes from any colour.