Colour Contrast Checker — Exact WCAG Ratio
Pick two colours, get the contrast ratio to two decimals and whether it passes WCAG 2.1 AA or AAA for normal and large text.
Quick answer: Check colour contrast free: enter foreground and background colours, get the exact WCAG contrast ratio and pass/fail for AA and AAA at normal and large text size.
How to use
- Pick the text colour and the background colour.
- Read the ratio and the AA/AAA results.
- Adjust until it passes.
About this tool
About one in twelve men has some colour vision deficiency, and low-contrast text fails far more people than that — outdoors on a phone, low contrast makes text unreadable for almost everyone. WCAG 2.1 sets the thresholds: 4.5:1 for normal text at AA, 3:1 for large text, and 7:1 for AAA. This checker computes the real relative-luminance ratio rather than a rough guess, tells you pass or fail at each level, and suggests how far you need to move the foreground colour to pass. Useful for designers, and it is the fastest way to check a slide or a poster before you print it.
FAQ
Is anything uploaded?
What ratio do I need?
Why is my yellow-on-white failing?
Does it check non-text elements?
Is a higher ratio always better?
Can I copy the hex codes?
Rate this tool
Your rating stays in this browser (local storage) — nothing is sent to any server.
Related tools
Image Compressor
Image Tools
📐Image Resizer
Image Tools
🔄Image Converter (WebP → JPG)
Image Tools
🎨Color Picker from Image
Image Tools
🧹EXIF / Metadata Remover
Image Tools
💧Image Watermark Tool
Image Tools
🧵Screenshot Stitcher
Image Tools
⭐Favicon Generator
Image Tools
🪄Background Remover
Image Tools
🎞️GIF Maker
Image Tools
✂️Image Cropper
Image Tools
🔃Image Rotator
Image Tools
🔤Image to Base64 Converter
Image Tools
🎨Color Picker from Image
Image Tools
😂Meme Generator
Image Tools
🔍Image Upscaler
Image Tools
🎨Logo Generator
Image Tools
🖼️WebP to PNG Converter
Image Tools
🖼️Photo Collage Maker
Image Tools
📐Social Media Image Resizer
Image Tools
The complete color contrast checker guide
Prefer the long version — a worked example, the mistakes people actually make, and answers to real questions? The blog guide Color Contrast Checker — Complete Guide, Mistakes & FAQ covers all of it step by step.
Browse the collection: Image Tools — All 20 Free Online Tools