Color Contrast Checker

Check if your color combinations meet WCAG 2.1 AA and AAA accessibility standards. Enter foreground and background colors and see the contrast ratio instantly.

When to Use

Use this when designing websites, apps, or documents to ensure text is readable for users with low vision and to comply with WCAG 2.1 accessibility standards.

How to Use Color Contrast Checker

  1. Enter the text (foreground) color as a hex code (e.g. #333333) or use the color picker.
  2. Enter the background color using hex or the color picker.
  3. The contrast ratio is calculated instantly using the WCAG relative luminance formula.
  4. WCAG AA requires 4.5:1 for normal text and 3:1 for large text (18pt or 14pt bold).
  5. WCAG AAA requires 7:1 for normal text and 4.5:1 for large text.
  6. Use the quick presets to test common accessible color pairs.

Examples

Black on White

Input: Foreground: #000000, Background: #ffffff

Output: Contrast ratio: 21:1 — WCAG AAA Pass

Light gray on white

Input: Foreground: #cccccc, Background: #ffffff

Output: Contrast ratio: 1.6:1 — WCAG AA Fail

Frequently Asked Questions

What is WCAG?

WCAG stands for Web Content Accessibility Guidelines. It is an international standard published by W3C that defines how to make web content more accessible to people with disabilities, including low vision.

What contrast ratio should I aim for?

Aim for at least 4.5:1 (WCAG AA) for normal body text. For large text (24px or 18.7px bold), 3:1 is the minimum. For the best accessibility, aim for 7:1 (WCAG AAA).

Does this tool check UI components like buttons?

WCAG 1.4.11 Non-text Contrast requires at least 3:1 for UI components like button borders and icons. This tool checks text contrast but the same ratio can be applied manually.

Can I input RGB colors?

Yes — both hex codes (#000000 or #000) and rgb() format (e.g. rgb(0, 0, 0)) are supported. Enter either format directly in the color input field. The color picker always outputs hex.

Related Tools