Accessibility Contrast Checker

Check text, link, and button contrast before publishing a page or design.

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.

Preview

Review the actual reading surface.

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

Documentation

Accessibility Contrast Checker

Full Docs

About this tool

Accessibility Contrast Checker reviews text and UI color pairs against WCAG contrast ratios, APCA guidance, and live previews. Use it before launch when interface colors need a readability check.

Inputs and behavior

Use solid hex colors for the surface, text, link, and button colors.

Sample text, font size, and font weight help the preview match the real design. Public URL import can suggest colors from theme tags, inline CSS, and same-host stylesheets.

info

Gotchas

Do not rely on one badge alone. Review the WCAG result, APCA guidance, and live preview together.

Imported pages must be public. Private, local, or blocked URLs cannot be fetched.

tips_and_updates

Key use cases

  • -Check body text, links, and button colors before release.
  • -Compare brand colors against accessible contrast targets.
  • -Test realistic sample text with size and weight settings.
  • -Import candidate palette colors from a public page.

FAQ