Skip to main content

Free Color Contrast Checker

Enter a web address to read every text color pair on the page, or pick any two colors. Checked against WCAG 2.1 AA and AAA for normal and large text, plus buttons, icons and form borders, with a live preview, a color-blindness preview and the closest colors that pass. No account needed.

Check a web page’s colors

The page loads in a sandbox in your browser and every visible piece of text is measured against its real background.

Or check any two colors

Type a hex code (#1d4ed8), rgb(), hsl() or a color name, or use the swatch.

4.54: 1 CONTRAST RATIO

    Preview

    Large text sample

    Regular body text at 16 px. This is what most of a web page is made of, so it needs the 4.5:1 ratio.

    Small print and a link in the text.

    Button outline Icon

    Checking a whole page? Run the free Accessibility Checker →

    It finds every low-contrast element on a page automatically (with the measured ratio for each), plus alt text, headings, keyboard focus, phone layout and linked PDFs.

    What the contrast ratios mean

    Contrast ratio compares how light the text is with how light its background is, from 1:1 (identical colors) to 21:1 (black on white). WCAG, the accessibility standard behind the ADA and most accessibility laws, sets minimums:

    WCAG contrast requirements
    WhatLevel AA (the usual legal target)Level AAA (enhanced)
    Normal text4.5:1 · WCAG 1.4.37:1 · WCAG 1.4.6
    Large text3:1 · WCAG 1.4.34.5:1 · WCAG 1.4.6
    Buttons, icons, form borders, focus rings, chart lines3:1 · WCAG 1.4.11(no separate AAA level)

    What counts as large text?

    Text at least 24 px (18 pt) regular, or at least 18.66 px (14 pt) bold. Most headings qualify; body text, captions, menus and buttons usually don’t. When in doubt, use the normal-text ratio.

    What has to meet contrast — and what doesn’t

    • Must: all text and images of text, placeholder text people need to read, link text, button labels, and the edges of buttons and form fields people need to find.
    • Must (3:1): icons that carry meaning, focus indicators, and the lines and bars of charts and graphs.
    • Doesn’t have to: logos and brand names, purely decorative text and images, and controls that are disabled.

    How to fix low contrast

    • Darken the text before you change the design. Light gray on white is the most common failure; #767676 is the lightest gray that passes AA on white.
    • Check every state: hover, visited links, placeholders, disabled-looking buttons that are really active, and text over photos.
    • Text over images: add a solid or semi-opaque panel behind the text, or a dark overlay on the photo, and test the worst spot.
    • Don’t rely on color alone to show links or errors (WCAG 1.4.1): add an underline, an icon or text.
    • Fix it in the theme, not page by page: most platforms (WordPress, Squarespace, Wild Apricot) set text and link colors in one place.

    How the ratio is calculated

    Each color is converted to its relative luminance: how bright it looks to the eye, from 0 for black to 1 for white, weighting green most and blue least. The ratio is (lighter + 0.05) ÷ (darker + 0.05). This checker shows the ratio rounded down, so a pair that is really 4.497:1 never shows as a passing 4.50. Colors with transparency are blended over the background first, the way they appear on screen.

    Questions people ask

    Is passing contrast enough to make a site ADA compliant?

    No. Contrast is one requirement among many: alt text, headings, form labels, keyboard access and more. Our free Accessibility Checker tests a whole page against the full WCAG 2.1 AA rule set.

    Do I need AA or AAA?

    AA is the level laws and lawsuits point to (including the 2024 ADA Title II rule for state and local government sites). AAA is stricter and worth reaching for body text where you can.

    Why does my brand color fail?

    Mid-tone brand colors often land between 3:1 and 4.5:1: fine for large headings and buttons, not for body text. Keep the brand color for large text and accents, and use the darker shade suggested above for small text and links.

    What about APCA and WCAG 3?

    APCA is a newer contrast method being considered for WCAG 3, which is still a draft. Today’s laws and audits use the WCAG 2 ratio this tool measures.