sprytools

Color Contrast Checker

Check the contrast ratio between two colors against WCAG 2.1 accessibility standards. Instantly see if your foreground/background combination passes AA or AAA for normal and large text. 100% client-side.

Normal text (18px) — The quick brown fox jumps over the lazy dog.
Large text (24px bold) — Sample heading
— contrast ratio
AA Normal AA Large AAA Normal AAA Large

Did we solve your problem today?

What is Color Contrast?

Color contrast refers to the difference in luminance between a foreground color (typically text) and a background color. Sufficient contrast ensures that text is readable for all users, including those with low vision, color blindness, or who are viewing content in bright sunlight or on low-quality screens.

Why WCAG Contrast Standards Exist

The Web Content Accessibility Guidelines (WCAG) are published by the W3C and are referenced by accessibility laws in many countries (including the EU’s EN 301 549, the US’s ADA and Section 508, and the UK’s Equality Act). Meeting WCAG contrast requirements is often a legal obligation for public sector websites and a best practice for all others.

How to Use This Tool

  1. Choose a foreground color (your text color) using the color picker or by typing a hex code like #333333
  2. Choose a background color using the same method
  3. The contrast ratio and WCAG pass/fail badges update instantly
  4. Use Swap colors to check the reverse combination
  5. Use Suggest readable text color to automatically pick black or white — whichever gives better contrast on your background

WCAG Contrast Requirements

LevelNormal textLarge text
AA4.5:13.0:1
AAA7.0:14.5:1

Large text is defined as at least 18pt (24px) for regular weight, or 14pt (~18.67px) for bold text.

Level AA is the minimum standard required by most accessibility regulations. Level AAA is an enhanced standard recommended for text-heavy or accessibility-critical applications.

Understanding the Contrast Ratio

The contrast ratio is a number between 1:1 (no contrast — identical colors) and 21:1 (maximum contrast — pure black on pure white). The formula is:

ratio = (L1 + 0.05) / (L2 + 0.05)

Where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated from the sRGB values using the WCAG-specified linearization formula.

Common Contrast Pitfalls

Privacy

All contrast calculations happen in your browser using JavaScript. No color values or other data are sent to a server.

FAQ

What is WCAG and why does contrast ratio matter?

WCAG (Web Content Accessibility Guidelines) is an international standard for web accessibility published by the W3C. A sufficient contrast ratio between text and its background ensures that users with low vision or color blindness can read content. Poor contrast is one of the most common accessibility failures on the web.

What contrast ratio do I need to pass WCAG AA?

For WCAG 2.1 Level AA: normal-size text requires a contrast ratio of at least 4.5:1, and large text (18pt / 14pt bold or larger) requires at least 3:1. Most legal accessibility requirements reference Level AA.

What is WCAG AAA and when should I target it?

WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text and 4.5:1 for large text. It is recommended for sites with primarily text content or when serving users with significant visual impairments. Not all content needs to meet AAA — it is an enhanced standard.

How is the contrast ratio calculated?

The contrast ratio uses the WCAG formula: (L1 + 0.05) / (L2 + 0.05), where L1 is the relative luminance of the lighter color and L2 is the relative luminance of the darker color. Relative luminance is calculated by linearizing each RGB channel using the sRGB gamma curve and weighting them: 0.2126*R + 0.7152*G + 0.0722*B.

What counts as large text for WCAG purposes?

Large text is defined as at least 18pt (24px) for regular weight text, or at least 14pt (approximately 18.67px) for bold text. Large text has a lower contrast requirement (3:1 for AA) because it is inherently easier to read at lower contrast than small text.