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