Accessibility Color Contrast Checker — Free WCAG & ADA Tool

If you design or build interfaces, an accessibility color contrast checker is not optional decoration—it is how you prove text and controls are readable before users complain or legal risk appears. Teams in the UK and EU search for an accessibility colour contrast checker or accessible colour checker with the same goal: numeric proof that foreground and background colors meet WCAG. This guide explains what those tools measure, how ADA expectations map to WCAG 2.1 AA, what changed in WCAG 2.2, and how our free website color contrast checker fits into a modern workflow—without replacing the depth you expect from references like WebAIM or Adobe Color, but going further on fix patterns and production checklists.

Section 508 Color Compliance

Section 508 of the Rehabilitation Act requires U.S. federal agencies and many contractors to make electronic and information technology accessible. The current Section 508 refresh points to WCAG 2.0 Level AA as the technical baseline—which means the same contrast ratios you test for WCAG AA are what a 508 compliance color checker must verify: at least 4.5:1 for normal text, 3:1 for large text, and 3:1 for many user-interface components and graphical objects under non-text contrast guidance.

A dedicated 508 color checker does not use different math from a WCAG tool—it reports whether foreground and background pairs meet those thresholds. Many agencies now align internal QA to WCAG 2.1 or 2.2 AA even when procurement language still references 2.0; the numeric bars for color stay consistent. Document each passing hex pair when you ship so Section 508 reviews and ADA digital cases share one audit trail.

How to Check if Colors Are ADA Compliant

ADA Title III and related U.S. guidance treat WCAG 2.1 Level AA as the practical standard for public websites and apps. You do not need a separate formula—follow this workflow whenever someone asks how to check if colors are ada compliant:

