WCAG 2.1 / 2.2 accurate
Relative luminance and contrast ratios follow the ratified WCAG formula — the same one used for AA and AAA conformance today.
Colour Contrast Checker
The quick brown fox
Readable body copy keeps everyone on the page — including people with low vision or colour deficiency.
Small caption · 12px. Tiny type needs the strictest contrast.
How this is judged.
Ratios use the WCAG 2.1/2.2 relative-luminance formula. Translucent colours are alpha-composited over what sits behind them before measuring — so the number reflects what a person actually sees. “Large text” follows the spec: 18pt (24px) regular, or 14pt (18.66px) bold and up. UI components and meaningful graphics need 3:1 (SC 1.4.11); there is no AAA tier for them.
Why no APCA / WCAG 3 score?
APCA is the contrast method proposed for WCAG 3, and it’s promising — but WCAG 3 is still a working draft, APCA’s constants are versioned, and its authors ask people not to ship unofficial implementations. Rather than show a number that might be wrong, this tool sticks to the ratified WCAG 2 standard used for conformance today.
Why this tool
Built for real design decisions, not just a ratio.
Most checkers ignore opacity, ignore your actual type size, and stop at a pass/fail. This one composites translucent layers, scores the level that applies to your text, and suggests the nearest fix that still keeps your hue.
Transparency done right
When a colour has opacity, the tool composites it over what sits behind before measuring. The ratio matches what people see on screen.
Arabic & Urdu preview
Switch the sample to Arabic or Urdu with correct RTL direction, or flip the whole UI to ع for a full Arabic experience.
Frequently asked questions
Is this contrast checker free?
Yes. Free, no account, and everything runs in your browser. Colours and reports never leave your device.
Does it handle transparent colours?
Yes. Translucent colours are alpha-composited over the colour behind them before measuring, so the ratio matches what people actually see.
How does size and weight affect the result?
WCAG treats large text differently. Large text is 24px+ regular or 18.66px+ bold. The tool highlights the AA/AAA grade that applies to your current body size and weight.
Why no APCA / WCAG 3 score?
WCAG 3 and APCA are still evolving. This tool sticks to the ratified WCAG 2.1 / 2.2 relative-luminance formula used for conformance today.
هل يدعم المعاينة بالعربية؟
نعم. يمكنك معاينة النص بالعربية والأردية مع اتجاه RTL، وتبديل واجهة الأداة بالكامل إلى العربية من زر ع في الترويسة.
Can I share a specific colour pair?
Yes. Use Copy link — the URL hash stores text, background, opacity, size and weight so teammates open the same pair.