Contrast Checker

ColorsNew

Pick foreground and background colors to get the exact contrast ratio with live preview. Shows WCAG AA and AAA pass/fail for normal and large text.

Foreground (text)

HEX:#1A1A2E

RGB:rgb(26, 26, 46)

Values:26, 26, 46

Background

HEX:#FFFFFF

RGB:rgb(255, 255, 255)

Values:255, 255, 255

Large text: 24px bold

The quick brown fox jumps

Normal text: 16px

The quick brown fox jumps over the lazy dog.

Small text: 12px

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi aliquip ex ea commodo consequat.

Contrast Ratio

17.06

Excellent: AAA compliant

WCAG Compliance

AA Normal text≥ 4.5:1

PASS

AA Large text≥ 3:1

PASS

AAA Normal text≥ 7:1

PASS

AAA Large text≥ 4.5:1

PASS

Color values

Foreground

#1A1A2Ergb(26, 26, 46)

Background

#FFFFFFrgb(255, 255, 255)

Works great for

✅

WCAG accessibility auditing

Check any foreground/background color pair against WCAG 2.1 AA and AAA thresholds for both normal and large text in one view. Catch accessibility failures before a pull request reaches production.

🖋️

Verifying text readability

UI designers can paste text and background hex values from Figma or Sketch and instantly see whether body copy, captions, and headings meet minimum contrast requirements. The live preview shows real text at multiple sizes.

🏢

Brand color approval process

Validate that proposed brand color combinations meet accessibility standards before they are locked into a style guide. Presents a clear pass/fail verdict for each WCAG criterion so stakeholders can make informed decisions.

🏛️

Government & enterprise compliance

Public-sector and enterprise projects must meet Section 508 and WCAG AA requirements. Verify every UI color pair and document the contrast ratio for compliance reports and accessibility audits.

🌙

Dark mode contrast validation

Dark mode palettes often introduce new foreground/background pairings with insufficient contrast. Test each combination independently to ensure the dark theme meets the same accessibility bar as the light theme.

📖

Design system documentation

Record verified contrast ratios for every color token pair in a design system so component libraries are built on an accessible foundation. Export the hex values and ratio for inclusion in developer and designer docs.

contrast checkerwcag contrastcolor contrast ratioaccessibility contrastwcag aawcag aaaforeground background contrasta11y color checkcontrast ratio checkersection 508

Frequently asked questions

What contrast ratio does WCAG AA require?

WCAG AA requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt bold or 24pt regular and above). WCAG AAA raises these thresholds to 7:1 and 4.5:1 respectively.

How do I check if my text and background colors are accessible?

Pick a foreground and background color and the tool calculates the exact contrast ratio with a live preview of sample text. It then shows a clear pass or fail result for both WCAG AA and AAA, at normal and large text sizes.

Is this contrast checker accurate enough for accessibility audits?

Yes. It calculates contrast ratio using the standard WCAG relative luminance formula, the same method accessibility auditors and Section 508 reviews rely on, so the pass or fail results match official compliance checks.

Does the contrast checker work for dark mode color combinations?

Yes. Enter any foreground and background pair, light-on-dark or dark-on-light, and the ratio and pass or fail results are calculated the same way regardless of which color is lighter.