Color Contrast Checker

Check the WCAG contrast ratio between two colors and see whether they pass AA and AAA accessibility levels. Free and private, right in your browser.



Sample text

Contrast ratio-
AA (normal text, 4.5:1)-
AA (large text, 3:1)-
AAA (normal text, 7:1)-

Pick a foreground and background color and instantly see the contrast ratio plus pass/fail results for WCAG AA and AAA, at both normal and large text sizes, handy when you're picking a text/button color pair for a design system or auditing an existing site for accessibility.

How to use it

  1. Enter or pick your foreground (text) color
  2. Enter or pick your background color
  3. Read the contrast ratio and AA/AAA pass–fail results

Frequently asked questions

What contrast ratio do I need to pass WCAG?
4.5:1 for normal text and 3:1 for large text (24px+, or 19px+ bold) at the AA level. AAA raises those to 7:1 and 4.5:1. UI components and graphical objects need at least 3:1 against their background.
Which text size counts as "large text" for the lower threshold?
18.66px (14pt) bold or larger, or 24px (18pt) regular weight or larger. Anything smaller is judged against the stricter normal-text ratio.
My colors pass AA but fail AAA. Is that a problem?
Not necessarily. AA is the legal/standard bar most guidelines require; AAA is a stretch goal. Aim for AAA on body copy if you can, but shipping solid AA compliance is a legitimate, common target.
Does this check colors with transparency/alpha?
Enter the final rendered color. If your text or background uses opacity, flatten it against its actual backdrop first, since alpha changes the effective contrast ratio.