Peregrine falcon logoPeregrine Dev

Color Contrast Checker — WCAG Accessibility Free

Check color contrast ratios against WCAG AA and AAA accessibility standards. Instantly see pass/fail results and get suggestions for compliant colors.

Large Text Preview (24px bold)

Normal text preview — The quick brown fox jumps over the lazy dog. This sample text helps you evaluate readability at body-copy size (16px).

Contrast Ratio

11.50:1

AA Normal Text

Requires 4.5:1

AA Large Text

Requires 3:1

AAA Normal Text

Requires 7:1

AAA Large Text

Requires 4.5:1

Pick a color?

Explore HEX, RGB, HSL values

How to color contrast checker

  1. 1.Enter a text color using the hex input field or the native color picker
  2. 2.Enter a background color using the hex input field or the native color picker
  3. 3.View the contrast ratio and WCAG AA/AAA pass or fail results instantly
  4. 4.If failing, apply the suggested text color adjustment to meet the required threshold

About This Tool

A color contrast checker is an essential accessibility tool for web developers and designers. It calculates the contrast ratio between a text color and a background color, then evaluates whether the combination meets WCAG (Web Content Accessibility Guidelines) standards for readability.

The WCAG defines two conformance levels: AA (minimum) and AAA (enhanced). AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text. AAA requires 7:1 for normal text and 4.5:1 for large text. Meeting these thresholds ensures that content is readable by users with low vision and color vision deficiencies.

This free contrast checker performs all calculations in your browser using the official sRGB linearization formula and WCAG relative luminance definition. If your colors fail, the tool suggests an adjusted text color that would pass. No data leaves your browser.

Frequently Asked Questions

The WCAG (Web Content Accessibility Guidelines) contrast ratio measures the difference in perceived brightness between two colors. It ranges from 1:1 (no contrast, identical colors) to 21:1 (maximum contrast, black on white). Higher ratios mean better readability for users, including those with visual impairments.

WCAG AA requires a minimum contrast ratio of 4.5:1 for normal-sized text (below 18pt or 14pt bold) and 3:1 for large text (18pt and above, or 14pt bold and above). These thresholds ensure content is readable by people with moderately low vision.

WCAG AAA is a stricter standard than AA. AAA requires 7:1 for normal text and 4.5:1 for large text, while AA requires 4.5:1 and 3:1 respectively. AAA conformance provides better readability for users with more severe visual impairments, but it can be harder to achieve with brand colors.

The contrast ratio is calculated using relative luminance values of the two colors. Each sRGB color channel is linearized using the sRGB transfer function, then combined using the formula L = 0.2126*R + 0.7152*G + 0.0722*B. The ratio is (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance.

No. All contrast calculations happen locally in your browser using pure math. No color data is sent to any server, and there are no usage limits or account requirements.

Related Tools

Color PickerColor Palette GeneratorHex to RGB