Accessibility Contrast Checker

Check WCAG contrast ratios, review APCA guidance, and preview text, links, and buttons before launch.

View documentation

Quick samples

Import palette suggestions

Fetch a public page and collect likely theme, text, and surface colors from theme tags, inline CSS, and same-host stylesheets.

Import reads the fetched HTML response plus same-host stylesheet links. Cross-host stylesheets are ignored.

Test a color pair set

Tune one surface, then check paragraph text, inline links, and button labels against it.

This same text is reused in the paragraph preview so you can check the actual feel of the pair.

Use a realistic reading size when you check body copy.

Heavier text can tolerate lower contrast than body copy, but still needs review.

Live preview

Review the actual reading surface before you trust the ratio badges alone.

Improve color contrast before launch so links and buttons stay readable.

Review the launch checklist link

Body text

Paragraph text against the selected page background.

17.74:1
#111827 / #ffffff
APCA +106
WCAG states
Normal AA Pass
Normal AAA Pass
Large AA Pass
Large AAA Pass
APCA preview
Strong body text

Suitable for body text and smaller interface copy.

dark-on-light

Link text

Inline link styling on the same surface.

5.17:1
#2563eb / #ffffff
APCA +75
WCAG states
Normal AA Pass
Normal AAA Fail
Large AA Pass
Large AAA Pass
APCA preview
Strong body text

Suitable for body text and smaller interface copy.

dark-on-light

Button text

CTA label contrast inside the button fill.

17.74:1
#ffffff / #111827
APCA +109
WCAG states
Normal AA Pass
Normal AAA Pass
Large AA Pass
Large AAA Pass
APCA preview
Strong body text

Suitable for body text and smaller interface copy.

light-on-dark