WCAG Contrast Checker

About WCAG Contrast Checker

Test foreground and background color combinations and get the exact WCAG contrast ratio in real time. Enter two hex or RGB colors and the checker reports whether the pair passes WCAG 2.1 AA (4.5:1 for normal text, 3:1 for large text) and the stricter AAA level (7:1 normal, 4.5:1 large), along with pass/fail for UI components and graphical objects. Use it while designing buttons, form fields, body copy, and brand palettes to catch accessibility problems before they ship. The check runs locally in your browser, so you can test unlimited combinations without uploading anything.

How To Use

  1. Enter a foreground color and a background color using hex (e.g. #333333) or RGB values.
  2. Read the computed contrast ratio and the AA / AAA pass-fail badges for normal text, large text, and UI components.
  3. Adjust either color and re-check until the pair passes, then copy the values into your stylesheet.

Example

Input: Foreground #767676 on a white #FFFFFF background.

Output: A contrast ratio of 4.54:1 — passing AA for large text and UI components, failing AA for normal body text.

Who Uses WCAG Contrast Checker

  • Designers and front-end developers validating WCAG contrast for UI components, buttons, and body text during design and implementation.
  • Accessibility auditors and teams catching low-contrast issues on brand palettes or forms before release.
  • Anyone building or reviewing interfaces who wants unlimited private checks without uploading designs.

Frequently Asked Questions

What contrast ratio do I need to pass WCAG?

For WCAG 2.1 Level AA you need at least 4.5:1 for normal-sized text and 3:1 for large text (18pt or 14pt bold). For Level AAA the thresholds rise to 7:1 and 4.5:1 respectively. This checker tells you instantly which level each color pair meets.

What counts as "large text" for contrast?

Under WCAG, large text means roughly 18 point (24 px) regular or 14 point (18.5 px) bold and above. Large text is allowed a lower contrast ratio (3:1 at AA) because bigger or bolder strokes are easier to read.

Do UI components and icons have their own threshold?

Yes. Non-text elements such as form-field borders, icon boundaries, and chart elements need at least 3:1 contrast against adjacent colors under WCAG 2.1 AA. The checker flags this alongside the text ratios.

Is my color data uploaded anywhere?

No. The ratio is calculated in your browser from the hex or RGB values you enter. Nothing is sent to a server, so you can safely test proprietary brand colors.

More Links