jarvisbox

Color Contrast Checker

Check WCAG 2.1 contrast ratios between foreground and background colors for AA and AAA compliance.

100% client-side · no upload

Normal text sample

Large text sample

Contrast ratio

21:1

How to use the contrast checker

  1. Enter or pick your foreground (text) color.
  2. Enter or pick your background color.
  3. Read the contrast ratio and WCAG pass/fail badges instantly.

Common use cases

Related tools: Color Blind Simulator · Font Pair Previewer · All Design Tools

Frequently Asked Questions

What contrast ratio is required for WCAG AA?
WCAG 2.1 Level AA requires a minimum contrast ratio of 4.5:1 for normal text (under 18pt or 14pt bold) and 3:1 for large text (18pt+ or 14pt+ bold). UI components and graphical elements also need 3:1.
What is WCAG AAA?
WCAG Level AAA is the highest accessibility standard. It requires 7:1 for normal text and 4.5:1 for large text. AAA is the recommended target for critical content such as emergency information.
Does it work on mobile?
Yes. The checker works in any modern mobile browser. All calculations are done instantly in JavaScript — no server, no upload, no lag.
Report a problem with this tool