1. Enter the foreground color—the text, icon, or control label hex (for example #374151).
2. Enter the background color—the surface behind it (for example #FFFFFF), including cards and buttons.
3. Read the contrast ratio the tool calculates (1:1 through 21:1).
4. Verify AA pass—normal text needs at least 4.5:1; large text (18pt+ regular or 14pt+ bold) needs at least 3:1; most UI boundaries need at least 3:1 at AA.
5. Re-test hover, focus, and disabled states—the colors users actually see in production.

Check My Colors Now — free contrast checker

WCAG Contrast Requirements at a Glance

Use this table as a quick reference when you run an accessibility color contrast checker. AA is the level most ADA and Section 508 workflows require; AAA is enhanced and recommended for long reading.

What is an Accessibility Color Contrast Checker?

A color contrast accessibility checker compares two colors—usually text and its background—and calculates a contrast ratio from 1:1 (no difference) to 21:1 (maximum). It then maps that number to WCAG Level AA and AAA success criteria so you know whether a pairing is safe for normal or large text. Unlike guessing in Figma or eyeballing a monitor, a dedicated text contrast checker uses the same relative luminance formula browsers and auditors reference, which keeps design, development, and QA aligned.

Designers need checkers when exploring brand palettes, defining semantic tokens (primary, muted, danger), or handing off marketing landing pages with custom gradients. Developers need them when implementing dark mode, theme switches, or CMS-driven backgrounds where authors can pick colors. Product and compliance teams need audit trails showing which hex pairs passed at ship time. A single ADA contrast checker session before release prevents expensive rework when accessibility reviews flag gray placeholder text, low-contrast links, or icon-only buttons that fail non-text contrast guidance.

Good tools also support more than one pair at a time: navigation on a header band, body copy on white, destructive buttons on tinted reds, and chart labels on colored series. That mirrors how real sites fail—not from one hero headline, but from dozens of small combinations nobody documented.

WCAG AA vs AAA — What is the Difference?

WCAG publishes two contrast tiers inside each version. Level AA is the minimum most laws and procurement policies cite; Level AAA is an enhanced bar recommended when readability is critical. A reliable WCAG AA checker reports both so you can aim for AA everywhere and reserve AAA for long reading surfaces, patient portals, or public-sector content without guessing which column matters for compliance.

Large text follows different thresholds: AA allows 3:1 and AAA allows 4.5:1 when type is at least 18pt regular or 14pt bold. Many product teams pass AA on buttons and navigation, then push article body copy toward AAA when stakeholders expect magazine-quality readability. Run a full WCAG check on every semantic token—primary, muted, danger, success—because a palette that passes on white often fails on tinted cards or dark mode surfaces.

WCAG Contrast Requirements Explained

Web Content Accessibility Guidelines (WCAG) 2.x define contrast using relative luminance, not hue names. That means two blues can behave differently if one is lighter, and a “brand red” button can fail while a neutral gray passes. Success Criteria 1.4.3 (Contrast Minimum) sets the AA bar most teams must hit; 1.4.6 (Enhanced Contrast) defines stricter AAA thresholds for organizations that commit to them. See the WCAG Contrast Requirements at a Glance table above for ratio summaries.

“Large text” is not subjective: WCAG specifies 18 point regular or 14 point bold (roughly 24px / 18.67px CSS when using px). Headlines often clear the large-text threshold, which is why marketing sites sometimes pass with 3:1 orange on white while body copy at the same hue would fail. UI components and graphics fall under related guidance (including 1.4.11 Non-text Contrast in WCAG 2.1): icons, chart slices, and focus rings need at least 3:1 against adjacent colors so users who cannot perceive hue differences still see boundaries.

Document which level you target per component: AA for general product UI, AAA for long-form reading or public-sector sites. When stakeholders ask for pastel aesthetics, show the ratio numbers—design trade-offs become concrete instead of ideological.

ADA Compliance Color Requirements

The Americans with Disabilities Act (ADA) does not list hex codes in statute; courts and federal guidance increasingly treat WCAG 2.1 Level AA as the measurable standard for public-facing websites and many mobile experiences. That means your ADA color contrast checker workflow is really a WCAG workflow with legal documentation: store the ratio, the level claimed (AA or AAA), and the component (e.g., footer link on #F3F4F6). For U.S. federal agencies and contractors, Section 508 of the Rehabilitation Act requires accessible electronic and information technology; the current Section 508 refresh maps to WCAG 2.0 Level AA, while many agencies voluntarily align procurement and internal QA to WCAG 2.1 AA—the same ratios yourADA compliance color checker already tests.

In practice, Section 508 and ADA Title III digital cases converge on the same numeric bar for color: 4.5:1 for normal text, 3:1 for large text and many non-text UI boundaries at Level AA. Document each passing pair in release notes or design-system changelogs so legal and product teams share one source of truth. When an auditor asks whether a checkout label is compliant, you should be able to point to a dated WCAG check result, not a designer's subjective “it looks fine.”

ADA compliance is broader than contrast—keyboard access, forms, media alternatives—but color remains the most common visual failure in third-party audits. A plaintiff or regulator does not need to prove you ignored the entire specification; repeated failures on contact links, cookie banners, and checkout labels are enough to create exposure. Testing early with an accessibility color contrast checker reduces that surface area and demonstrates good-faith remediation if issues are found later.

International teams should note: EN 301 549 in Europe also points to WCAG. Whether your copy says ADA, EAA, or AODA, the numeric ratios you test are largely the same at AA level—only documentation and scope differ.

WCAG 2.2 Color Contrast Updates

WCAG 2.2 (published October 2023) did not change the core text contrast math from 2.1—AA still requires 4.5:1 for normal text and 7:1 for AAA—but it tightened expectations around focus and visibility in ways that affect color workflows. Success Criterion 2.4.11 (Focus Not Obscured, Minimum) and related focus guidance mean focus indicators must remain visible and meet contrast against adjacent colors; a keyboard user who cannot see which button is active has the same practical problem as low-contrast body copy. Teams upgrading from a 2.1-only checklist should re-test focus rings, sticky headers that cover focused controls, and custom component outlines with the same rigor they apply to paragraph text.

WCAG 2.2 also adds criteria for dragging movements and target size that sit beside contrast work in design QA. When you run a WCAG AA checker, include focus, hover, and disabled states in the same session as default text—those states ship to production and are increasingly scrutinized in audits written against 2.2-aware playbooks even when the underlying ratio table is unchanged.

Free Tools to Check Color Contrast

You do not need desktop software to validate a landing page or design-system token set. Theme & Color hosts a free, browser-based WCAG contrast checker that works as a website color contrast checker for real hex pairs: enter foreground and background values, toggle normal vs large text, and see AA and AAA columns update instantly. It supports multiple color groups so you can test navigation on a header band, body copy on white, and destructive buttons on tinted reds in one sitting—mirroring how sites actually fail, not just a single hero headline.

Use it as your default WCAG AA checker during design critique, before merging CSS variables, and when authors pick CMS-driven backgrounds. Pair results with our tint and shade generator when you need to darken text or lighten surfaces without abandoning brand hue. No account, no export limits—paste, check, and ship. Thousands of designers and developers use it weekly for the same reason you opened this article: fast, defensible numbers before code review or legal review.

How to Use Our Free Contrast Checker

Theme & Color's free WCAG contrast checker runs in the browser with no login. Use it as your default text contrast checker during design critique and before merging CSS variables.

1. Open the contrast checker tool and add a color group for each surface type (page body, card, header, button).
2. Enter foreground hex values for text, links, and icons; enter background hex for each surface.
3. Toggle normal vs large text size to see AA and AAA columns update—large headlines may pass at 3:1 while captions need 4.5:1.
4. Review the matrix of combinations when multiple colors are in a group; fix any cell that fails AA.
5. Export decisions to your design system: name tokens (text-primary, surface-muted) and attach the passing ratio in documentation.
6. Re-test hover, focus, and disabled states—users interact with those colors, not just defaults.

Compared with checking one swatch at a time in a desktop app, a website accessibility color checker built for the web keeps parity with what CSS actually renders, especially when overlays, transparency, and dark mode alter effective backgrounds.

Common Color Contrast Mistakes

These five patterns appear in almost every failed audit. Each example shows a weak pairing beside a stronger fix with real hex codes—verify final values in the tool because gamma and font weight can shift perceived contrast slightly.

• Light gray text on white

  Fails AA

  Placeholder and caption styles often default to #9CA3AF on #FFFFFF. That pairing is around 2.8:1—well below the 4.5:1 AA bar for normal text. Bump body gray to #4B5563 or darker for paragraphs users must read.

  Weak pair

  Sample text

  #9CA3AF on #FFFFFF

  Better fix

  Sample text

  #374151 on #FFFFFF

  Approximate contrast ratio: 2.84:1 vs 7.02:1

• Yellow text on white

  Fails AA

  Bright yellow (#FFFF00) on white looks cheerful in mood boards but delivers roughly 1.07:1 contrast. Use yellow as a background or border accent, not as small type on white.

  Weak pair

  Sample text

  #FFFF00 on #FFFFFF

  Better fix

  Sample text

  #854D0E on #FFFFFF

  Approximate contrast ratio: 1.07:1 vs 4.54:1

• Dark navy on white

  Passes AA

  Navy (#000080) on white exceeds AA for normal text and is a dependable choice for headings and links in corporate UI. This is the pattern to emulate when you need saturated brand color without sacrificing readability.

  Strong pair

  Sample text

  #000080 on #FFFFFF

  Weaker alternative

  Sample text

  #6495ED on #FFFFFF

  Approximate contrast ratio: 8.59:1 vs 3.94:1

• Dark text on light background

  Passes AA

  Near-black (#111827) on off-white (#F9FAFB) is the workhorse pairing for articles and dashboards. It passes AA and AAA for normal text, which is why design systems anchor neutrals before adding brand accents.

  Strong pair

  Sample text

  #111827 on #F9FAFB

  Weaker alternative

  Sample text

  #D1D5DB on #F9FAFB

  Approximate contrast ratio: 16.05:1 vs 2.56:1

• Pure white on light yellow

  Fails AA

  White labels on pale yellow cards (#FEF9C3) fail because both colors are high-luminance. Switch to dark amber or brown text, or deepen the yellow background until white type clears 4.5:1.

  Weak pair

  Sample text

  #FFFFFF on #FEF9C3

  Better fix

  Sample text

  #713F12 on #FEF9C3

  Approximate contrast ratio: 1.18:1 vs 5.12:1

Notice a theme: failures cluster around “soft” neutrals and high-luminance accents. Passes cluster around deliberate dark-on-light neutrals or saturated dark hues on white. Brand teams can keep warmth by shifting yellow and pink into backgrounds while keeping type in brown or navy families.

How to Fix Low Color Contrast

When a pair fails, adjust luminance before hue. Darkening text one or two steps on your ramp often fixes body copy without changing brand recognition. Lightening backgrounds (or moving from pure white to a tinted surface) can preserve colorful text that would fail on #FFFFFF. For buttons, increase border contrast or add a solid fill rather than ghost-outline styles that dip below 3:1.

Systematic fixes scale better than one-off tweaks. Generate ten lighter tints and ten darker shades from your primary brand hex with our tint and shade generator, assign semantic names, then sweep the ramp in the contrast checker. Lock the lowest step that still passes for text, and the highest step safe for backgrounds. Document forbidden pairs (e.g., “never use accent-200 for captions on white”) in your design system README.

For dark mode, rebuild the table—colors that pass on white often fail on #121212. Treat dark theme as a second product surface, not an inverted filter. Test placeholders, disabled inputs, and success/error banners; they carry legal weight in forms and checkout.

When marketing supplies photography-heavy heroes, add scrims or solid chips behind type instead of relying on text-shadow alone. Shadows do not satisfy WCAG contrast math. If video or imagery must stay untouched, move copy to a solid card with tested colors.

Finally, bake checking into process: design review checklist, PR template for UI engineers, and regression snapshots for token changes. Tools like Adobe Color and WebAIM Contrast Checker are excellent references; Theme & Color adds multi-color groups, combo testing with your palette generator, and articles that tie ratios to ADA and WCAG language so non-specialists can follow along.

Beyond Ratios: What Else to Test

Contrast checkers do not replace manual keyboard testing or screen reader review, but they eliminate the most frequent visual defect class. Also verify link distinction (underline or 3:1 non-color cue), focus visibility, and that status is not conveyed by color alone. Pair quantitative checks with real-user feedback when possible—especially for dyslexia-friendly typefaces and spacing, which contrast math does not measure.

For component libraries, export passing pairs as design tokens and Storybook stories labeled with their ratio. Engineers then import the same hex values, and QA can spot drift when someone overrides CSS with a lighter gray “just for this page.”

FAQ