Accessible Website Color Contrast Checker

Good design means everyone can use your website. Our free Accessibility Checker tests your color combinations against WCAG standards to make sure text is easy to read for all visitors, including those with vision challenges.

Get Our Free Inspiration Guide

Learn More
Ad - Managed WordPress Hosting from SiteGround - Powerful, yet simple to use. Click to learn more.

Check your color contrast for WCAG Standard

Color Accessibility (Contrast) Checker

Select two colors: first for Text, second for Background.
(Results show both text-on-bg and bg-on-text.)
Click & press Ctrl/⌘ + V to paste a screenshot
or upload below

Tips for better results

  • If you see a low-contrast warning, slightly darken the text or lighten the background (or vice versa) and test again.
  • For headings or buttons, aim for AA Normal or higher. For small body text, try for AAA if possible.
  • Keep your brand color as the accent, and adjust neutrals (grays, white/near-white) to hit the target ratio.

Privacy note. Everything runs in your browser; images and colors are not uploaded anywhere.

How to Use the Color Accessibility (Contrast) Checker

Quick start

  1. Choose Screenshot/Palette or Manual at the top.
  2. Pick your Text color first, then your Background color.
  3. The tool shows whether your colors pass WCAG contrast standards and gives a live preview.

Option 1: Screenshot/Palette

  1. Paste a screenshot of your site (click the box, press Ctrl/⌘+V) or Upload an image.
  2. Click Analyze Color Contrast to extract a color palette.
  3. Click two swatches from the palette:
    • First click = Text (outlined in solid blue)
    • Second click = Background (outlined in dashed green)
  4. See pass/fail badges and previews below. Click any hex code to copy it.

Option 2: Manual Entry

  1. In Manual mode, set colors with the color pickers or type Hex values (e.g., #1A73E8 and #FFFFFF).
  2. Click Check Contrast.
  3. Review pass/fail badges and the live UI preview. Use the Copy buttons to grab hex codes.

Reading the results

  • AA Normal: Pass means your colors are readable for regular body text.
  • AA Large: Pass means your colors are readable for large text (≈ 18pt regular or 14pt bold).
  • AAA: Stricter standard. Great if you can meet it, especially for small text.
  • The badge also shows your contrast ratio (e.g., 7.20:1). Higher is better.
  • You’ll also see:
  • Text on Background and Background on Text tested both ways.
  • A live preview of buttons, links, cards, and sample text so you can picture it on a real page

Reset

Need a fresh start? Click Reset (available in both modes) to clear the image, swatches, and results.

Name your project (optional)

 In the Project name field below the results, type something clear like
Acme Marketing Site – Homepage or ClientX – Buttons.

Download the report. Click Download Report.

  • A single HTML file saves to your browser’s download folder.
  • The file name uses your project name + a timestamp, e.g.
    acme-marketing-site-homepage-20250822-1430.html.