Color Contrast Checker

Check whether your foreground and background colors meet WCAG accessibility standards. Enter any two colors to instantly see their contrast ratio and whether they pass AA or AAA guidelines for normal text, large text, and UI components.

What Is Color Contrast Accessibility?

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure that text is readable by people with low vision or color deficiency. Contrast ratio is calculated from the relative luminance of two colors and expressed as a ratio like 4.5:1 or 7:1.

Normal Text

≥ 4.5:1 contrast ratio

Large Text

≥ 3:1 contrast ratio
(18pt or 14pt bold)

AAA

Normal Text

≥ 7:1 contrast ratio

Check Your Colors

Foreground (Text) Color

Background Color

Normal text preview — The quick brown fox jumps over the lazy dog.

Large text preview

—

Contrast Ratio

—

AA Normal Text

Requires 4.5:1

—

AA Large Text

Requires 3:1

—

AAA Normal Text

Requires 7:1

Tips for Accessible Color Choices

Aim for AA as the minimum — nearly all production websites should pass WCAG AA for body text. AAA is the gold standard but can be hard to achieve with colored backgrounds.
Dark text on light backgrounds is safest — near-black on white typically achieves a ratio above 12:1, giving you maximum flexibility in font size and weight.
Don't rely on color alone — beyond contrast ratio, ensure that meaning (like error states) is also conveyed through shape, pattern, or text rather than just a color difference.
Test at small sizes — a color pair that barely passes at large headings may fail for body copy. WCAG draws the line at 18pt regular / 14pt bold for the "large text" category.
Check your button states too — disabled buttons, placeholder text, and icon-only buttons each have their own contrast requirements.

Looking to build a palette before checking contrast? Try the monochromatic color generator to create a range of tints and shades from a single hue — then check each pair here.